抖音小程序

在抖音小程序里嵌入对话页面。配置方式和微信接近，都需要上传校验文件证明域名归你。

通用原理、前提条件和各平台对照见小程序接入总览。这一页只讲抖音这边要做的事。

开始之前

• 小程序是企业主体。个人主体的小程序用不了 web-view 组件
• 有一个已完成备案的域名，并且你能往它的根目录传文件
• 已经完成自有域名部署，用浏览器打开 https://你的域名/chat.html 能正常对话

第一步：配置 webview 域名

登录抖音开放平台，进入你的小程序，在开发配置里找到 webview 域名，添加你的域名。平台会要求你把一个校验文件放到域名根目录，确认能访问到之后完成校验。

传校验文件和传 chat.html 是同一个操作，交给同一个人做就行。只支持 HTTPS 域名，具体菜单位置以抖音开放平台当时的界面为准。

第二步：单独建一个页面放 web-view

web-view 会铺满整个页面

一个小程序页面只能放一个 web-view，它会自动铺满并覆盖页面上的其他组件。要单独建一个页面专门放它，不要塞进已有页面的一块区域。

新建页面的 ttml 里只放一行：

<web-view src="https://你的域名/chat.html"></web-view>

然后在任何你想放客服入口的地方跳转过来：

tt.navigateTo({ url: '/pages/support/index' })

第三步：带上客户身份

在拼 web-view 地址时把客户信息带上，客服就不是面对一个匿名访客：

Page({
  data: { url: '' },
  onLoad() {
    const user = tt.getStorageSync('user') || {}
    const query = [
      'u=' + encodeURIComponent(user.id),
      'n=' + encodeURIComponent(user.name),
    ].join('&')
    this.setData({ url: 'https://你的域名/chat.html?' + query })
  },
})

u 是必填的，其余资料要挂在它上面。姓名手机号这些参数在页面打开后会自动从地址栏抹掉。完整的参数清单见传客户资料给客服。

常见问题

提示域名不在白名单中

症状：真机打开 web-view 页面时提示域名未配置，开发者工具里勾选「不校验合法域名」后却正常。

成因：域名没有配置到 webview 域名白名单，或者校验没有真正通过。开发者工具的跳过校验选项只对本地调试有效。

解决：回到抖音开放平台确认域名已在 webview 域名列表里，并用浏览器访问一下校验文件的地址确认它还在。校验文件被删掉或被网站的重写规则挡住，都会导致配置失效。

后台加不了域名

症状：找不到配置入口，或者添加时被拒绝。

成因：个人主体的小程序不支持 web-view，域名未备案也无法添加。

解决：这两条都是平台规定。小程序主体是个人的，需要先变更为企业主体；域名没备案的，先完成备案。

页面出来了但聊天窗一直转圈

症状：对话页面能打开，聊天区域一直加载不出来。

成因：多半是对话页面本身的问题。webview 域名只管 web-view 打开的地址，页面里加载客服程序、连接服务端用到的地址不用你配。

解决：用手机浏览器直接打开 https://你的域名/chat.html。浏览器里也转圈，按故障排查定位对话页面本身；浏览器里正常的，检查 web-view 的地址有没有被改写或跳转到别的域名，跳转之后的域名也要加进白名单。

下一步

• 小程序接入总览 —— 其他平台怎么接，以及共同的注意事项
• 传客户资料给客服 —— 把会员信息传给客服
• 故障排查 —— 对话页面本身打不开时怎么定位