@tencentcloud/ai-desk-customer-uniapp NPM

介绍

智能客服用户端 uni-app UIKit。使用此 UIKit，您可以在一天内将智能客服的能力集成到您的 Web、小程序、App 项目。极简接入，一套代码多端运行，且体验一致，用 AI 为您的产品降本增效。其流程如下图所示：

npm.io

效果展示

npm.io

开发环境要求

HBuilderX 升级到最新版本
TypeScript / JavaScript （UIKit 使用 ts 语言开发，支持在 js 或者 ts 项目中集成）
Vue2 / Vue3
sass（sass-loader 版本 ≤ 10.1.1）
node（12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0）
npm（版本请与 node 版本匹配）

UIKit 源码集成

步骤1：创建项目（已有项目可忽略）

打开 HbuilderX，在菜单栏中选择 “文件-新建-项目”，创建一个名为 ai-desk-example 的 uni-app 项目。Vue 版本选择推荐 3。

npm.io

步骤2：下载 UIKit

HBuilderX 创建项目时默认不会创建 package.json 文件，请在项目根目录下执行以下命令创建 package.json 文件：
```
npm init -y
```
下载 UIKit 并拷贝源码至项目中：

【macOS 端】

通过 NPM 方式下载 UIKit 组件：

npm i @tencentcloud/ai-desk-customer-uniapp

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

mkdir -p ./ai-desk-customer-uniapp && 
rsync -av --exclude={'node_modules','package.json','excluded-list.txt','script'} ./node_modules/@tencentcloud/ai-desk-customer-uniapp/ ai-desk-customer-uniapp/

【Windows 端】

通过 NPM 方式下载 UIKit 组件：

npm i @tencentcloud/ai-desk-customer-uniapp

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

xcopy .\node_modules\@tencentcloud\ai-desk-customer-uniapp .\ai-desk-customer-uniapp /i /e /exclude:.\node_modules\@tencentcloud\ai-desk-customer-uniapp\excluded-list.txt

步骤3：引入 UIKit

1. 工程配置

【manifest.json 文件】

在 manifest.json文件的源码视图中开启小程序分包subPackages 和关闭 H5 treeShaking 选项。

// weixin miniProgram
"mp-weixin" : {
    "appid" : "",
    "optimization" : {
        "subPackages" : true
    }
},
// H5: close treeshaking to solve the problem of uni[methond]() is not a function 
"h5" : {
    "optimization" : {
        "treeShaking" : {
            "enable" : false
        }
    }
},

注意：
小程序默认使用分包集成，打包小程序时 manifest.json 不要配置 lazyCodeLoading 选项。

【vue.config.js（Vue3 项目可忽略）】

Vue2 项目必须在根目录下创建或修改 vue.config.js 。

const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default;

module.exports = {
  parallel: false,
  configureWebpack: {
    plugins: [
      ScriptSetup({
        /* options */
      }),
    ],
  },
  chainWebpack(config) {
    // disable type check and let `vue-tsc` handles it
    config.plugins.delete('fork-ts-checker');
  },
};

2. 集成 UIKit

请将以下内容复制到项目对应的文件中。

【App.vue 文件】

<script>
import TUICustomerServer from './ai-desk-customer-uniapp/server';
const SDKAppID = 0;
const userID = '';
const userSig = '';
TUICustomerServer.init(SDKAppID,userID,userSig);
export default {
	onLaunch: function() {
		console.log('App Launch')
	},
	onShow: function() {
		console.log('App Show')
	},
	onHide: function() {
		console.log('App Hide')
	}
}
</script>
<style>
uni-page-body,
html,
body,
page {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}
#app {
  height: 100% !important;
}
</style>

【pages.json 文件】

请将以下内容复制到项目对应的文件中。

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "智能客服"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {},
    "condition" : { //模式配置，仅开发期间生效
        "current": 0, //当前激活的模式(list 的索引项)
        "list": [
            {
                "name": "", //模式名称
                "path": "", //启动页面，必选
                "query": "" //启动参数，在页面的onLoad函数里面得到
            }
        ]
    }
}

【adapter-vue.ts (Vue3 项目可忽略)】

如果您是 Vue2 项目，需要将ai-desk-customer-uniapp/adapter-vue.ts中下列的代码替换。

export * from 'vue';

替换为

export * from '@vue/composition-api';

【main.js（Vue3 项目可忽略）】

如果您是 Vue2 项目，请在 main.js 中引入组合式API，防止环境变量 isPC 等无法使用。

// #ifndef VUE3
import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI);
// #endif

3. 在项目主包中配置智能客服聊天的入口

请将以下内容复制到 pages/index/index.vue 文件中。

<template>
  <div class="chat">
    <CustomerServiceChat
    style="height: 100%"
    />
  </div>
</template>

<script lang="ts" setup>
import CustomerServiceChat from '../../ai-desk-customer-uniapp/components/CustomerServiceChat/index-uniapp.vue'
</script>
<style lang="scss" scoped>
.chat {
  display: block;
  height: 100%;
  overflow: hidden;
}
</style>

步骤4：获取 SDKAppID 、userID 、 userSig

获取 SDKAppID、userID、userSig 信息后填写到 App.vue中对应的字段上。

const SDKAppID = 0;// Your SDKAppID
const userID = '';// Your userID
const userSig = '';// Your userSig

SDKAppID 信息，可通过即时通信 IM 控制台获取:
userID 信息，可单击即时通信 IM 控制台 > 账号管理，切换至目标应用所在账号，创建 2 个 userID 方便后续体验聊天功能。
userSig 信息，可单击即时通信 IM 控制台 > 开发工具 > UserSig生成&校验，填写创建的 userID，即可生成 userSig。

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

使用 HBuilderX 启动该项目，单击运行，可选择运行到浏览器，或者手机，或者小程序模拟器。
如果您选择了运行到微信开发者工具，但 HBuilderX 没有自动拉起微信开发者工具，请使用微信开发者工具手动打开编译后的项目，目录地址：unpackage/dist/dev/mp-weixin。
小程序开发环境，请选择详情 > 本地设置 中勾选 不校验合法域名、web-view（业务域名）、TLS版本以及 HTTPS 证书。上线前请在微信公众平台 > 开发 > 开发管理 > 开发设置 > 服务器域名中进行域名配置，域名配置详见：小程序合法域名。