本站使用了 Pjax 等基于 JavaScript 的开发技术,但您的浏览器已禁用 JavaScript,请开启 JavaScript 以保证网站正常显示!

uni-app对微信小程序云函数的适配

引言

熟悉uni-app的人应该都知道,uni-app并未对微信小程序云函数(本文统称云函数)进行相应的适配。但是,如果我们在某些业务场景的下需要使用云函数呢?我们知道,云函数可以复制到微信开发者工具,这样的话我们不得不每次编译一次就手动复制一次,不得不说麻烦至极。本文就问题做出以下解决方案。

本文环境

  1. Hbuilder X

Hbuilder X版本

  1. 微信开发者工具

微信开发者工具版本

创建云函数目录

首先,我们需要在uni-app项目文件夹下,创建一个云函数目录,路径随意,我这里是functions。然后先随便在里面放一些文件,这里以new_file.css为例。

修改manifest.json

在uni-app根目录下,修改manifest.json中的微信小程序项,结构如下

"mp-weixin" : {
        /* 小程序特有相关 */
        "appid" : "wxd7de467f6e6cf741",
        "cloudfunctionRoot": "./functions/", // 这一行就是标记云函数目录的字段
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true
    }

编写vue.config.js

  1. 我们在项目根目录创建vue.config.js文件
  2. 写入以下内容(如路径不一样请做相应适配)
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')
                }
            ])
        ]
    }
}
  1. 编译运行

发现提示如下内容

提示内容

说明未安装copy-webpack-plugin插件,我们手动安装一下。

安装copy-webpack-plugin

然后编译运行,发现微信开发者工具里面出现以下内容。

微信开发者工具里面的内容


截止目前,已打通Hbuilder X到微信开发者工具的自动复制,即已解决本文的核心内容。以下为进一步测试。

创建云函数

我们在云函数根目录上右键,在右键菜单中,可以选择创建一个新的 Node.js 云函数,我们将该云函数命名为check。开发者工具在本地创建出云函数目录和入口 index.js 文件,同时在线上环境中创建出对应的云函数。创建成功后,工具会提示是否立即本地安装依赖,确定后工具会自动安装 wx-server-sdk。我们会看到以下内容。

创建好后将其同步复制到uni-app项目,即可为以后自动同步行方便,又可避免在输出文件夹中云函数的意外丢失。至此,相关文件编写工作转至Hbuilder X,云函数上传部署依旧在微信开发者工具。

云函数模板内容

编写云函数

默认的云函数只是一个返回用户基本数据的内容,我们将其修改至满足我们的业务需求,以内容安全云调用为例。

在云函数文件中写入以下内容

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async(event, context) => {
  try {
    console.log('待检测文本:' + event.content);
    let result = await cloud.openapi.security.msgSecCheck({
      content: event.content
    })
    console.log('result:' + JSON.stringify(result));

    if (result && result.errCode.toString() === '87014') {
      return {
        code: 300,
        msg: '内容含有违法违规内容',
        data: result
      }
    } else {
      return {
        code: 200,
        msg: 'ok',
        data: result
      }
    }

  } catch (err) {
    if (err.errCode.toString() === '87014') {
      return {
        code: 300,
        msg: '内容含有违法违规内容',
        data: err
      }
    }
    return {
      code: 400,
      msg: '调用security接口异常',
      data: err
    }
  }
}

权限申明

云函数config权限声明

如上图,在函数目录下,创建一个config.json,文档说会自动创建,但是我实际操作时未自动创建。config.json内容如下。

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

然后在函数目录右键,上传并部署。

小程序调用云函数

wx.cloud.init()
                wx.cloud.callFunction({
                    name: 'check',
                    data: {
                        "content": this.contents.join()
                    }
                }).then(res => {
                    console.log(res.result)
                    if (res.result.code == 300) {
                        uni.showModal({
                            title: "温馨提示",
                            content: "你所输入的内容可能含有违法违规内容,不支持进行下一步操作"
                        })
                        return
                    } else {
                        ... // 你要进行的操作
                    }
                })

效果展示

微信图片_20191022110949.png

推广

 继续浏览关于 的文章

 本文最后更新于:2019/12/10 14:54:38,可能因经年累月而与现状有所差异

 引用转载请注明:指尖魔法屋 > 学习笔记 > uni-app对微信小程序云函数的适配

精选评论

  1. 蹉跎
    蹉跎 回复

    Windows 7Chrome 77.0.3865.90

    权限申明是在哪个目录下新建config.json,小白求接待 icon_wink.gif

    1. 蹉跎
      蹉跎 回复

      Windows 7Chrome 77.0.3865.90

      小白求解答,上一条错别字

      1. 蹉跎
        蹉跎 回复

        Windows 7Chrome 77.0.3865.90

        我知道在哪里建了,谢谢哥

        1. 醉月思

          已重新修改文章,更方便理解

          1. 蹉跎
            蹉跎 回复

            Windows 7Chrome 77.0.3865.90

            谢谢哥,我在研究研究

          2. 醉月思

            调用文中有,如果你遇到问题了的话。我记得当时使用云端测试会报错(可能是这个原因),但是直接使用是没问题的

          3. 蹉跎
            蹉跎 回复

            Windows 7Chrome 77.0.3865.90

            谢谢哥,还有那个调用,能不能也贴个代码 icon_confused.gif

  2. jkjk
    jkjk 回复

    Windows 10Chrome 70.0.3538.67

    安装完copy-webpack-plugin文件夹并没有云函数的标志,是不是漏了什么步骤?期待解答

    1. 醉月思
    2. 醉月思

      因为在微信小程序里面没有设置云函数的路径,我重新修改一下文章