微信對(duì)話開放平臺(tái)小程序插件

微信對(duì)話開放平臺(tái)是以對(duì)話交互為核心, 為有客服需求的個(gè)人、企業(yè)和組織提供智能服務(wù)與用戶管理的配置平臺(tái)。開發(fā)者可利用我們提供的工具自主完成對(duì)話機(jī)器人的搭建。

微信對(duì)話開放平臺(tái)小程序插件，提供兩種調(diào)用方式，一種是有UI組件式調(diào)用，另一種是無UI 功能接口調(diào)用。

展示效果：

效果示例：

快速接入：

流程示意：

添加插件:

在微信公眾平臺(tái)【設(shè)置】-【第三方設(shè)置】-【插件管理】->添加 wx8c631f7e9f2465e1 插件的使用申請(qǐng)，或點(diǎn)擊這里申請(qǐng)使用插件。

配置插件

在小程序項(xiàng)目 app.json 中配置插件最新的版本號(hào)，或點(diǎn)擊這里查看使用插件操作。

{
  "pages": [
    "pages/index/index"
  ],
  "plugins": {
    "chatbot": {
      "version": "插件最新版本號(hào)",
      "provider": "wx8c631f7e9f2465e1"
    }
  }
}

插件初始化

在 app.js 中進(jìn)行插件初始化

var plugin = requirePlugin("chatbot");

plugin.init({
    appid: "", //微信對(duì)話開放平臺(tái)小程序插件appid
    openid: "", // 小程序用戶的openid，必填項(xiàng)
    userHeader: "", // 用戶頭像,不傳會(huì)彈出登錄框
    userName: "", // 用戶昵稱,不傳會(huì)彈出登錄框
    anonymous: false, // 是否允許匿名用戶登錄，版本1.2.9后生效, 默認(rèn)為false，設(shè)為true時(shí)，未傳遞userName、userHeader兩個(gè)字段時(shí)將彈出登錄框
    success: () => {},//非必填
    fail: (error) => {},//非必填
});

獲取appID

在微信對(duì)話開放平臺(tái)官網(wǎng)【發(fā)布管理】-【應(yīng)用綁定】-【小程序】-【小程序插件】中點(diǎn)擊【獲取配置】，取得appID。

獲取用戶openID

第一步：調(diào)用 wx.login(),獲取臨時(shí) code

相關(guān)文檔 https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

第二步：將獲取到的 code 發(fā)送給后臺(tái)換取 openid

相關(guān)文檔 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

wx.login({
    success: (res) => {
        // 通過code換取openid
        if (res.code) {
            wx.request({
                url: "",
                method: "post",
                data: {
                    code: res.code,
                },
                success: (res) => {
                    if (res.data && res.data.openid) {
                        // 獲取的openid存入storage，方便之后使用
                        wx.setStorageSync("openId", res.data.openid);
                    }
                },
            });
        }
    },
    fail: () => {},
    complete: () => {},
});

引入插件

{
  "usingComponents": {
    "chat": "plugin://chatbot/chat"
  }
}

使用插件

在相應(yīng)的wxml頁面內(nèi)

chat 組件外部必須指定容器, 并設(shè)置容器高度, 如果全屏展示, 設(shè)置高度為 100vh, 如果是自定義導(dǎo)航欄, 設(shè)置高度為(100vh - 導(dǎo)航欄的高度)即可.

<view style="height: 100vh">
    <chat
        bind:queryCallback="getQueryCallback"
        bind:openWebview="openWebview"
        bind:openMiniProgram="openMiniProgram"
    />
</view>

配置回調(diào)方法

在相應(yīng)頁面的 js 中配置返回首頁回調(diào)方法

getQueryCallback: function(e) {

}

點(diǎn)擊機(jī)器人回答里的鏈接跳轉(zhuǎn) webview,需要開發(fā)者自己配置一個(gè)承載 webview 的頁面,url 字段對(duì)應(yīng)的小程序頁面需要開發(fā)者自己創(chuàng)建

開發(fā)者需要在小程序后臺(tái)配置相應(yīng)的域名

1.1.7 版本開始支持

openWebview: function(e) {
    let url = e.detail.weburl
    wx.navigateTo({
        url: `/pages/webviewPage/webviewPage?url=${url}`
    })
}

點(diǎn)擊機(jī)器人回答中的小程序，需要在開發(fā)者自己的小程序內(nèi)做跳轉(zhuǎn)

開發(fā)者需要在小程序配置中指定跳轉(zhuǎn)小程序的 appId

1.1.7 版本開始支持

openMiniProgram(e) {
    let {appid, pagepath} = e.detail
    if (appid) {
        wx.navigateToMiniProgram({
            appId: appid,
            path: pagepath,
            extraData: {},
            envVersion: "",
            success(res) {
                // 打開成功
            }
        });
    } else {
        wx.navigateTo({
            url: pagepath,
            fail() {
                wx.switchTab({
                    url: pagepath
                });
            }
        });
    }
}

開源示例