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

更新于 1月16日  约 7 分钟

小程序移植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结尾的文件夹)

转换成功日志
86E6E5D4-4023-45B3-9DA2-1A5728365E44.png

9A0269C4-F172-4081-A487-99A01F2B93E2.png

456CE3BA-5C8E-4DCE-97E1-A8CC17C9A1F2.png

环境和平台

点击查看:运行环境判断

开发环境和生产环境
跨端兼容

点击查看:跨端兼容
条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台

写法:以#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的支持
20200116154410.jpg

data

视图层的数据必须在data里面定义过,否则undifined,转换器会帮忙转一部分,还有一部分没有转到,需要手动转化

options.id

在小程序的onready回调中可以通过this.options拿到页面路径参数,但是在转换后的uni项目中,无法取到该参数,需要在onloadsetData

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.
阅读 753更新于 1月16日

推荐阅读

懂的不多。

0 人关注
5 篇文章
专栏主页
目录