小程序移植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.

小程序移植uni-app经验分享