uniapp上直接进行微信小程序云开发笔记

uniapp上直接进行微信小程序云开发笔记

开发框架是用的uniapp，云开发用的还是微信的云开发，没有使用自带的uniCloud;

本文主讲在uniapp上需要修改的基本配置。

0.创建云函数目录

在项目根目录,自定义创建用于存放云函数的文件夹。笔者为：cloudfunctions

1.设置微信小程序配置

项目根目录找到 manifest.json文件,修改mp-weixin字段,指定本地已存在的目录作为云开发的本地根目录：

// 添加云函数文件夹地址
"mp-weixin" : {
  "cloudfunctionRoot":"cloudfunctions/"
},

更多说明查看微信文档:

编辑器中操作云开发云函数 & 云托管 | 微信开放文档 (qq.com)

2.修改vue.config.js本地环境配置

在默认框架环境下，该文件需要手动创建,同时需要手动安装同步文件的插件copy-webpack-plugin；

由于非特定目录，其他根目录必须手动复制同步；

# 根据管兼容提醒，安装5.0.0 版本
npm install [email protected]

设置同步脚本

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin') //最新版本copy-webpack-plugin插件暂不兼容，推荐v5.0.0

module.exports = {
    configureWebpack: {
        plugins: [
			new CopyWebpackPlugin([
			  {
			    from: path.join(__dirname, '{{自定义的目录}}'),
			    to: path.join(__dirname, 'unpackage', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'cloudfunctions'),
			  },
			]),
        ]
    }
}

到这里完成后，uniapp编辑器会自动同步云函数文件。

更多具体配置说明:

vue.config.js - uni-app官网 (dcloud.net.cn)

3.微信云函数基础流程

3.1创建一个自定义云函数名称，作为目录,如下：

| -> hello // 云函数名称
| | -> config.json
| | -> index.js
| | -> pakage.json

一个基本的云函数包含3个文件:

config.json:用于声明云函数需要的配置信息，如权限

index.js:云函数的主文件，基本逻辑入口

pakage.json:云函数环境配置文件,依赖说明

3.2编写函数脚本:

获取小程序的检验信息接口权限

{
	"permissions": {
		"openapi": [
		  "security.msgSecCheck"
		]
	}
}

检验文本信息脚本:

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
});

exports.main = async (event, context) => {
	//event为客户端上传的参数
	// console.log('event : ', event)
	const r = await cloud.openapi.security.msgSecCheck({
		content:event.msg
	})
	
	//返回数据给客户端
	return r
};

环境配置,(npm 模式):

{
  "name": "hello", // 对应云函数名称
  "version": "1.0.0",
  "description": "",
  "main": "index.js", // 主入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "wx-server-sdk": "~2.4.0" // 依赖环境
  }
}

3.3 创建/上传云函数

下面操作，需要在小程序开发工具，编辑器内完成。

1. 如果云函数未创建
   1. 右键函数文件夹，上传文件并部署。
   2. 提示上传文件成功后，再右键云端安装依赖，提示权限已更新即可。
2. 如果已有云函数
   1. 没有修改权限与环境，直接更新文件即可
   2. 有修改权限，需要重新安装依赖

3.4 小程序客户端调用

export default {
  onReady() {
    wx.cloud.init(); // 必须要的初始化一次
  },
  methods(){
		test(){
      	// 执行云函数
      	wx.cloud.callFunction({
				  // 云函数名称
				  name: 'hello',
				  // 传给云函数的参数
				  data: {
				    msg: self.nickname,
				  },
				  success: function(res) {
						// res.result
				  }
				});
    }
  }
}