最近有微信小程序转 html5 的需求,但是网上找了好久没有纯粹的转换工具。所以后来把目标定位到了 uni-app、taro 这样的工具上来。
今天分享使用 miniprogram-to-uniapp 转换 uni_app 项目的一些经验。(在发稿时开发者已经修复了一些问题)
https://github.com/zhangdaren/miniprogram-to-uniapp
图片资源需要拷贝到 static 目录下(--没有就新建一个,并修改引用路径)
scroll-view 组件属性 scrollY 在转换后为 scrolly。(--应当转换为 scroll-y 才能正确显示)
t.setData 转换有很多问题。1. 转换丢失后边的代码。2. 没有被转换(--最好是定义 methods 对象 setData 方法,省去转换带来的问题。
setData(obj) {
const keys = Object.keys(obj);
keys.forEach((key) => {
this[key] = obj[key];
});
},
转换后 App.vue 方法没有定义到 methods 中(--需要手动创建 methods 对象后拷贝过来)
require 上边的函数被去除掉了(--需要找到复制过来)
无法转换 wxs 元素(--重命名 js 文件导入到页面可以解决)
注意 H5 不支持的一些功能 wx.getFileSystemManager 等(--只能删掉这些功能)
movable-area 组件出现问题
data get、set 处理 (--
computed: {
list: {
get() {
return [].concat(e(o.globalData.source[1]), e(o.globalData.source[2]), e(o.globalData.source[3]), e(o.globalData.source[4]));
},
},
},
组件 collectionModal 标签为 <collectionmodal>(--需要修改为 collection-modal)
无法处理 triggerEvent(--修改为$emit 方式)
在处理复杂的三元表达式时容易丢掉东西(--需要从源程序拷贝回来)
miniprogram-to-uniapp 组件转换时这里 src/wx2uni/jsHandle.js#86 出现 parent 为 null 的问题(--暂时增加判断容错处理,会有很多不能转换的需要手动更改
if (parent) {
parent.replaceWithMultiple(nodeArr);
}
)
因为 key 为 item*this 的问题导致 for 转换失败:
v-for="(item, item*this) in leave" :key="item*this" --- <view class="item" v-for="(item, item*this) in leave" :key="item*this" wx:for-index="idx">
属性名与方法名重复的问题
属性未定义的问题
hover-start-time、hover-stay-time 需要转换为 number 类型
为转换 import 方式 https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/import.html
需要转换字符串拼接为 `` 方式
<view :style="'height: ' + sideSize - 5 + 'px; width:100%;'">
class 丢失、没有被转换 class='{{toolTip.type==="timing" ? "toolTip timing" : "toolTip"}}'(修改为 :class='toolTip.type==="timing" ? "toolTip timing" : "toolTip"')
catchtap 事件无法转换(替换为 v-on:click.stop)
e.currentTarget.dataset 值默认为字符类型的问题(使用 + 转换为 Number)
参考: