微前端架构如何改变企业的开发模式与效率提升
1074
2022-10-10
wwto是一款支持将原生微信小程序转换成其他小程序的工具集合
wwto: wuba wechat mini-program to other mini-program
简介
wwto是一款支持将原生微信小程序转换成其他小程序的工具集合。 使用wwto,几乎不需要对已有的微信小程序做任何改动,可以接近零成本获得百度小程序、支付宝小程序、头条小程序。
前提
node >= 8.9.3gulp >= 4.0.0
安装
npm i wwto -g #or yarn global add wwto
使用
**注意:**如果包含插件,请将插件的源码拷贝到:src/plugins/xxx目录下,xxx为被调用插件名称。
命令行
# 查看帮助 wwto --help # 查看转换命令使用说明 wwto build --help # 查看源码兼容性检测使用说明 wwto lint --help # 查看版本号 wwto -v # 转换成百度小程序 wwto build -p baidu -s src -t dist/baidu # 检测源码对百度小程序的兼容性 wwto lint -p baidu -s src # 转换成支付宝小程序 wwto build -p alibaba -s src -t dist/alibaba # 检测源码对支付宝小程序的兼容性 wwto lint -p alibaba -s src # 转换成头条小程序 wwto build -p toutiao -s src -t dist/toutiao # 检测源码对头条小程序的兼容性 wwto lint -p toutiao -s src # 转换成百度&&支付宝&&头条小程序 wwto build -s src -t dist # 检测源码对百度&&支付宝&&头条小程序的兼容性 wwto lint -s src # 转换插件调用方式 wwto plugin -s dist/baidu
启动项目
npm install # 安装依赖 npm run build # 构建项目 npm run dev # 运行项目 jest --coverage # 检测单元测试覆盖率
打包工具
const gulp = require('gulp');const wwto = require('wwto');// 转换成百度/支付宝/头条小程序gulp.task('build', function(cb) { wwto.toAll({ source: './src', baiduTarget: './dist/baidu', alibabaTarget: './dist/alibaba', toutiaoTarget: './dist/toutiao', });});// 检测源码对各平台的兼容性gulp.task('lint', function(cb) { wwto.lintAll({ source: './src' });});
注意事项
注意事项是各平台不支持且无法通过本工具转换完成的一些点,如果要开发跨平台的应用需要规避或者降级处理。
百度小程序
bind*={{str}} str只能是函数名(字符串),不能包含表达式计算(如:bindtap="flag ? 'fn1' : 'fn2'")wx:for={{arr}} arr只能是变量名(字符串),不能包含表达式计算(如:wx:for="{{flag ? arr1 : arr2}}")在同一个标签上,wx:for和wx:if不能同时使用wxml不支持hidden通过properties绑定的数据,在子组件更新后不会同步到父组件(重要)图片的src属性不能用数组赋值(如:)不要使用setData保存视图不需要的变量(如原生变量:Animation),继承字段会被丢弃
头条小程序
不支持组件(如:movable-area、movable-view、cover-view、cover-image、map、audio、canmera等)websocket不能使用全局事件(如:wx.onSocketOpen)录音功能没有全局方法(wx.startRecord, wx.stopRecord)不支持背景音频不支持实时音视频通话条件/循环渲染,不能进行函数调用运算(如:wx:if="{{['aa', 'bb'].indexOf('aa')===-1}}")图片的src属性不能用数组赋值(如:)wx:for不支持对象,从源码规避(转换一下)不支持selectComponent,可以通过监听属性的observer来实现外部的调用自定义组件不能响应事件(如:bindTap),需要添加一层容器来捕获事件
支付宝小程序
json文件或模板绝对路径必须以/开头,相对路径必须以./开头自定义组件命名只能使用短横线(custom-com)fetch是全局只读对象,不能对其赋值require,参数只能是字符串直接量,不能是变量(如:var path = '/a/b/c'; require(path);)triggerEvent(name, data),name目前只支持字符串直接量,不支持变量swiper组件手动设置current后,不会自动触发bindChange事件,如果需要主动触发只能存在一个websocket连接组件样式不是隔离的,父子组件之间class不要重复自定义组件不能响应事件(如:bindTap),需要添加一层容器来捕获事件唤起键盘不会上推position:fixed的元素文件名不能包含'@'字符
贡献
欢迎参与 wwto 项目的开发建设和讨论。
提交 pull request 之前请先提 [Issue 讨论].
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~