uni-app使用微信小程序云函数的步骤示例


Posted in Javascript onMay 22, 2020

创建云函数目录

首先,我们需要在uni-app项目文件夹下,创建一个云函数目录,路径随意,我这里是functions。然后先随便在里面放一些文件,这里以new_file.css为例。(放文件的原因是:确保编译成小程序后cloudfunctions文件夹存在。如果该文件夹下没有文件,默认是不会在微信小程序开发平台中显示该文件夹的。)

uni-app使用微信小程序云函数的步骤示例

修改manifest.json

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

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

编写vue.config.js

  • 我们在项目根目录创建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')
        }
      ])
    ]
  }
}

编译运行

发现提示如下内容

uni-app使用微信小程序云函数的步骤示例

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

uni-app使用微信小程序云函数的步骤示例

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

uni-app使用微信小程序云函数的步骤示例

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

创建云函数

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

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

uni-app使用微信小程序云函数的步骤示例

编写云函数

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

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

// 云函数入口文件
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.json,文档说会自动创建,但是实际操作时可能不会自动创建。config.json内容如下。

uni-app使用微信小程序云函数的步骤示例

{
  "permissions": {
    "openapi": [
      "security.msgSecCheck"       //接口名
    ]
  }
}

uni-app使用微信小程序云函数的步骤示例

小程序调用云函数

wx.cloud.init()               //调用前需先调用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 {
            ... // 你要进行的操作
          }
        })

效果展示

uni-app使用微信小程序云函数的步骤示例

如果第一次出现错误:invalid scope 没有权限,请先开通云服务

这是因为 小程序开发选择了云服务开发,但是没有开通云服务导致,点击微信开发工具上方的 云开发按钮,开通云开发。

uni-app使用微信小程序云函数的步骤示例

新建云函数(上床并部署后会自动出现)

uni-app使用微信小程序云函数的步骤示例

到此这篇关于uni-app使用微信小程序云函数的步骤示例的文章就介绍到这了,更多相关uni-app使用微信小程序云函数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 鼠标拖动图标技术
Feb 07 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 #Javascript
jquery更改元素属性attr()方法操作示例
May 22 #jQuery
微信小程序转化为uni-app项目的方法示例
May 22 #Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 #Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 #jQuery
JS变量提升原理与用法实例浅析
May 22 #Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 #Javascript
You might like
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
php除数取整示例
2014/04/24 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
自我评价的正确写法
2013/09/19 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
人事部岗位职责范本
2014/03/05 职场文书
平安建设实施方案
2014/03/19 职场文书
会计核算科岗位职责
2014/03/19 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
承租经营合作者协议书
2014/10/01 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
企业安全生产规章制度
2015/08/06 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript