uniapp 结合 微信云开发 如何结合使用

用的是vue2

步骤一： 注册账号

不能是测试账号，测试账号是不能选择云开发的

步骤二： uniapp上创建项目    test-project

步骤三：前期的配置

1. 填写微信小程序APPID

2. 源码视图中，说明后面会放所有加上云函数文件的目录名称

在"mp-weixin"中加上这行代码

"cloudfunctionRoot": "cloudfunctions/"

3. 在项目中创建目录  cloudfunctions

注意：必须跟第二步的名字一致哦

 小小注意：cloudfunctions目录里面不能为空，不然不会被复制成功

4.  安装 copy-webpack-plugin，复制文件

说明：在uniapp上点击运行微信小程序，会发现微信小程序中根本没有cloudfunctions目录，所以我们需要接住复制文件的包，把cloudfunctions目录所有文件复制在dist文件中

先初始化，在安装   安装命令  node16

npm install copy-webpack-plugin@5.1.1  --dev

 新建js文件   vue.config.js   固定的，复制固定代码

 复制代码到vue.config.js 中

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

module.exports = {
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                {
                    from: path.join(__dirname, 'cloudfunctions'),
                    to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'development' ? 'dev' : 'build', process.env.UNI_PLATFORM, 'cloudfunctions')
                }
            ])
        ]
    }
}

 步骤四 运行到微信小程序

这时，我们会发现出现一个 unpackage打包后的文件，我们从这里就可以检查cloudfunctions目录是否有被复制进去，微信开发者工具中也有这个文件了。

 

 

步骤五 点击云开发 开通自己的云开发环境，选择运行环境

步骤六 点击新建node.js云函数abc

里面有3个文件，在uniapp中去创建一模一样的目录和文件 

 步骤七 在App.js文件中初始连接一下云开发环境

wx.cloud.init({
	env: '这里填你开通的云开发ID',
	traceUser: true,
})

 在云开发中查看复制

步骤八  找个页面，执行云函数

wx.cloud.callFunction({ name:'abc'}).then(res=>{
	console.log('res',res)
})

 发现结果被打印在控制台了，至此我们就可以开始自己做自己想要的功能了。