小程序嵌入web端七鱼sdk

2024-07-01 小程序 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 方法可以监听返回，经试验发现只在浏览器下有效，小程序上无效

继续搜索文档

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

嗯到这...... 无语