建立雲函式目錄

首先，我們需要在uni-app專案資料夾下，建立一個雲函式目錄，路徑隨意，我這裡是functions。然後先隨便在裡面放一些檔案，這裡以new_file.css為例。(放檔案的原因是：確保編譯成小程式後cloudfunctions資料夾存在。如果該資料夾下沒有檔案，預設是不會在微信小程式開發平臺中顯示該資料夾的。)

修改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,data: err
   }
  }
  return {
   code: 400,msg: '呼叫security介面異常',data: err
  }
 }
}

許可權申明

在函式目錄下，建立一個config.json,文件說會自動建立，但是實際操作時可能不會自動建立。config.json內容如下。

{
  "permissions": {
    "openapi": [
      "security.msgSecCheck"       //介面名
    ]
  }
}

小程式呼叫雲函式

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

效果展示

如果第一次出現錯誤：invalid scope 沒有許可權，請先開通雲服務

這是因為 小程式開發選擇了雲服務開發，但是沒有開通雲服務導致，點選微信開發工具上方的 雲開發按鈕，開通雲開發。

新建雲函式(上床並部署後會自動出現)

到此這篇關於uni-app使用微信小程式雲函式的步驟示例的文章就介紹到這了,更多相關uni-app使用微信小程式雲函式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！