解决方案
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
1956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
