用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

uni-app對微信小程序云函數的適配

Rolan 2019-11-20 00:05

版權說明本文首發于個人博客-指尖魔法屋(www.thinkmoon.cn)。原文地址:uni-app對微信小程序云函數的適配引言熟悉uni-app的人應該都知道,uni-app并未對微信小程序云函數(本文統稱云函數)進行相應的適配。但是, ...

版權說明

本文首發于個人博客-指尖魔法屋(www.thinkmoon.cn)。原文地址: uni-app對微信小程序云函數的適配

引言

熟悉uni-app的人應該都知道,uni-app并未對微信小程序云函數(本文統稱云函數)進行相應的適配。但是,如果我們在某些業務場景的下需要使用云函數呢?我們知道,云函數可以復制到微信開發者工具,這樣的話我們不得不每次編譯一次就手動復制一次,不得不說麻煩至極。本文就問題做出以下解決方案。

本文環境

  1. 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

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')
                }
            ])
        ]
    }
}
  1. 編譯運行

發現提示如下內容

說明未安裝 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 {
                        ... // 你要進行的操作
                    }
                })

效果展示

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 醉月思 來自: segmentfault
必中分分彩在线计划 股票指数是什么意思 安徽11选五前三直选遗漏 北京pk拾稳赚几百一天 多乐彩中奖注数 天津体彩十一选五走势图 网易快猜的新马快乐8 群英会任六胆拖中奖规则 广东36选7福利彩票 股民交流群二维码 广东36选7好彩3玩法 股票融资 湖北体彩十一选五 幸运农场官网 四川快乐12遗漏查询 河北福彩20选5推荐号 注册股票平台