微信小程序转uni-app

module.exports.author = "TTtai"

Uni-App

uni-app（uniapp.dcloud.io）是Dcloud开发的基于 Vue.js 开发跨平台应用的前端框架，编写一套代码，就可编译到iOS、Android、H5、小程序等多个平台。

uni-app在跨端数量、兼容性、学习成本、扩展能力、开发社区、开发成本等方面拥有极强的竞争优势。

Miniprogram-to-uniapp

本文介绍的是基于miniprogram-to-uniapp，将微信小程序转为uni-app的操作过程。

https://github.com/zhangdaren/miniprogram-to-uniapp

步骤

安装miniprogram-to-uniapp

$ npm install miniprogram-to-uniapp -g

转换

$ wtu -i "项目路径"

例如

$ wtu -i "E:\bigeggProject\1911_SC.wechat

转换成功后会在 E:\bigeggProject\1911_SC.wechat同级目录生成

E:\bigeggProject\1911_SC.wechat_uni

迁移cloudfunctions

有云开发的小程序项目转换为uni-app项目cloudfunctions目录将被忽略，因此需手动配置

3.1. 拷贝cloudfunctions

手动将cloudfunctions拷贝到uni-app项目中

3.2. 配置manifest.json

{
"mp-weixin":{
// ...
"cloudfunctionRoot": "cloudfunctions/", // 配置云开发目录
// ...
  }
}

3.3. 配置vue.config.js

3.3.1. 初始化npm

npm init

3.3.2. 安装copy-webpack-plugin

npm install copy-webpack-plugin -D

3.3.3. 新建vue.config.js

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    configureWebpack: {
        plugins: [
//  构建时将cloudfunctions文件内容拷贝到生成文件内
new CopyWebpackPlugin([
                {
from: path.join(__dirname, 'cloudfunctions'),
                    to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'cloudfunctions')
                }
            ])
        ]
    }
}

FAQ 存在问题&解决方案

Q: 知晓云如何兼容h5

A:云开发部分采用微信插件方式引入，导致因此目前h5部分无法正常运行，考虑使用条件编译h5端引入知晓云sdk

Q: 图片路径错误

A: 因迁移到uni-app项目后图片资源文件路径会移动到`/static`路径下因此会导致

本地图片字符串路径转换错误（如data数据中配置的字符串图片路径），需手动debug排除

Q: 调用子组件方式存在差异

A:调用子组件方式在微信小程序及uni-app内存在以下差异，转换工具无法完成转换，需手动调整

微信小程序内：

// .wxml
 <share v-if="comment" :comment="comment" id="share"></share>
// .js
let share = this.selectComponent('#share');
 share.saveImage()

uni-app内：

// template
 <share v-if="comment" :comment="comment" ref="share"></share>
// script
let share = this.$refs.share;
 share.saveImage()

Q:methods内 _前缀方法名被改变

A: 目前发现微信小程序组件methods内方法名前缀为下划线_命名时，在经过miniprogram-to-uniapp转换后方法名中的_会被去除，并且方法名末尾会添加Fnn `_funcName`变更为`funcNameFun`

值得注意的是虽然组件内部调用方法名会同步被修改，但是如果在父组件调用子组件方法名时依旧是原始`_funcName`，实际运行时会报错，需手动调整为`funcNameFun`，例如

<!-- -----------转换前------------ -->
// share组件
Component({
  ready() {
    this._saveImage()
  },
  methods: {
    async _saveImage(sence) {
        // somethings
    }
  }
})
// 父组件
 share._saveImage()
<!-- -----------转换后------------ -->
// share组件
export default {
  mounted(){
    this.saveImageFun()
  },
  methods: {
    async saveImageFun(sence) {
        // somethings
    }
  }
}
// 父组件
 share._saveImage()
// 应修改为
 share.saveImageFun()

Q: 父子组件传值

A: 在微信小程序中父组件接受子组件传值时值会在`e.detail`中取到，但在uni-app中为vue的父子组件传值方式,

转换之后接受时代码依旧存在`e.detail`需手动去除`detail`或使用解构方式

微信小程序内

// 子组件
this.triggerEvent('changeTab', {currentTab: this.data.currentTab})
// 父组件
handler(e){
this.setData({
      currentTab: e.detail.currentTab
    })
}

uni-app内

// 子组件
this.$emit('changeTab', {currentTab: this.data.currentTab})
// 父组件
// 转换后
handler(e){
this.setData({
      currentTab: e.detail.currentTab // 实际运行时无detail会报错
    })
}
// 应修改为
handler({currentTab}){
this.setData({
      currentTab: currentTab
    })
}

关注大蛋科技雷达，获得更多有意思的AI项目。

大蛋科技是一家提供技术咨询、设计、开发服务的初创企业。