工具X微信开发者工具创建小程序云开发需要做三件事-欢乐点，智慧门店服务商

工具X微信开发者工具创建小程序云开发需要做三件事

2023-08-12 21:00:31 欢乐点

uni-app实现微信小程序云开发

序言

通过微信开发者工具创建小程序选择云模板可以快速生成云环境，开始云开发。

假如早已有一个普通微信小程序了，要使用云开发则须要做些配置来引入云。

此文是基于做配置的思路，通过配置引入小程序云，并在中的uni-app项目中写小程序云函数的代码，保证整个uni-app代码的整体性。

工具X微信开发者工具方式

在一个普通小程序中引入云开发须要做三件事：

1.开通云开发、创建环境

2.设置云函数路径

3.初始化云环境

在uni-app项目引入小程序云的步骤同样是这三步。

此文虽是关于中的uni-app项目实现小程序云开发微信商城和小程序，下边还是会先讲普通小程序项目在微信开发者工具中配置云开发，以做对比，便捷理解。

另外，虽然是在中编撰uni-app，但最后仍然要将打包之后的代码放进微信开发者工具中调试或上传，两个IDE间的切换请不要弄糊涂。建议先熟悉打包小程序的官方教程

一、开通云开发、创建环境

此步骤只能在微信开发者工具中操作微信商城和小程序，都一样：

二、设置云函数路径微信小程序

微信开发者工具中，在项目根目录的..json中配置小程序云函数路径：

{
	"miniprogramRoot": "miniprogram/",
	// 这里加云函数路径
	"cloudfunctionRoot": "cloudfunctions/", 
	...
}

微信商城和小程序_商城微信程序小程序在哪_微信小程序商城是什么意思

配置完成即可手动生成云函数目录/

uni-app

而uni-app项目则在根目录的.json中配置：

    "mp-weixin" : {
        "appid" : "XXX",
        "setting" : {
            "urlCheck" : true,
            "es6" : true,
            "postcss" : true,
            "minified" : true
        },
		//这里加云函数路径
		"cloudfunctionRoot": "cloudfunctions/",
        "permission" : {}
    }

并不会像微信开发者工具一样跟据配置手动生成云函数目录，这儿须要自动新建一个/目录，、

这儿还有个坑就是/不能为空，否则会影响赶忙的拷贝，我先随意加个123.js。

三、初始化云环境微信小程序

在app.js的生命周期中初始化云开发:

 onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）    
        //env: '你的环境ID',
        env: 'XXXX',
        traceUser: true,
      })
    }
  }

这儿说下env（云环境）：

在第一步创建云环境中我们已创建好一个云环境，云环境ID可以在云开发控制台查看

一个小程序项目可以创建多个云环境。一般我们会创建两个环境分别用于开发和生产，就是在初始化时决定调用那个云环境

uni-app

1、在App.js中的中初始化

<script>
export default {
	onLaunch: function() {
		wx.cloud.init({
		// env 参数说明：
		//   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
		//   此处请填入环境 ID, 环境 ID 可打开云控制台查看
		//   如不填则使用默认环境（第一个创建的环境）    
		//env: '你的环境ID',
		env: 'xxxxxx',
		traceUser: true,
		})
	},
	onShow: function() {
	},
	onHide: function() {
	}
};
</script>

配置好后我们在选择微信小程序运行uni-app，运行后会在//dist/dev中生成微信小程序代码。

微信商城和小程序_商城微信程序小程序在哪_微信小程序商城是什么意思

但发觉/文件夹并未打包进去

这是由于新建的/并不属于uni-app默认的目录结构，默认不会被打包。这儿的解决思路是：通过包管理工具的复制插件将

/复制到项目包中。

首先在项目根目录创建vue..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')
                }
            ])
        ]
    }
}