uni-app小程序接入腾讯云智服会话插件

uni-app小程序接入腾讯云智服会话插件

首先，腾讯云智服会话插件是一个微信的原生第三方插件，他的开发文档也只给原生微信小程序提供了接入方式，并没有给其他框架提供接入的方式，看过他的开发文档后，先想的是怎么在uni-app里面接入，but尝试了很久，没成功，具体原因就不说了，如果有大佬知道怎么在uni-app里面接入请记得告诉我，哈哈哈
我的实现方式其实很简单就是在编译后的文件里面修改，操作如下：

1. 申请使用插件
   登录小程序管理后台（在微信公众平台登录小程序账号），通过“设置-第三方设置-插件管理”添加插件：
   腾讯云智服小程序插件appid：wx738958e0f4c894f9，请使用最新稳定版本。
   提交申请审核通过后就可以使用了。
   开发文档说在小程序的app.json里面配置插件plugins的相关信息，那么在Uni-app的项目里与app.json所对应的文件就是manifest.json文件，在该对应的微信配置（mp-weixin）里加入：

 "plugins": {
    "chat": {
      "version": "xxx",
      "provider": "wx738958e0f4c894f9"
    }
  },
  "sitemapLocation": "sitemap.json"

记得“version”版本号不要忘记填！！！

2. 组件初始化
   这一步是我纠结了很久的，不知道在哪里去初始化，最终选择在编译后的文件里面操作了。。。
   在编译后的dist => dev => mp-weixin首先在这个下面加入plugin文件夹，里面放我们的这个会话插件:
   
   这个chat文件夹里面的js、json、wxss都是空的，只有wxml里面有一个chat组件

<view>
    <chat></chat>
</view>

插件的官方文档说必须要用一个单独的页面来放置组件，所以在uni-app的页面配置里面就需要新建一个空白页面，同样，在编译后的空白页面的js文件里面先删掉所有的代码然后初始化组件：

var plugin = requirePlugin("chat");
Page({
  onLoad() {
      plugin.init({
      sign: '',  //必传，公司渠道唯一标识，腾讯云智服后台系统创建「小程序插件」渠道后，在「渠道管理」获取
      token: '', //非必填
      uid: '',   //用户唯一标识，如果没有则不填写，默认为空
      title: '', //非必填，如果未填写，默认获取配置标题
      isRMB: '', //商品是否显示人民币￥,默认显示，false不显示
      data: {    //参数c1,c2,c3,c4,c5用于传递用户信息，参数d1,d2,d3,d4,d5,d6用于传递商品信息，默认为空
          c1: '',
          c2: '',
          c3: '',
          c4: '',
          c5: '',
          d1: '', //商品描述
          d2: '', //价格
          d3: '', //原价格
          d4: '', //展示商品图片链接
          d5: '', //商品跳转链接
          d6: '', //商品id
          data: ''//加密串,非必填
      },
      viewUrl(res){  //需要跳转的链接，则需要配置一个web-view
        if (res) {
          wx.navigateTo({
            url: '/pages/webview/index?href=' + 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);
        }
      }
    })
  }
})

在组件的json文件里面进行配置：

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

在新建的页面wxml里面使用组件：

<view bind:__l="__l">
	<chat></chat>
</view>

3. 获取sign值
   这一部分插件的开发文档讲的很清楚，我就不赘述了，将获取的这个sign填入初始化组件的js文件中就ok啦~
   记住：第二步的所有操作都是在编译后的文件中进行的。
   这样做其实很别扭，虽然说目的达到了，但是过程并不美好，而且只要项目重新编译就要重复一次这样的操作。。。但是目前也想不到其他的操作了，所以如果有大神知道怎么接入这个插件，请记得告诉我，谢啦~~