Comparison of Components in MiniApps

Search:
Category Feature W3C Spec QuickApp (Xiaomi, Huawei) Alipay Mini Program Baidu Smart Mini Program
Built-in Comp. div <div> <div>
<view> <view>, <scroll-view>, <movable-view>, <movable-area>
<view> <view>, <scroll-view>, <movable-view>, <movable-area>
Built-in Comp. span <span> <span>
Built-in Comp. stack <stack>
<cover-view> <cover-view>, <cover-image>
<cover-view> <cover-view>, <cover-image>
Built-in Comp. carousel <swiper> <swiper>
<swiper> <swiper>, <swiper-item>
Built-in Comp. tabs OpenUI research
<tabs> <tabs>, <tab-bar>, <tab-content>
<tabs> <tabs>, <tab-content>
<tabs> <tabs>, <tab-item>
Built-in Comp. refresh <refresh>
Built-in Comp. icon OpenUI research <icon> <icon>
Built-in Comp. progress <progress> <progress> <progress> <progress>
Built-in Comp. anchor a a <navigator> <navigator>
Built-in Comp. text <span> <text>
<text> <text>, <rich-text>
<text> <text>, <rich-text>
Built-in Comp. text input <input> <input> <input> <input>
Built-in Comp. camera
<input> <input type="file" accept="image/*" capture>
<camera> <camera>
Built-in Comp. textarea <textarea> <textarea> <textarea>
<textarea> <textarea>, <ql-editor>
Built-in Comp. checkbox
<input type="checkbox"> <input type="checkbox">, OpenUI's <checkbox>
<input type="checkbox">
<checkbox> <checkbox>, <checkbox-group>
<checkbox> <checkbox>, <checkbox-group>
Built-in Comp. radio <input type="radio"> <input type="radio">
<radio> <radio>, <radio-group>
<radio> <radio>, <radio-group>
Built-in Comp. form <form> <form> <form>
Built-in Comp. button <button> <input type="button"> <button> <button>
Built-in Comp. label <label> <label> <label> <label>
Built-in Comp. select
<select> <select>, <option>, OpenUI proposal
<select> <select>, <option>
<picker> <picker>, <picker-view>
<picker> <picker>, <picker-view>, <picker-view-column>
Built-in Comp. slider <input> <slider> <slider> <slider>
Built-in Comp. switch OpenUI research <switch> <switch> <switch>
Built-in Comp. picker OpenUI proposal <picker>
<picker> <picker>, <picker-view>
<picker> <picker>, <picker-view>, <picker-view-column>
Built-in Comp. image <img> <image> <image> <image>
Built-in Comp. audio <audio> <audio>
Built-in Comp. video <video> <video> <video>
<video> <video>, <live-player>
Built-in Comp. canvas <canvas> <canvas> <canvas> <canvas>
Built-in Comp. animation <lottie> <lottie>
<animation-video> <animation-video>, <animation-view>
Built-in Comp. web-view <html> <web> <web-view> <web-view>
Built-in Comp. map
<map> <map>, <custommarker>
<map> <map>
Built-in Comp. list
<list> <list>, <list-item>
Built-in Comp. popup <dialog> <popup>
Built-in Comp. rtc-room
<rtc-room> <rtc-room>, <rtc-room-item>
Built-in Comp. ad <ad>
Built-in Comp. payment <inline-payment-panel>
Built-in Comp. comments
<comment-list> <comment-list>, <comment-detail>
Built-in Comp. like <like>
Built-in Comp. 3d-model <model> (WIP) <modelviewer>
Built-in Comp. rating <rating>
Built-in Comp. marquee <marquee> (deprecated) <marquee>
Built-in Comp. share-button <share-button>
Built-in Comp. drawer
<drawer> <drawer>, <drawer-navigation>
Built-in Comp. match-media <match-media>
Built-in Comp. aria-component <aria-component>
Built-in Comp. page metadata <page-meta>
Data binding Text interpolation  
Vue.js-like approach under the same .ux document. 
<template>
  <text>{{message}}</text>
</template>

<script>
  export default {
    private: {
      message: 'Hello'
    }
  }
</script>
More information.
Dynamic data in AXML is bound to the Page corresponding data content. 
<view> {{ message }} </view>

Page({ 
   data: { 
     message: 'Hello alipay!', 
    }, 
});
More information.
The rendering layer binds data through a SWAN template. 
<!-- index.swan -->
<view>{{text}}</view>

// index.js
Page({
    data: {
        text: 'init data',
    }
});
More information.
Templates Definition <template>, <slot>
<template> element in the root of the .ux document 
<!– comp.ux -->
<template>
  <div class="demo-page">
    <text class="title">Hi World</text>
  </div>
</template>
More information.
AXML’s <template> element 
<!-- header.axml -->
<template name=“header">
  <view>
    <text>{{index}}:{{msg}}</text>
  </view>
</template>
More information.
SWAN document with elements 
<view>
    <text class="wrap">hello world</text>
</view>
<text Class="wrap">hello world</text>
More information.
Templates Use template.content
<import> element in the root of the .ux document 
<import name="comp" src="./comp"></import>

<template>
  <div>
    <comp></comp>
  </div>
</template>
More information.
AXML’s <import> element 
<import src="./header.axml" />

<template is="header" data="{{...item}}"/>
More information.
Declaration in configuration document 
// home.json
{
  "usingComponents": {
     "custom": "/components/custom/custom"
   }
}

<!-- home.swan -->
<view>
   <custom name="swanapp"></custom>
</view>
More information.
Parameters Definition Attributes
Components define properties as props 
<!– comp.ux -->
<script>
  export default {
    props: ['say', 'propObject'],
    onInit() {
      console.info(this.say);    
      console.info(this.propObject)
    }
  }
</script>
More information.
Components define properties as props 
// /components/index/index.js
Component ({
  props : { 
    name : 'My name'}
});
More information.
Use of Component() + properties for registration 
// (custom.js)
Component({
  properties: {
    name: {
      type: String,
      value: 'swan',
    }
  }
})
More information.
Parameters Use Attributes
props as instance's attributes 
<import name="comp" src="./comp"></import>

<template>
  <div>
    <comp 
      say=“First Test" 
      prop-object="{{obj}}">
    </comp>
  </div>
</template>
More information.
props as instance's attributes. 
<!-- /pages/index/index.axml -->
<comp name='Another name'></comp>
More information.
properties as instance's attributes 
// home.json
{
  "usingComponents": {
     "custom": "/components/custom/custom"
   }
}
// .swan document
<view>
    <custom name="Passing text" >
    </custom>
</view>
More information.
Events Binding addEventListener, event handlers
on+eventtype attribute (@+eventtype) 
<text onclick="loadMore"></text>
More information.
on+eventtype attribute 
<view onTap="loadMore">
  More items…
<view>
More information.
bind:+eventtype attribute 
<view bind:tap="loadMore">
   More items…
</view>
More information.
Events Listener function() declaration
function() declaration in the <script> 
<script>
  export default {
    loadMore(e) {
      console.log(e);
    }  
  }
</script>
More information.
function() declaration in Page({}) 
Page ({
  loadMore(e) {
    console.log(e);
  },
});
More information.
function() declaration in Page({}) 
Page({
  loadMore(e) {
    swan.showToast(e.type);
  }
});
More information.
Events Basic event types event types
basic events touchstart, touchmove, touchend, touchcancel, click, longpress, focus, blur, appear, disappear, swipe, resize
More information.
basic events touchStart, touchMove, touchEnd, touchCancel, longTap, tap
More information.
basic events touchstart, touchmove, touchend, touchcancel, tap
More information.
Events Interface properties Standard properties
Event interface's properties type, timeStamp, target, currentTarget
More information.
BaseEvent's properties type, timeStamp, target
More information.
Properties of the event object type, timeStamp, target, currentTarget, detail, touches, changedTouches
More information.
Styles CSS profile Standard CSS
Based on CSS3 + preprocessing Supports LESS and SASS.
Only supports a subset of selectors and properties, and the following units: px, dp (device independent pixels), and %.
See the specification.
ACSS, compatible with CSS3 Profile based on CSS, adding rpx (responsive pixel), and a specific page selector.
See the specification.
Suports CSS3 Profile based on CSS, adding rpx (responsive pixel).
See the specification.
Styles Inline declaration style attribute
style attribute <template> <div style="flex-direction: column;"> </div> </template>
style attribute // Within the template <view style="color:#ffffff“ />
style attribute // Within the .swan file <view style="color: #ffffff"> swan </view>
Styles Import stylesheet @import
@import within <style> <style> @import './style.css'; </style>
@import within .acss // within a .acss document @import "./button.acss" ; @import "/common/button.acss" ;
@import from .css // Within the .css document @import "header.css";
Component interface Properties HTMLElement interface
Predefined properties data, props, computed, externalClasses, $app, $page
See more information.
Predefined properties data, props, is, $id, router, pageRouter, $page (access the page)
See more information.
Predefined properties is, id, dataset, data, properties
See more information.
Component interface Methods HTMLElement interface
Predefined methods $valid, $visible, $attrs, $listeners, $element, $root, $parent, $child, $nextTick, $forceUpdate
See more information.
Predefined methods setData, $spliceData, createSelectorQuery, createIntersectionObserver, selectOwnerComponent, selectComponsedParentComponent
See more information.
Predefined properties setData, hasBehavior, triggerEvent , createSelectorQuery, createIntersectionObserver, selectComponent, selectAllComponents, groupSetData
See more information.