本篇文章写于2024年7月,本人花费1天时间将微信小程序从微信自己的云开发迁移到了Unicloud,中间踩了无数的坑,这里来写一下过程中的注意事项。
迁移流程
第一步 安装node.js
这一步我就不赘述了,直接打开node.js官网下载安装。
第二步 安装迁移工具miniprogram-to-uniapp
npm install miniprogram-to-uniapp -g
第三步 转换小程序
由于PowerShell默认禁止执行脚本,需要先使用
set-ExecutionPolicy RemoteSigned
来允许执行脚本,之后使用
wtu -i 你的小程序代码路径
来进行转换,他会在相同目录下新建一个_uni后缀的目录,将该目录导入进HBuilderX就可以了
第四步 打开小程序
在manifest.json文件中,第一行是uni-app应用表示,点击右侧重新获取并登录。
之后右键点击uniCloud目录并点“关联云服务空间或项目”
m2u默认建立的是aliyun的云空间,关联其他云空间可能会报错,可以手动点击根目录,右键创建云开发环境,并将云函数全部复制到新环境里。
第五步 手动修改
即使当前版本的m2u已经比很多教程所使用的老版本好用了很多,仍然有很多需要手动修改的地方。
a. 云函数的修改
需要注意的是迁移到dcloud以后,后台没法自动获取openid了,我为了业务逻辑变更最少使用的是前台获取openid然后传给后端的方法。如果为了安全的话推荐使用uni-id体系,但我尚未学习uni-id如何使用。
获取openid的方法请参考以下这篇文章
uniCloud云开发获取小程序用户openid_unicloud 获取openid-CSDN博客
需要注意的是,所有云数据库的add和update等操作,unicloud与微信云开发相比都少嵌套了一层data,如原来的
db.collection('test').add({
data:{
test: 123
}
})
//微信云开发
都需要修改成
db.collection('test').add({
test: 123
})
//unicloud
b. 自定义tabbar的修改
在uniapp中,this是没有getTabBar方法的,需要改成getCurrentPages()[0].getTabBar,如
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 2
});
}
//微信
需要修改成
if (typeof getCurrentPages()[0].getTabBar === 'function' && getCurrentPages()[0].getTabBar()) {
getCurrentPages()[0].getTabBar().setData({
selected: 2
});
}
//uniapp
迁移到uniapp后,custom-tab-bar是在每个页面加载以后attach的,导致第一次打开页面的时候设置selected不起作用,我的解决方案是在custom-tab-bar的attached方法中设置selected
//userType是我定义的用户类型
//tabList是我定义的对于每个类型的用户显示的tabbar
for (let i in this.tabList[userType]) {
if (this.tabList[userType][i].pagePath == getCurrentPages()[0].$page.fullPath) {
this.setData({
selected: parseInt(i)
})
}
}
c. 自动生成app.json
使用unicloud自动生成的app.json会部分使用pages.json里的值,但是有些值会被忽略,导致迁移后程序样式不一致。我在反复调研后通过在vue.config.js文件里新增自定义插件解决了这个问题。
注意:如果vue.config.js不存在需要在根目录自己新建
我的文件内容参考如下
//vue.config.js
const path = require('path')
const fs = require('fs')
class ModifyWXAppPlugin {
apply(compiler) {
compiler.hooks.done.tap('ModifyWXAppPlugin', compilation => {
if (process.env.UNI_PLATFORM != "mp-weixin") {
return;
}
console.log("正在修改app.json")
const appjson_path = path.join(__dirname, 'unpackage', 'dist', process.env
.NODE_ENV ===
'production' ?
'build' : 'dev', process.env.UNI_PLATFORM, 'app.json')
let appjson = fs.readFileSync(appjson_path, {
encoding: 'utf-8'
})
let app = JSON.parse(appjson)
app.sitemapLocation = "sitemap.json"
app.style = "v2"
app.lazyCodeLoading = "requiredComponents"
app.useExtendedLib = {
weui: true
}
appjson = JSON.stringify(app, null, 2)
fs.writeFileSync(appjson_path, appjson, {
"flag": "w"
})
})
}
}
module.exports = {
configureWebpack: {
plugins: [new ModifyWXAppPlugin({
options: true
})],
}
}
d. 图片地址的修改
uniapp会把图片放到static目录里去,m2u会自动转换但是匹配过程可能会错过一些比如使用了变量拼接的值,请手动确认所有图片地址都修改了
e. manifest.json设置项
在微信小程序设置里,注意打开上传代码时自动压缩,并关闭位置接口(如果你没用的话)
f. 编辑DB Schema
如果你在后端建好了表的话,先右键uniCloud文件夹下的database点击下载DB Schema然后编辑,编写规则请参考
DB Schema概述 | uniCloud (dcloud.net.cn)
g. 修改本地访问数据库代码
先把wx.cloud替换成uniCloud,然后uniCloud的get方法不支持success参数,请使用then方法
修改前
//微信
wx.cloud.database.collection('test').get({
success: res => {
console.log(res)
}
})
修改后
//unicloud
uniCloud.database.collection('test').get().then(res => {
console.log(res)
})
小程序注意事项
1. 禁止爬虫
如果你在页面的onLoad函数里调用了云函数的话,微信的爬虫会调用相当多次数,可以通过编辑sitemap.json禁用,文件内容如下
//sitemap.json
{
"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "disallow",
"page": "*"
}]
}
需要注意的是,uniapp默认生成的app.json里是没有sitemap的,请参考上文进行修改。
2. 添加request合法请求
打开小程序后台,在开发管理-服务器域名中进行修改,请参考
uniCloud发行 | uniCloud (dcloud.net.cn)