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

末蓝、 2023-03-13 02:09 131阅读 0赞

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

*  前言
 *  工具
 *  方法
 *   *  一、开通云开发、创建环境
     *  二、设置云函数路径
     *   *   *   *  微信小程序
                 *  uni-app
     *  三、初始化云环境
     *   *   *   *  微信小程序
                 *  uni-app
 *  总结

# 前言 #

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

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

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

# 工具 #

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

# 方法 #

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

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

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

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

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

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

此步骤只能在微信开发者工具中操作，都一样：  
![在这里插入图片描述][20200509153545200.png]  
[具体创建方法参考官文档][Link 2]

## 二、设置云函数路径 ##

##### 微信小程序 #####

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

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

配置完成即可自动生成云函数目录 ***/cloudfunctions***  
![在这里插入图片描述][20200708140714707.png]

##### 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。  
![在这里插入图片描述][20200509173043965.png]

## 三、初始化云环境 ##

##### 微信小程序 #####

在 **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可以在云开发控制台查看  
![在这里插入图片描述][20200509162046502.png]  
一个小程序项目可以创建多个云环境。通常我们会创建两个环境分别用于开发和生产，就是在初始化时决定调用哪个云环境

##### uni-app #####

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

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

**但发现 /cloudfunctions 文件夹并未打包进去**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70]

> 这是因为新建的 ***/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*** 有了！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70 1]  
将打包好的项目导入微信开发者工具中查看，云文件夹有了而且有云符号和环境ID，表明配置成功：  
![在这里插入图片描述][20200509181354393.png]  
这下就可以在HBulider中编写小程序云函数了！

# 总结 #

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

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

[Link 1]: https://uniapp.dcloud.io/quickstart?id=%E5%8F%91%E5%B8%83%E4%B8%BA%E5%B0%8F%E7%A8%8B%E5%BA%8F
[20200509153545200.png]: /images/20230312/318dc0222bef41db8db94cc468b3fcea.png
[Link 2]: https://developers.weixin.qq.com/minigame/dev/wxcloud/basis/quickstart.html#_2-%E5%BC%80%E9%80%9A%E4%BA%91%E5%BC%80%E5%8F%91%E3%80%81%E5%88%9B%E5%BB%BA%E7%8E%AF%E5%A2%83
[20200708140714707.png]: /images/20230312/de8dcf8bd4a44ff88ec6a4663bdd981a.png
[20200509173043965.png]: /images/20230312/96744955521245e88265f5ce2e5a5088.png
[20200509162046502.png]: /images/20230312/07a269388f7a4cdc8bc6f806fce06ec3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70]: /images/20230312/9c53c2ad91394862aa19f61a31b329c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70 1]: /images/20230312/fa7d1c31714447039540633f0a70dbfa.png
[20200509181354393.png]: /images/20230312/e648860edab445bd8c9561e80bbb582a.png
[uni-app]: https://blog.csdn.net/YNEWA/article/details/106048446