小程序移植uni-app经验分享
背景
公司产品期望h5与小程序页面样式和功能保持一致，并能同步发布，而目前已有线上的小程序和h5。
模式
基于以上背景，决定使用跨端框架，维护一套代码，发布小程序和h5两个平台。由于目前线上小程序的功能相对简单，接口和逻辑清晰，h5功能繁多，技术框架不统一，未完全分离等原因，所以考虑将微信小程序先转换为跨端框架语法，再根据需求分布转换成h5，最终希望可以统一成维护一套代码。
技术选型
uni和tara 最终决定使用uni-app更适合我们的产品
点击查看：uni框架简介
工具
开发工具：bhuilderX、微信开发者小程序
小程序转换为uni开源工具：miniprogram-to-uniapp(本次尝试版本1.0.42)
miniprogram-to-uniapp（mac）
因手动转页面太过耗费时间，所以上网搜索发现了作者@zhangdaren开源了小程序到uni-app的转换器，在此表示由衷感谢。
全局安装：sudo npm install miniprogram-to-uniapp -g
查看版本：wtu -V
升级到最新版本：npm update miniprogram-to-uniapp -g
安装指定版本：sudo npm install miniprogram-to-uniapp@1.0.49 -g
转换：wtu -i [项目路径] -o [输出目录] (-o及之后可不写，会在同级目录创建一个文件夹名+_uni结尾的文件夹)
转换成功日志
环境和平台
开发环境和生产环境
跨端兼容
点击查看：跨端兼容
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台
写法：以#ifdef或#ifndef加%PLATFORM%开头，以#endif结尾。
-
ifdef：if defined 仅在某平台存在 -
ifndef：if not defined 除了某平台均存在 -
%PLATFORM%：平台名称（如微信小程序：MP-WEIXIN；h5：H5）
支持的文件
- .vue
- .js
- .css
- pages.json
- 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug
注意：条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用// 注释、css 使用/* 注释 */、vue/nvue 模板里使用<!-- 注释 -->
注意问题
需要手动调试
实时跟进转换器的更新情况，以下部分问题已经在新版转换器中修复了，如果使用的是新版转换器，部分问题不再需要手动调试 点击查看：转换器 README.md
globalData
globalData，这个工具里已经转化过了，在uni-app的app.vue文件中不可以直接使用this.globalData，会报错找不到，而应该使用this.$options.globalData。uni-app已经可以支持。
动态class问题
<view :class="'know-text ' + (!showAllInfo?'info-omit':'')">需要转换为
<view class="know-text" :class="(!showAllInfo?'info-omit':'')">image、input标签
image、input标签会转成<input></input>和<image></image>需要手动转换成<img />和<input />
hidden
hidden会被工具转换成v-if 需要手动将这些更改改回hidden
wxs文件
小程序中运行在视图层，未避免逻辑层和渲染层交互通信折损的wxs文件，在最新版本工具中仍会转换为js文件，但目前uni已经支持，转换器在跟进，等待更新。点击查看：uni对wxs的支持
data
视图层的数据必须在data里面定义过，否则undifined，转换器会帮忙转一部分，还有一部分没有转到，需要手动转化
options.id
在小程序的onready回调中可以通过this.options拿到页面路径参数，但是在转换后的uni项目中，无法取到该参数，需要在onload里setData
onReady: function () {
if (this.options.id) {
getApp().ajax({
url: 'xxxx',
data: {
id: self.options.id
},
success: res => {
...
}
})
}
},仍存在的问题
前后端改造
微信小程序转换为uni-app，再发布微信小程序是没问题的，后续要将这套代码发布为h5甚至更多平台，涉及到服务端改造，尤其h5未完全分离的情况下，工程量还是蛮大的。
服务特殊处理
登陆、支付、推送、定位、地图等联网服务需要单独处理
其他
小程序转换后的uni项目运行在微信小程序开发工具中报错，但没阻断行为
VM1425:1 \[Vue warn\]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.
