在網上找了很久關於這方面但只找到下面這份資料，但還是感謝大佬的思路
https://blog.csdn.net/qq_43032844/article/details/104801053
我重新整理了一下
參考文檔：
https://docs.qq.com/doc/DSktaeFZkdFFTRGN1
1.請登錄微信小程序后台，進入“設置-第三方服務-插件管理”，搜索“騰訊雲智服”，進行添加
2.mainfest.json在mp-weixin目錄下加入插件
3.page.json加入
4.單獨新增插件頁面（注意是單獨）
具體代碼:
| <template> <view> <chat></chat> </view> </template>
<script> var plugin = requirePlugin("myPlugin"); export default { data() { return { c1: '', c2: '', c3: '', c4: '', c5: '', d1: '', //商品描述 d2: '', //價格 d3: '', //原價格 d4: '', //展示商品圖片鏈接 d5: '', //商品跳轉鏈接 d6: '', } }, onLoad(options) { // #ifdef MP-WEIXIN this.c1 = options.c1 this.c2 = options.c2 this.c3 = options.c3 this.c4 = options.c4 this.c5 = options.c5 this.d1 = options.d1 this.d2 = options.d2 this.d3 = options.d3 this.d4 = options.d4 this.d5 = options.d5 this.d6 = options.d6 plugin.init({ sign: '對應的值', //必傳，公司渠道唯一標識，騰訊雲智服后台系統創建「小程序插件」渠道后，在「渠道管理」獲取 token: '', //非必填 userAvator:'', //非必填，用戶頭像 userNick:'', //非必填，用戶昵稱 uid: '', //用戶唯一標識，如果沒有則不填寫，默認為空,（字符串格式） title: '', //非必填，如果未填寫，默認獲取配置標題 isRMB: '', //商品是否顯示人民幣￥,默認顯示，false不顯示 data: { //參數c1,c2,c3,c4,c5用於傳遞用戶信息，參數d1,d2,d3,d4,d5,d6用於傳遞商品信息，默認為空 c1: this.c1, c2: this.c2, c3: this.c3, c4: this.c4, c5: this.c5, d1: this.d1, //商品描述 d2: this.d2, //價格 d3: this.d3, //原價格 d4: decodeURIComponent(this.d4), //展示商品圖片鏈接 d5: decodeURIComponent(this.d5), //商品跳轉鏈接 d6: this.d6, //商品id data: ''//加密串,非必填 }, viewUrl(res){ //會話聊天的內容中，有需要跳轉的外鏈接，則需要自行配置一個web-view頁面，進行跳轉【見第4點】。如果res是小程序內頁面路由，可以直接處理 if (res) { wx.navigateTo({ url:res // url: '/pages/linkOthers?url=' + encodeURIComponent(res) }) } }, setTitle(res){ //設置標題 if (res) { wx.setNavigationBarTitle({ title: res }) } }, setBarColor(res) { //設置導航欄背景色 if (res) { wx.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: res }) } }, success(res){ //初始化成功時調用 if (res.data == 'success') { console.log('success'); } }, fail(res){ //初始化失敗時調用 if (res.data == 'initError') { console.log(res.message); } }, leave(res){ //離開會話頁面 if (res) { console.log(res); } } }) // #endif } } </script>
<style> </style>
|
5.會話聊天的內容中，有需要跳轉的外鏈接，則需要自行配置一個web-view頁面，進行跳轉【見代碼viewUrl部分】。如果res是小程序內頁面路由，可以直接處理
web-view跳轉頁面源碼：
| <template> <view> <view> <!-- url為要跳轉外鏈的地址--> <web-view :src="url"> </web-view> </view> </view> </template>
<script> export default { data() { return { url:"" } }, onLoad(val) { this.url = decodeURIComponent(val.url); // 設置當前的title 如果外鏈中有的話將被覆蓋 if(this.isNotEmpty(val.title)){ this.setTitle(val.title); } }, methods: { isNotEmpty(obj) { if (typeof obj == undefined || obj == null || obj == "" || obj == "undefined" || obj.length == 0) { return false; } else { return true; } }, // 設置title setTitle(title) { uni.setNavigationBarTitle({ title: title }) }, } } </script> |
6.跳轉前需要先拼接要傳遞的參數（參數具體見文檔內的說明）
7.點擊客服按鈕，觸發小程序跳轉客服聊天界面
8.成功訪問