Uniapp集成七鱼方案-CFANZ编程社区

项目需要七鱼客服集成到前端H5应用中，前端是使用Uniapp框架开发，尴尬的是找了一圈没有找到uniapp集成七鱼客服的方案，当然原因也是明细的，因为uniapp默认没有index.html，这里作为解决方案分享一下大家，以供参考.

1.首先在工程主目录下新建index.html，在manifest.json中配置H5中index.html模板路径

Uniapp集成七鱼方案_uniapp

2. 编写index.html文件代码如下

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>
      <%= htmlWebpackPlugin.options.title %>
    </title>
    <!-- Open Graph data -->
    <!-- <meta property="og:title" content="Title Here" /> -->
    <!-- <meta property="og:url" content="http://www.example.com/" /> -->
    <!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
    <!-- <meta property="og:description" content="Description Here" /> -->
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS
        .supports('top: constant(a)'));
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />');
    </script>
    <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script>
      (function(w, d, n, a, j) {
        w[n] = w[n] || function() {
          (w[n].a = w[n].a || []).push(arguments);
        };
        j = d.createElement('script');
        j.async = true;
        j.src = 'https://qiyukf.com/script/你自己申请的客服地址.js?hidden=1';
        d.body.appendChild(j);
      })(window, document, 'ysf');

      ysf('onready', function() {
        console.log('七鱼客服准备完毕！')
      });
    </script>

  </body>
</html>

注意事项：1）script脚本要写到body里，不然会有body为null的错误警告

2）七鱼js链接后面加一个hidden=1，意思是不采用七鱼给出的客服显示样式，而是自定义客服样式

3.如果需要设置用户信息传送到七鱼，可以使用如下代码

ysf('config', {
          uid: info.phone,
          data: JSON.stringify([
                        {
              "key": "real_name",
              "value":"用户姓名"
            },
            {
              "index": 1,
              "key": "application_name",
              "label": "来源应用",
              "value": "真实应用",
              "zone": "true"
            }
          ])
        })

4.点击跳转

window.location.href = ysf('url');

搞定。。。。