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

前言

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

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

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

工具

1. Hbuilder X
2. 微信开发者工具

方法

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

1. 开通云开发、创建环境
2. 设置云函数路径
3. 初始化云环境

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

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

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

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

此步骤只能在微信开发者工具中操作，都一样：

具体创建方法参考官文档

二、设置云函数路径

微信小程序

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

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

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

uni-app

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

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

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

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

三、初始化云环境

微信小程序

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

 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 中的 onlunch 中初始化

<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>

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

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

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

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

需要先安装 copy-webpack-plugin

npm install -save copy-webpack-plugin

2020/05/27更正：copy-webpack-plugin 6.1.1版本的官方配置方法有改动，导致上面的配置会在最新的依赖下会报错！请按官方文档重新配置（反正我没配置成功。。），或是就用5.1.1版本的依赖
npm install -save copy-webpack-plugin@5.1.1

这段配置大概意思就是将 /cloudfunctions 文件夹，复制到 /unpackage/dist/build 路径下 (如果是测试环境则复制到 /unpackage/dist/dev )，命名为 cloudfunctions。

再次运行项目，打包路径下 /cloudfunctions 有了！

将打包好的项目导入微信开发者工具中查看，云文件夹有了而且有云符号和环境ID，表明配置成功：

这下就可以在HBulider中编写小程序云函数了！

总结

也有很多人采用在微信开发者工具中写云函数，HBulider中写uni-app这种两个IDE同时编辑的方式，这也是个简单高效的思路。

此文到建好云文件夹就结束了，后续新建上传云函数请参下面的文章：
uni-app中彻底打通微信小程序云函数