用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

钉钉Weex微应用与微信小程序对比表格

Rolan 2017-7-1 00:34

程序构建weex微应用微信小程序通过webpack打包构建成一个纯JavaScript文件,需要开发者自己写打包脚本,非常灵活。通过IDE打包,打包路径是一个黑盒,不需要开发者写打包脚本,必须按照它的规则书写入口以及业务代码 ...

程序构建

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 listview scroll-view swiper movable-area
文本显示需要依赖text,texttarea不需要text组件也可以显示文本,本身也有text组件,texttarea
开关组件 switchswitch,checkbox,radio
轮播 slider,indicatorslider 是滑动选择器
媒体 video, imageaudio,video,image
inputinput
浏览器 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
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: icepy 来自: 简书

相关阅读