微信小程序转uni-app经验分享~近期正在着手我们团队的一个微信小程序转uni-app工作，迁移使用社区工具“mini

由衷的欢迎各位老师/同学批评与指正～｡◕‿◕｡～！！！

前言

近期正在着手我们团队的一个微信小程序转uni-app工作，迁移使用社区工具“miniprogram-to-uniapp”。本文主要是记录这次工作中遇到的一些坑和相关的思考总结。主要包括了如下几个方面：

转uni-app的原因
遇到的问题和坑
总结
参考

迁移原因

团队现阶段以微信小程序为主，h5为辅来扩展业务，小程序是当下业务的主要抓手。uni-app框架优势在于多端复用，该特点与我们目前的业务现状和团队现状也相对较契合，之后业务方也可能存在其他小程序相关的诉求，我们尝试转uni-app的主要原因如下：

提升开发效率、多端复用。

前端团队大量的人员招聘（流动），对微信小程序的熟练度整体偏低，uni-app 是一个使用 Vue.js开发跨端应用的框架，团队人员使用vue的开发效率更高。同时uni-app可以避免针对h5 和微信小程序做多次开发的现状，满足之后可能出现的支付宝、头条小程序的业务述求。
迁移成本小、风险可控。

迁移的“小程序”体量不是非常大，迁移成本可控。uni-app社区和公司都有相关的迁移方案和相关的填坑的经验，并且公司内部有完整的uni-app打包发版平台，接入成本很小。同时当下有较为足够的时间来完成迁移和后续整体的测试。
符合公司的技术倾向和老板的意愿。

公司推荐使用uni-app完成小程序开发，且已有相关迁移经验的积累和uni-app开发沉淀。同时也能方便的使用公司已有的uni-app组件。老板哥哥也仿佛觉得uni-app很**"美好"**。
试错！！本次uni-app 迁移完成之后，后续相关需求会在此基础上进行！说到底我们团队对uni-app的了解不足，它给我们能带来多大的收益，带来的问题有哪些，我们也不是太清楚！如果本次切换之后，基于uni-app的开发带来的收益符合团队的预期，后续也会考量是否做相关项目的迁移。

遇到的问题和坑

以下问题都是基于使用miniprogram-to-uniapp迁移为前提下出现的！

DOM 模板 template 中的函数名和methods 中的函数名不一致，DOM 模板中_xxxx 形式函数转化为 xxxFn,导致找不到对应的handler；
```
methods: {
 _showChange(show) {}, // 转化为了 showChangeFn 导致找不到函数 
}
```

获取data的方式错误，为 this.data.XX格式。设置值的方式错误，为this.setData({XXX})，可重写setData。

setData:function(obj){  
    let that = this;  
    let keys = [];  
    let val,data;  
    Object.keys(obj).forEach(function(key){  
         keys = key.split('.');  
         val = obj[key];  
         data = that.$data;  
         keys.forEach(function(key2,index){  
             if(index+1 == keys.length){  
                 that.$set(data,key2,val);  
             }else{  
                 if(!data[key2]){  
                    that.$set(data,key2,{});  
                 }  
             }  
             data = data[key2];  
         })  
    });  
}

components 中的 data 和 props 属性名相同，导致报错；

DOM 模板 template 中的标签属性没转换，格式如下；

<view class="img" style="background-image:url({bookInfo.coverImgUrl})">

:class 和 :style 转换错误;

打包构建报错Error: No matching use for foo.js;

参考内部wiki，原因可能是uni-app官方的包太新了，使用旧版本的包即可，推荐版本号如下：

"@dcloudio/uni-app-plus": "2.0.0-26520200314001",
"@dcloudio/uni-h5": "2.0.0-26520200314001",
"@dcloudio/uni-helper-json": "*",
"@dcloudio/uni-mp-alipay": "2.0.0-26520200314001",
"@dcloudio/uni-mp-baidu": "2.0.0-26520200314001",
"@dcloudio/uni-mp-qq": "2.0.0-26520200314001",
"@dcloudio/uni-mp-toutiao": "2.0.0-26520200314001",
"@dcloudio/uni-mp-weixin": "2.0.0-26520200314001",
"@dcloudio/uni-stat": "2.0.0-26520200314001",
"@dcloudio/uni-cli-shared": "2.0.0-26520200314001",
"@dcloudio/uni-migration": "2.0.0-26520200314001",
"@dcloudio/uni-template-compiler": "2.0.0-26520200314001",
"@dcloudio/vue-cli-plugin-hbuilderx": "2.0.0-26520200314001",
"@dcloudio/vue-cli-plugin-uni": "2.0.0-26520200314001",
"@dcloudio/vue-cli-plugin-uni-optimize": "2.0.0-26520200314001",
"@dcloudio/webpack-uni-mp-loader": "2.0.0-26520200314001",
"@dcloudio/webpack-uni-pages-loader": "2.0.0-26520200314001",
"@types/html5plus": "*",
"@types/uni-app": "*",

"sass-loader": "^8.0.2",

注意最后的sass-loader需要使用8.0.2版本，否则可能会有其他报错。

components 中的属性获取方式未转换（大量的this.properties ）

DOM模板中的事件绑定方式未转换;

catchtouchmove="handler" // `@touchmove.stop="handler"

data 解构 未转换;

const {...} = this.data;  // const { ... } = this;
this.setData(...) // 内部实现无需转化

小程序behavior 转换成mixin后，没有转换策成所需格式;
uni-app 在 data中使用 _classId（_xxx形式）的data属性后不能获取到 _classId的值；
小程序中的observers 转换成 watch 后需要加上 immediate: true；
wxs 响应事件;

微信小程序中wxs响应事件，具体参考官方：WXS响应事件
- change:prop="{{wxs_module.fn}} 转换为:change:prop="{{wxs_module.fn}}
- bind:eventname="{{wxs_module.fn}} 转换为 :bind:eventname="{{wxs_module.fn}}
- catch:eventname="{{wxs_module.fn}} 转换为 :catch:eventname="{{wxs_module.fn}}
其他
- scroll-view的锚点（:scroll-into-view="xxxx"）对应值的xxxx 需要在滚动的时候清空锚点，不清空在第一次定位锚点之后都会失效；
- 微信开发者工具生成的骨架屏引入错误;
  - 骨架.wxml 中转vue文件的时候需要去掉is="components/user-info/index"。
  - 转vue 后引入方式错误。改为组件的方式引入
总结

整体的迁移过程还算平滑，遇到问题在时间成本可控的范围内也能解决，其次uni-app 上手很快，对微信小程序也比较友好，很多东西相对小程序而言就是换一种写法，当然也存在也别多的坑（如上）。同时uni-app的缺点也很多，文档松散，官方“装聋作哑”，社区很多开发者遇到的很多问题没有官方回复或者说得到解决，和一些成熟的开源技术社区相比个人认为还有很大的不足。当前对uni-app的整体认识还不算深入，很多认识局限于社区和技术论坛。

参考

微信小程序转uni-app经验分享~

由衷的欢迎各位老师/同学批评与指正～ ｡◕‿◕｡～ ！！！

前言

迁移原因

遇到的问题和坑

总结

参考

由衷的欢迎各位老师/同学批评与指正～｡◕‿◕｡～！！！