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更新问题做不成结果。这时候就得具体问题具体百度，实在觉得自己没错的时候，再理一遍思路，重新来一遍吧，┭┮﹏┭┮