uniapp实现微信小程序调用云函数及问题解决
uniapp实现微信小程序调用云函数及问题解决

uniapp实现微信小程序调用云函数及问题解决

实现步骤
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
            })

https://blog.csdn.net/BenChiZhuBaDaoWang/article/details/124893225

发表回复

您的电子邮箱地址不会被公开。