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

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