@tencentcloud/ai-desk-customer-wechat/README.md

AI Desk customer UIKit for wechat mini program

## 介绍

智能客服用户端的微信小程序 UIKit。使用此 UIKit，您可以在一天内将智能客服的能力集成到您的小程序项目。极简接入，用 AI 为您的产品增收提效。

## 效果展示

![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/cbc18d2afd8f11efbf88525400e889b2.gif?width=296&height=657)


## 开发环境要求
- 微信开发者工具

- JavaScript 或 TypeScript

- node（node.js ≥ 16.0.0）

- npm（版本请与 node 版本匹配）


## UIKit 源码集成

### 步骤1：创建项目

在微信开发者工具上创建一个使用 JS-基础模板的小程序项目（是否使用模板，是否使用 TS 均可），如图所示：

![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/d57d220ffd8311efaf3d52540099c741.png)


### 步骤2：下载 UIKit

微信开发者工具创建的小程序项目默认没有 package.json，因此您需要先创建 package.json 文件。
``` bash
npm init -y
```

通过 NPM 方式下载 UIKit。
``` bash
npm i @tencentcloud/ai-desk-customer-wechat@latest
```

为了方便您对 UI 进行扩展，请在项目的根目录下执行以下命令，将 UIKit 源码复制到项目中。



【macOS 端】
``` bash
mkdir -p ./ai-desk-customer-wechat && 
rsync -av --exclude={'node_modules','package.json','excluded-list.txt','script'} ./node_modules/@tencentcloud/ai-desk-customer-wechat/ ai-desk-customer-wechat/
```

【Windows 端】
``` bash
xcopy .\node_modules\@tencentcloud\ai-desk-customer-wechat .\ai-desk-customer-wechat /i /e
```

### 步骤3：分包引入 UIKit

为了规避小程序主包体积超限问题，我们建议您将客服 UIKit 放入分包。

#### 

#### 1. 工程配置



【app.js】

> **说明：**
> 

> 以下代码使用了[分包异步化](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html)的技术方案。
> 

``` javascript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
let common_vendor;
require.async('./ai-desk-customer-wechat/common/vendor').then((res) => {
    common_vendor = res;
    const _sfc_main = {
        onLaunch: function() {
          console.log("App Launch");
        },
        onShow: function() {
          console.log("App Show");
        },
        onHide: function() {
          console.log("App Hide");
        }
      };
      function createApp() {
        const app = common_vendor.createSSRApp(_sfc_main);
        return {
          app
        };
      }
      createApp().app.mount("#app");
      exports.createApp = createApp;
}).catch(({ errMsg, mod }) => {
    console.error(`path: ${mod}, ${errMsg}`)
});
```

【app.json】

> **说明：**
> 

> 请务必配置 [subPackages](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html)和 [preloadRule](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html)。
> 

``` javascript
{
  "pages": [
    "pages/index/index"
  ],
  "subPackages": [
    {
      "root": "ai-desk-customer-wechat",
      "pages": [
        "pages/index/index"
      ],
      "entry": "index.js"
    }
  ],
  "preloadRule": {
    "ai-desk-customer-wechat/pages/index/index": {
      "network": "all",
      "packages": [
        "ai-desk-customer-wechat"
      ]
    }
  },
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json"
}

```

#### 

#### 2. 在项目主包页面中配置智能客服的入口



【主包 pages/index/index.js】
``` javascript
Page({
  data: {
  },
  getSupport() {
    // SDKAppID/userID/userSig 的获取请参考步骤4
    const SDKAppID = 0;
    const userID = '';
    const userSig = '';
    wx.navigateTo({
      url: `/ai-desk-customer-wechat/pages/index/index?SDKAppID=${SDKAppID}&userID=${userID}&userSig=${userSig}`
    })
  },
})
```

【主包 pages/index/index.wxml】
``` javascript
<button class="get-support" bind:tap="getSupport">咨询客服</button>
```

【主包 pages/index/index.wxss】
``` css
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.get-support {
    background-color: #0052d9;
    color: #ffffff;
    margin: auto;
}
```

### 步骤4：获取 SDKAppID 、userID 、 userSig

获取 SDKAppID、userID、userSig 信息后填写到 `pages/index/index.js` 中对应的字段上。
``` typescript
const SDKAppID = 0;// Your SDKAppID
const userID = '';// Your userID
const userSig = '';// Your userSig
```
- SDKAppID 信息，可通过 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取:

   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027984635/1243495d5ec711efb66652540055f650.png)

- userID 信息，可单击 [ 即时通信 IM 控制台 > 账号管理](https://console.cloud.tencent.com/im/account-management)，切换至目标应用所在账号，**创建 2 个 userID 方便后续体验聊天功能**。

   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027984635/1245cce55ec711ef9bf1525400a9236a.png)

- userSig 信息，可单击 [ 即时通信 IM 控制台 > 开发工具 > UserSig生成&校验](https://console.cloud.tencent.com/im/tool-usersig)，填写创建的 userID，即可生成 userSig。

   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027984635/12515a985ec711ef8f105254002693fd.png)


### 步骤5：启动项目，并发起您的第一条客服咨询

测试前，请先清理微信开发者工具的缓存，并勾选**本地设置** > **不校验合法域名**。





![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/46244897ff1411efaf3d52540099c741.png)




![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/497e1619ff1411efa17e525400454e06.jpeg)


## 常见问题

### 什么是 UserSig？如何生成 UserSig？

UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。

UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688#GeneratingdynamicUserSig)。

### 小程序如果需要上线或者部署正式环境怎么办？

请在 [微信公众平台](https://mp.weixin.qq.com/) > **开发** > **开发管理** > **开发设**置 > **服务器域名**中进行域名配置。域名配置详细参见：[小程序合法域名](https://cloud.tencent.com/document/product/269/75285#56e2dceb-d703-43ea-bf8d-c772318b4eb2)。

## 交流与反馈

[点此进入 IM 社群](https://zhiliao.qq.com/s/c5GY7HIM62CK)，享有专业工程师的支持，解决您的难题。