程序构建
| 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 |
