uniapp实现微信小程序调用云函数及问题解决
uniapp实现微信小程序调用云函数及问题解决使用工具HBuilder X微信开发者工具实现步骤1.在项目根目录下创建functions文件夹(此为wxcloudfunctions文件夹,可以是任意名字)2.functions文件夹中添加跟函数名同名的文件,这里要实现的是add函数。3.add文件中创建三个文件:config.json、index.js和package.json。目录结构如下文件中
·
uniapp实现微信小程序调用云函数及问题解决
使用工具
- HBuilder X
- 微信开发者工具
实现步骤
1.在项目根目录下创建functions
文件夹(此为wxcloudfunctions文件夹,可以是任意名字)
2.functions
文件夹中添加跟函数名同名的文件,这里要实现的是add
函数。
3.add文件中创建三个文件:config.json
、index.js
和package.json
。
- 目录结构如下
- 文件中的代码如下
config.json:
{
"permissions": {
"openapi": [
"security.msgSecCheck" //接口名
]
}
}
index.js:
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env: '环境ID',
traceUser: true
})
// 云函数入口函数
exports.main = async (event, context) => {
let { userInfo, a, b} = event
let { OPENID, APPID } = cloud.getWXContext() // 这里获取到的 openId 和 appId 是可信的
let sum = a + b
return {
OPENID,
APPID,
sum
}
}
package.json:
{
"name": "check",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"wx-server-sdk": "latest"
}
}
4.在根目录中创建vue.config.js
文件
- 文件中代码如下
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin([
{
from: path.join(__dirname, 'functions'),
to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'functions')
}
])
]
}
}
5.右键项目文件,点击使用 <命令行窗口打开文件所在目录>,使用npm命令安装copy-webpack-plugin
npm install copy-webpack-plugin@5.0.3 -s
注意:这里必须规定版本为比较低级的5.0.3版本,否则会自动安装最新版本反而出错。
6.找到functions文件夹下的add函数文件,右键,点击<命令行窗口打开文件所在目录>,使用npm命令安装wx-server-sdk
npm install
注意:在上传不是云函数前必须先安装 wx-server-sdk,而且每一个云函数文件夹都必须单独安装一次
7.打开manifest.json
下的<源码试图>,在"mp-weixin"
中加上"cloudfunctionRoot": "./functions/"
"cloudfunctionRoot": "./functions/"/*这一行就是标记云函数目录的字段*/
8.将项目运行到微信开发者工具,在微信开发者工具中找到project.config.json
文件夹,并加上"cloudfunctionRoot": "./functions/"
一开始的理解是,实现了第七步这步就可以不用做,但是会报错,所以就都上吧,能运行就行,我个小菜鸡就不强求了。
当看到functions
文件后面有当前环境...
就证明配置没问题了
9.选择你要使用的云函数文件,右键,并选择后 上传并部署(所有文件),稍等片刻就可以了
部署成功后就可以在云开发控制台的云函数列表中看到记录
10.现在就可以在项目需要的地方调用add云函数了,云函数调用例子如下(这里是写在了项目主页面的onReady()函数中)
// 云开发云函数
// wx.cloud.init()
wx.cloud.callFunction({
// 云函数名称
name: 'add',
// 传给云函数的参数
data: {
a: 1,
b: 2,
},
success: function(res) {
console.log(res) // 3
},
fail: console.error
})录的字段*/
运行结果:
呜呜~~感觉小程序好多坑,一样的步骤常常因为因为版本问题或者是API更新问题做不成结果。这时候就得具体问题具体百度,实在觉得自己没错的时候,再理一遍思路,重新来一遍吧,┭┮﹏┭┮
更多推荐
已为社区贡献3条内容
所有评论(0)