手机网站

钉钉小程序与微信小程序区别?不同的怎么转换使用

位置:首页 > 手机网站 > 微信小程序,2019-08-10 08:40
钉钉Weex微应用与微信小程序的区别程序构建weex微应用微信小程序通过webpack打包构建成一个纯JavaScript文件,需要开发者自己写打包脚本,非常灵

钉钉Weex微应用与微信小程序的区别

程序构建

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}}"
数据绑定:

{{ message }}

{{ message }}
属性赋值:class="id" class="{{ id }}"
运算::class="[id ? 'a': 'b']" class="{{ id ? true : false }}"
数组:

{{ item }}

对象:使用计算属性 或data="foo" data="{{foo, bar}}"object:data:{foo: 'my-foo',bar: 'my-bar'}
Vue 语法皆可支持...N

列表渲染

weex微应用 微信小程序
数组:

{{ item }}

对象迭代:

{{ item }}

获取索引:

{{ index }} {{ item }}

(item的命名可以随便换)

{{index}} {{ item }}

(需要使用wx:for-index或者wx:for-item修改)
唯一标识

 

Vue 还有很多其他的处理方式,详细查看列表渲染

条件渲染

weex微应用 微信小程序
v-if="admin" wx:if="{{ admin }}"
包装元素:
else if and else:

 

 

 

1 2 3
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微应用 微信小程序
容器组件 p 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

怎么把钉钉小程序转微信小程序?实际操作之后发现,并不是太复杂。nodeJS加vscode全局替换,很快就能改完。

之所以没有全部写成程序来执行,一是因为我对两边的api不是太熟,这个项目也是新接手的,业务逻辑完全不熟,写程序耗费时间太久且不好排查错误;二是通过逐个api的报错修改,可以整理两个小程序差异点,同时尽快熟悉业务代码。
修复原有钉钉小程序的bug,加上转为微信小程序一共花费4个工作日的时间,原来预期是10个工作日,所以这个效率是可以接受的。

1. 修改文件后缀名

钉钉小程序和支付宝小程序几乎没有差别,最主要的是支付宝小程序全局变量 my, 钉钉小程序对应为 dd。而钉钉小程序的文档不如支付宝小程序详细,所以看文档直接看支付宝小程序的就可以了。

现在开始把钉钉转微信啦!

首先第一步是把文件后缀名改了,axml改为wxml,wxss改为acss;

这一步可以用JS脚本执行。 代码地址

2. 修改文件内部引用文件的后缀名

依然是axml改为wxml,wxss改为acss,采取全局替换即可。

3. 修改文件中import路径

钉钉可以引用绝对路径,但是微信在wxml和js中只能引用相对路径,层级需要手动修改下。

4. API修改

钉钉/支付宝小程序与微信小程序的区别

钉钉小程序和支付宝小程序基本上没有区别,把 dd改为my即可。下面我整理了一下钉钉小程序和微信小程序的区别,其实不是太大,遇到问题查一下文档就能解决。

相比之下,钉钉小程序的编辑器非常难用,很容易预览白屏,需要重启编辑器,这一点真的很难接受。

api描述 钉钉小程序 微信小程序
点击事件绑定 onTap bindtap
失去焦点 onBlur bindblur
本地缓存 dd.getStorageSync({key: 'score'}).data wx.getStorageSync('score')
toast提示 dd.showToast({content: '请填写名称'}) wx.showToast({title: '请填写名称',icon:'none'}),如果不设置icon:none,会默认显示成功的图标
时间选择器 dd.datePicker 微信里没有此方法,可以通过picker-view组件实现
模板语法 a: wx:
网络请求header参数 dd.request中为headers wx.request中为header
事件对象 e.target.dataset.recordId 微信会转成小写字母e.target.dataset.recordid
子组件需要调用父组件的某个方法 父组件可以将函数作为属性传递给子组件,子组件通过props接收 目前只能通过父组件事件监听,子组件通过triggerEvent触发父组件自身的方法
图片/文件上传 dd.chooseImage成功回调中,图片的本地临时文件路径列表属性名为filePaths wx.chooseImage成功回调中,图片的本地临时文件路径列表属性名为tempFilePaths
上传文件uploadFile dd.uploadFile 参数对象中,name属性非必传 wx.uploadFile 参数对象中,name属性必传,作为文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容
登录 调用my.getAuthCode获取授权码 wx.login调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。
滚动选择器组件 picker-view 初始加载时能通过value值设置默认选中位置 初始加载时不能通过value值设置默认选中位置,感觉是微信的bug
自定义组件 Component定义属性用props Component定义属性用properties

TAGS:钉钉小程序微信小程序钉钉小程序与微信小程序区别

猜你喜欢

NewHot