需求背景：用户在小程序页面点击按钮添加企业微信的客服

相关技术：基于uniapp开发的微信小程序

插件名称：企业微信客户服务插件「联系我」插件 - 文档 - 企业微信开发者中心

仔细阅读文档「联系我」插件 - 文档 - 企业微信开发者中心

以下是我的实例代码
1.首先先小程序管理管理后台添加插件

        开发者在小程序管理后台申请使用插件，添加路径：设置 ->第三方服务 -> 插件管理 -> 添加插件，搜索并添加插件ID： wx104a1a20c3f81ec2，无需审核确认。

我这里已添加好了【企业客户服务】插件

2.开发者在小程序app.json 文件中添加对插件的引用，uniapp是manifest.json

3.开发者在具体引用插件的页面文件json文件中，添加对组件的引用

如果是在某个页面用插件，那么就在那个页面的配置里引用，如：

"pages": [
    {
      "path": "pages/shop/shop",
      "style": {
        "navigationBarTitleText": "商城",
        "enablePullDownRefresh": true,
         // 在这引用
        "mp-weixin": {
          "usingComponents": {
            "cell": "plugin://contactPlugin/cell"
          }
        }
      }
    },
...
]

如果需要全局引用，则：在globalStyle引用，

"globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#fff",
    "backgroundColor": "#F8F8F8",
    "navigationStyle": "custom",
    // 在这引用
    "usingComponents": {
      "cell": "plugin://contactPlugin/cell"
    }
  },

如果你需要每个页面都要客服按钮展示，也不想每个页面去引入组件，可以使用全局注册组件全局注入的方式：

首先在main.js里全局注册

import Vue from 'vue';
// 自定义的组件
import CustomerService from '@/components/customer-service/customer-service.vue';
Vue.component('CustomerService', CustomerService);

再再pages.json中配置

4.开发者在引用插件的wxml文件中添加组件的具体代码，其中plugid为在企业微信管理后台配置的客服ID，将该ID作为参数传入组件，

原文档是这样，但是事件无所谓，有ID就行

<cell bind:startmessage='startmessage' bind:completemessage="completemessage" plugid='plugid'  />

 所以我直接下面这样写，如果你要监听事件，那就vue写法是@startmessage="startmessage" @completemessage="completemessage"

<cell plugid='真实客服ID'  />

其中，客服ID需要在企业微信配置

参数说明：

属性	类型	默认值	必填	说明
startmessage	function		否	监听按钮点击事件执行开始时的回调
completemessage	function		否	监听按钮点击事件执行完毕后的回调
plugid	string		是	在企业微信管理后台配置的唯一客服ID

其中 completemessage 回调接收的参数格式如下：

{
    errcode: 0,  // 消息发送状态
    name: '',  // 推送的客服人员姓名
    headurl: ''  // 推送的客服人员头像
	notifytype: 0,  // 0: 表示消息通知的方式  1：表示二维码的方式
}

请开发者注意，name和headurl参数在 errcode 为0和-3006 时才会返回，errcode 的异常错误码说明如下：
-3002：获取插件配置信息失败
-3004：用户信息授权失败
-3005：客服消息发送失败
-3006：发送的客服人员已经和当前用户是好友关系，如果 notifytype = 1，则为二维码展示方式，此时仍会展示二维码
-3008：当前配置没有客服人员

4.1、插件扩展参数说明

为了对插件的UI表现进行定制，插件提供了以下参数对插件的UI进行进一步的扩展配置，可配置的公用属性如下：

属性	类型	默认值	必填	说明
styleType	number	插件ID后台的样式配置	否	通过此属性可强制覆盖在企业微信管理后台配置的主样式类型，枚举值：1（插件整行显示的样式）2（插件只显示为一个按钮的样式） 3（显示为聊天气泡的样式）
avatorStyle	string	circle	否	单人客服且styleType为1时有效，控制头像的展示类型，枚举值：rect、circle
isMask	number	0	否	单人客服且styleType为1时有效，控制是否展示客服真实姓名 ，可选项：0、1
contactText	number	0	否	单人客服styleType为1且isMask为1时有效、styleType为3时有效、多人客服styleType为1时有效，不支持自定义显示文案，可选项：'咨询服务'、'在线咨询'、'联系客服'，分别对应的值为 0、1、2
buttonText	number	0	否	单人客服以及多人客服出现按钮时有效，不支持自定义按钮文案，可选项：'联系我', '立即联系', '咨询服务', '在线咨询', '联系客服'，分别的值为 0～4
buttonStyle	string	primary	否	单人客服以及多人客服出现按钮时有效，用于控制按钮的显示样式，可选项：primary（深蓝色背景）、light（白底背景）
serviceText	number	0	否	单人客服以及styleType为3时有效，不支持自定义按钮文案，可选项：'有什么问题可以联系我咨询', '联系服务人员咨询', '获取服务人员联系方式', '联系客服咨询更多问题'，分别的值为 0～3
paddingStyle	number	0	否	单人客服以及多人客服styleType为1时有效，用于控制控件的内填充样式，可自定义填充数值
iconStyle	string	avator	否	多人客服styleType为1时有效，用于控制图标显示为深蓝色图标还是白底图标，可选项：avator（头像图标）、primary（深蓝色图标）、light（白底图标）
blockStyle	string	bubble	否	单人客服以及多人客服styleType为2时有效，用于控制显示一个圆形按钮还是一个文字按钮，枚举值：bubble（圆形按钮）、button（文字按钮）
bubbleColor	string	4790EE	否	单人客服以及多人客服styleType为2时有效，用于控制圆形按钮的背景色，可自定义传入的色值的16进制值，不用带#号

4.2、插件运行环境说明

小程序版本的插件目前仅支持运行在微信的小程序环境中，企业微信环境暂不支持。

5.实际效果图

这是我改造过样式的

// html
<view class="wx-service">
    <cell plugid='xxxxxxxxxx' styleType="2" />
 </view>


// css
::v-deep .wx-service {

  cell > view {
    width: 92rpx;
    height: 112rpx;
    background: url(xxx.png) no-repeat;
    background-size: 100% 100%;

    view {
      opacity: 0;
    }
  }
}

如果你直接原始的是这样：

它原生可以配置展示形式，具体看文档的插件扩展参数说明，你也可以用自己的样式改写

点击之后如下图：