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