微信小程序从云开发迁移至Unicloud注意事项

最新推荐文章于 2025-01-20 11:47:11 发布

CatLemon

最新推荐文章于 2025-01-20 11:47:11 发布

阅读量1.4k

点赞数 26

文章标签：微信小程序小程序 uniapp

本文链接：https://blog.csdn.net/CatLemon/article/details/140463603

版权

本篇文章写于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的，请参考上文进行修改。