小程序嵌入web端七鱼sdk

小程序 0

解决方案

web-view 嵌入

本地调试的时候可以先不用域名,本地使用node 开一个服务,服务指向加载网易七鱼的index.html页面就行了

首先准备域名

第一个域名是公司私有的,用来加载网易七鱼的sdk

第二个是网易七鱼的web短链接对应的域名

最终使用微信jssdk重定向

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <style>        body, html {            margin: 0;            padding: 0;        }        iframe {            overflow: hidden;        }        .YSF-CUSTOM-ENTRY {            display: none;        }    </style>    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script></head><body></body><script>    window.onload = function () {        const paraString = window.location.href;        const queryData = JSON.parse(decodeURIComponent(paraString.split("=")[1]));        if (queryData.isBack) {            sessionStorage.setItem('isOpen', '0')            jWeixin.miniProgram.navigateBack()            return        }// queryData.qiYuConfig.shortDomain 网易七鱼 web 自定义链接的域名 // queryData.qiYuConfig.appKey 网易七鱼appKey// queryData.qiYuConfig.domain 当前域名        const init = function () {            (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 = `${queryData.qiYuConfig.shortDomain}/script/${queryData.qiYuConfig.appKey}.js`;                d.body.appendChild(j);            })(window, document, 'ysf');            ysf('onready', function () {                ysf('config', {                    ...queryData.config,                    success: () => {                        const url= ysf.url().replace('https://qiyukf.com',queryData.qiYuConfig.shortDomain)                        if (queryData.product) {                            console.log('ysf.url()',ysf.url())                            ysf('product', {                                ...queryData.product,                                url: `${queryData.qiYuConfig.domain}?data=${encodeURIComponent(JSON.stringify({isBack: true}))}`,                                success: function () {     // 成功回调                                    jWeixin.miniProgram.redirectTo({url: "/pages/contact/qiYu/index?redirectUrl=" + encodeURIComponent(url)})                                }                            })                        } else {                            jWeixin.miniProgram.redirectTo({url: "/pages/contact/qiYu/index?redirectUrl=" + encodeURIComponent(url)})                        }                    }                })            })        }        init()    }</script></html>

心路历程

首先用到了web-view

然后查到小程序 web-view 必须使用域名 配置业务域名

然后申请域名

本地调用的时候 发现 ysf('open') 最终是改变了location.href 浏览器中路由栈多了一次,在小程序 左上角返回的时候 返回的是加载qiyusdk的页面,然后进入了死循环

对于这个问题

我首先想到的是 监听左侧上方的返回按钮

由于是使用uniapp开发的

所以先查相关的文档 发现有个 onBackPress 方法可以监听返回,经试验 发现只在浏览器下有效,小程序上无效

继续搜索文档

小程序左侧返回按钮没办法监听

嗯 到这...... 无语

然后我想着立flag

使用sessionStorage 存个已进入的状态

嗯 起先挺好 感觉成功了

但 没考虑到页面刷新情况 web-view 嵌套 实际上就像是个ifream 页面刷新的时候刷的还是外面的路由 然后又进入初始化状态,所以这时候flag 就无效了

如果不考虑页面刷新的情况这个方式还是可以的

嗯 到这...... 加油

后来我使劲的想 我想着 要是可以重定向 只有一个路由栈就好了 但是 ysf('open') 后续的逻辑 又不是我们这边控制的

后来我想到 window.location.href那就是个新地址,那我是不是可以使用ifream 嵌套

也就是说要是可以获取到那个新地址就好了

后来查询文档 发现有个 ysl.url()的api可以获取客服地址 很开心

然后就在当前网页上 将ysf('open')去掉,使用ysf.url()获取地址,然后js生成一个ifream 再插入到body上

嗯,浏览器上看着完美解决

在小程序上 ifream 嵌套显示的是pc的样式,小程序上需要显示移动端的样式呀 啊啊啊啊啊啊啊啊啊啊啊 炸了

继续 接着查找ifream 怎样可以将显示的网址 显示移动的 嗯查了一堆文档 试了一堆方法 无效 放弃

换思路

能重定向就好了

后来 使用微信的jssdk 进行了重定向的操作

重定向到当前的页面 当前页面设定个参数 如果有重定向网址 当前web-view就使用重定向的网址,没有的话就加载网易七鱼的设置配置的私有网址,完美解决

本地 开发调试 完美

这时候 说实话有点 担心 因为 ysf.url()生成的 网址是 qiyu客服域名下网址

微信小程序 会拦截域名

只有在业务域名下配置的才不会被拦截 网易七鱼的 域名应该是会被拦截的 目前测试环境下 都是开发调试模式的 所以看不出来

so

后续呢 在测试环境下配了生产的相关域名 使用生产的网址进行测试

关闭调试模式

果然 gg了

七鱼客服的域名 我们这边又配置不了 他们那边官网的网址上又不能放我们这边的校验文件

没办法了

去问了七鱼的人

然后发现他们有个web自定义链接功能

也就是说 他们都单独给了个域名给对应的客户 这个域名算是客户私有的

也可以在这个域名下上传校验文件

这问题一下子就解决了

将这个私有域名陪着在微信的业务域名下就好了

但是呢 有个问题 这个web自定义链接功能 不会用啊

问他们怎么用的 直接window.open()打开

他们也就说直接用

直接用是怎么个用法

我想着替换域名 把ysf.url()中生成的 含有qiyu客服的域名替换成我们私有的域名

嗯 本地实验成功

嗯 小程序打包测试失败

我发现还是拦截了七鱼客服的一些网页 我想着 我最终生成的url 都替换了 为啥还有七鱼的相关域名

于是我根据拦截的地址 查看yiqu sdk的源码 发现这个被拦截的地址是用来通信的,必须的,这个是必须的 绕不过

咋整

我看了源码 发现qiyu的域名是个公共变量 于是我想着我把这个域名换成我们自己的私有域名 是不是可以

换了之后 发现没有任何问题 完美解决呀

其实最终 就是web自定义链接的功能 他也生成了一份相对应的sdk 放在我们私有域名下的 都是单独部署的

也就是说qiyu的websdk文件可以在我们的域名下下载出来

这样全部都是私有化的了

微信下的业务域名也是配置的我们自己的

所以现在是完美解决

哎 累

THE END

也许您对下面的内容还感兴趣: