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

引言

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

本文環境

1. Hbuilder X
2. 微信開發者工具

創建雲函數目錄

首先，我們需要在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')
                }
            ])
        ]
    }
}

3. 編譯運行
   發現提示如下內容

說明未安裝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