《源码时代前端干货分享 你还在为小程序与移动端页面实现互通跳转而烦恼吗看过来了!!》由会员分享,可在线阅读,更多相关《源码时代前端干货分享 你还在为小程序与移动端页面实现互通跳转而烦恼吗看过来了!!(3页珍藏版)》请在金锄头文库上搜索。
1、源码时代前端干货分享|你还在为小程序与移动端页面实现互通跳转 而烦恼吗,看过来了! !需求体现:需求,在小程序里面,点击查看用户签订的协议,跳转到协议详情页,刚好协议详情 页在另一个H5项目的已经有,所以就想直接跳转过去,不必再重复开发小程序版本 的模块实现H5页面跳转小程序里面加载H5页面,需要嵌在web-view里面,注意:一个项目只能有一个。例 如:在小程序里面打开百度网页 在小程序项目里面src/pages/新建一个webview的文件夹,含有 wxml/wxss/json/jswxml:js:在onLoad里面获取到url这个参数,然后赋值给data,这样在wxml里面就能取到src
2、的值。Page(data: url:,onLoad: function (param) this.setData(url: decodeURIComponent(param.url),);json/wxss可以是空文件在小程序的页面跳转到H5页面的写法wx.navigateTo(url: ./webview/index?url=https:/ /page/account/index,);使用微信的SDK方法,需要先发送签名验证wx.config1.小程序和H5互跳注意事项1.【问题描述】wx.miniProgram.navigateTo中url无法跳转问题【问题解决】:app.json中配置的
3、tabBar与 wx.navigateTo中的url引用相同页 面导致首先pages/account/index这个路径在app.json已经存在,也就是当前从H5页 面 window.wx.miniProgram.navigateTo(url)的 url 已经和 app.json 的一样。此 时是不能通过这个方式跳转,而是要改成window.wx.miniProgram.reLaunch(url)总结:如果url在app.json已定义,则使用reLaunch跳转,如果没有,则使用 miniProgram.navigateTo(url)2.【问题描述】在小程序里面跳转到H5协议详情页的时候,
4、进入了系统错误页 (项目里定义好的错误页),当我现在微信公众号打开该协议详情页,此时再从 小程序进入,不会出现。【问题解决】这里我判断是跟登录态有关系,因为我先访问一下公众号,此时浏 览器里有了登录态,所以在小程序里面访问协议详情页不会进入系统错误页。定位问题过程:H5页面是vue页面,先从路由文件/routes/index.js开始 debugger,果然就在登录的js里面找到问题,查看登录的js里面有一个先会登 出的过程,然后再login (这里是因为不同券商的原因,需要logout清除上一个 券商的数据,哈哈,流水账,不然越记越长,不展开咯)在登录logout的过程, 此时该cgi抛出异常,刚好被全局捕获,所以进入了系统错误页。后面的解决方 法,是在登出的时候try catch捕获异常,不要把异常被全局捕获。try await request(logout.cgi) catch(e) console.log(error) 问题2, bugger经常有,遇到了就一个个地看debugger,看错误来源哪里。谨记。