uni-app对微信小程序云函数的适配
2020-03-04 22:58
1521 查看
引言
熟悉uni-app的人应该都知道,uni-app并未对微信小程序云函数(本文统称云函数)进行相应的适配。但是,如果我们在某些业务场景的下需要使用云函数呢?我们知道,云函数可以复制到微信开发者工具,这样的话我们不得不每次编译一次就手动复制一次,不得不说麻烦至极。本文就问题做出以下解决方案。
本文环境
- Hbuilder X
- 微信开发者工具
创建云函数目录
首先,我们需要在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
- 我们在项目根目录创建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') } ]) ] } }
- 编译运行
发现提示如下内容
说明未安装
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.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 { ... // 你要进行的操作 } })
效果展示
转载自:https://www.jianshu.com/p/fc5f88721439
- 点赞 1
- 收藏
- 分享
- 文章举报
相关文章推荐
- 微信小程序自定义tabBar在uni-app的适配详解
- 使用uni-app(Vue.js)创建运行微信小程序项目步骤
- uni-app微信小程序模拟器运行到某一页面调试操作
- uni-app如何在写微信小程序时调用getLocation接口获取用户位置信息
- 使用uni-app开发微信小程序
- uniapp调用小白接口教程(开箱即用!以打包成微信小程序为例)
- 使用uni-app开发微信小程序的实现
- uni-app和微信小程序传给后台时间戳传递不过去?
- uni-app微信小程序开发之引入腾讯视频小程序播放插件
- uni-app 微信小程序-放大缩小效果以及抖动解决办法
- 利用uni-app做的微信小程序中获取当前地址信息,编译到真机运行上时,显示不出来
- uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤
- uni-app开发微信小程序的几天时间
- uni-app微信小程序vue二次封装日历组件
- uni-app之APP和小程序微信授权方法
- uni-app - vue以及微信小程序
- 外媒:微信小程序顺应“APP中启动APP”的行业潮流
- 让微信小程序在浏览器和自己的App中运行--自己写的一个开源框架FreeMina(开发中。。)
- 微信小程序:wx.navigateTo中url无法跳转问题(app.json中配置的tabBar与wx.navigateTo中url引用相同页面导致)
- App前端,Web前端,后端,微信小程序到底该学啥?