程序構建
| weex微應用 | 微信小程序 |
|---|---|
| 通過webpack打包構建成一個純JavaScript文件，需要開發者自己寫打包腳本，非常靈活。 | 通過IDE打包，打包路徑是一個黑盒，不需要開發者寫打包腳本，必須按照它的規則書寫入口以及業務代碼。 |
| 代碼包無限制大小 | 限制大小2M |
| 無配置文件 | 需要入口配置文件來配置頁面必須依賴的Path |
應用設計指南
| weex微應用 | 微信小程序 |
|---|---|
| 無 | 包含了視覺，交互等常規設計 微信小程序設計指南 |
應用接入指南
| weex微應用 | 微信小程序 |
|---|---|
| 有，但是很分散 | 包含了應用接入指南主體 微信小程序接入指南 |
數據
| weex微應用 | 微信小程序 |
|---|---|
| 無 | 可查看運營數據 小程序數據助手，這是發布平臺的一部分 |
開發者社區支持
| weex微應用 | 微信小程序 |
|---|---|
| 有，太分散，weex主要在https://segmentfault.com/t/weex ， Vue的問題在 https://github.com/vuejs/vue/issues | 開發者社區 |
| 無 | 量身打造的 UI 組件庫 https://github.com/Tencent/weui-wxss |
| 無 | 量身打造的設計庫 https://github.com/weui/weui-design |
| 開發者數量少，百度或google搜索出來的信息量少 | 開發者眾多，問題能搜索出來 |
IDE集成開發環境
| weex微應用 | 微信小程序 |
|---|---|
| 無 | 有提供IDE集成開發環境，包括調試，發布等環節。 |
| 調試需使用weex-toolkit | 調試集成在IDE中 |
| 調試分為Debugger和Inspector，只允許單獨使用一種 | 在IDE面板中既可以Debug也可以inspector還有網絡請求等等可查看 |
| 如果要調試需要額外安裝 weex-debug | 不需要 |
| 如果要分析性能依賴Safari | 提供簡單易用的性能分析工具 |
| 編輯器隨意，如果要著色，提示，需要開發者自己找插件 | 集成在IDE中提供諸如智能提示，代碼著色等 |
| 無法實時預覽 | 可以實時預覽 |
| 釘釘js-api需要依賴釘釘客戶端模擬器包 | 無需，已經模擬實現大部分api |
| 無發布平臺 | IDE可以發布，將小程序代碼上傳到微信小程序后臺 |
| 無 | IDE有更多細節功能，可參考：uplog |
文件組織
| weex微應用 | 微信小程序 |
|---|---|
| 通過vue單組件的方式組織，也可以使用render的方式，完全取決于開發者 | wxml wxss js的方式 ，開發者不可控 |
| Vue構造函數 | App Page |
生命周期
| weex微應用 | 微信小程序 |
|---|---|
| 每一個組件都有自己獨立的生命周期 | Page 才有，并且一個頁面只能有一個Page |
| Vue的生命周期方法 | onLoad ... 之類 Page |
| 一個完整的應用，比如釘釘客戶端在后臺，應該注冊在 入口文件中 | 在App中 App，并且一個完整的小程序只允許有一個App，可以包含多個Page，一個Page代表一個完整的頁面，且小于等于5 |
頁面跳轉
| weex微應用 | 微信小程序 |
|---|---|
| 可以使用vue-router或者openLink跳轉bundle.js，等等... | 只有一種路由模塊 路由 |
數據綁定
| weex微應用 | 微信小程序 |
|---|---|
邏輯判斷：v-if="x"
|
wx:if="{{x}}" |
數據綁定：<div> {{ message }} </div>
|
<view> {{ message }} </view> |
屬性賦值：class="id"
|
class="{{ id }}" |
運算： :class="[id ? 'a': 'b']"
|
class="{{ id ? true : false }}" |
數組： <div v-for="item in items">{{ item }}</div>
|
<view wx:for="{{ items }}>{{ item }}</view>" |
對象：使用計算屬性 或 data="foo"
|
data="{{foo, bar}}" object: data:{foo: 'my-foo',bar: 'my-bar'}
|
| Vue 語法皆可支持...N | 無 |
列表渲染
| weex微應用 | 微信小程序 |
|---|---|
數組： <div v-for="item in items">{{ item }}</div>
|
<view wx:for="{{ items }}>{{ item }}</view>" |
對象迭代： <div v-for="item in objects">{{ item }}</div>
|
無 |
獲取索引：<div v-for="(item,index) in items">{{ index }} {{ item }}</div>（item的命名可以隨便換） |
<div wx:for="{{ items }}">{{index}} {{ item }}</div>（需要使用wx:for-index或者wx:for-item修改） |
唯一標識 <div v-for="item in items" :key="item.id"></div>
|
<view wx:for="{{ items }}" wx:key="{{ item.id }}"></view> |
| Vue 還有很多其他的處理方式，詳細查看 列表渲染 | 無 |
條件渲染
| weex微應用 | 微信小程序 |
|---|---|
| v-if="admin" | wx:if="{{ admin }}" |
包裝元素： <template v-if="ok"><.../></template>
|
<block wx:if="{{ ok }}"></block> |
else if and else：<div v-if="le > 5 "></div><div v-else-if="le > 2"></div><div v-else></div>
|
<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view> |
| Vue支持的更多，詳細查看 條件渲染 ，且v-show指令在weex中不支持 | 無 |
事件
| weex微應用 | 微信小程序 |
|---|---|
| @click="handler"或者v-on:click="handler" | bindtap="handler" |
| 不支持冒泡 | 支持冒泡 |
| 事件對象為 weex構建 | 事件對象支持touch event |
文件引用
| weex微應用 | 微信小程序 |
|---|---|
| 支持ES import 或者 require，決定權在于開發者 | 只允許import 或者 include，決定權在于微信 |
| 組件級別的支持 | 模板載入 include |
樣式
| weex微應用 | 微信小程序 |
|---|---|
| 只支持單組件 或者 style in Js 需要額外處理，文件怎么組織和引用完全的決定權在于開發者 | 允許使用 @import 來組織樣式 |
| 只支持class | 支持 class id element ::after ::befor |
| 不支持全局樣式 | 支持全局樣式 |
| 支持內聯樣式 | 同樣支持 |
| 基于750像素開發 | 基于 rpx 單位開發，建議使用iPhone6視覺稿為基準 |
| 布局只能使用flexbox | 都支持 |
| 支持少數的樣式 | 大部分都支持取決于你的設備 |
組件
| weex微應用 | 微信小程序 |
|---|---|
| 容器組件 div scroller list | view scroll-view swiper movable-area |
| 文本顯示需要依賴text,texttarea | 不需要text組件也可以顯示文本，本身也有text組件,texttarea |
| 開關組件 switch | switch,checkbox,radio |
| 輪播 slider,indicator | slider 是滑動選擇器 |
| 媒體 video, image | audio,video,image |
| input | input |
| 瀏覽器 web | 無 |
| 無 | icon |
| 無 | contact-button 客服會話 |
| 無 | map 地圖 |
| gcanvas依賴第三方插件 | canvas |
| 無 | navigator |
| 無 | picker-view，picker,label,form,button,progress |
| 其他組件 cell, loading,refresh,waterfall,a | 無 |
功能
| weex微應用 | 微信小程序 |
|---|---|
| 釘釘js-api，weex自帶的module，第三方插件的module | 微信小程序js-api |
