小程序嵌套H5跳转(web-view)问题解决

这篇具有很好参考价值的文章主要介绍了小程序嵌套H5跳转(web-view)问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目场景:

项目场景:小程序内嵌h5页面时,点击某处需要跳转进去对应的页面,进行之后的业务逻辑。贴图两张:第一张为pc端小程序模拟器点击跳转时的截图,第二张为手机端测试接收的入参截图(第二张我是拿alert断点去查入参的)

小程序嵌套H5跳转(web-view)问题解决
小程序嵌套H5跳转(web-view)问题解决

解决方法

小程序嵌套H5跳转(web-view)问题解决

1、建立好容放h5的容器web-view文件,然后就写小程序的跳转逻辑

	xiang_q: function(event) {
		var code = event.currentTarget.dataset['name'];
		wx.navigateTo({
			url: '/pages/zong_customer/xiangqing/index'   //跳转到h5页面的容器路径
		})
		wx.setStorageSync('customercode', code);    //跳转h5时想传的参数,拿Storage存起来
	}

小程序嵌套H5跳转(web-view)问题解决
小程序嵌套H5跳转(web-view)问题解决

2、小程序容器wxml+js

<web-view src="{{http_s}}"></web-view>
Page({
  /**
   * 页面的初始数据
   */
  data: {
    http_s:''
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
	var datalist = wx.getStorageSync('datalist')
	var mobile = datalist.phone
	var codeVal = wx.getStorageSync('customercode')
	//地址为你要跳转的h5页面地址,后边拼接传递的参数
    that.setData({
	  http_s: "https://testcar.chinacoal-ins.com/enterprise?customercode=" + codeVal + "&mobile=" + mobile + "&flag=1" + ""
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
})

3、截止为止跳转逻辑基本完善,剩下的只需要在h5程序里接收入参做之后的业务操作即可。

但是目前你会发现,拿微信开发者工具测的时候就会出现文章开头的第一张图片,显示无法获取用户身份。此时我知道你很急,但是你先别急。
你可以去微信公众平台去添加web开发者工具,具体操作百度报错弹窗即可。
当然也可以跟我一样,去h5页面写好获取参数的逻辑,直接拿真机测不香么,相信自己写的一定没问题。

4、h5页面获取获取参数

//我的h5页面是拿vue3+vant写的,大体逻辑就是window.location.search获取url地址的信息并解析
 const getUrlParam = (name) => { //拿方法去接收要解析的字段并返回
      const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      const result = window.location.search.substr(1).match(reg);
      return result ? decodeURIComponent(result[2]) : null;
};
created() {
    let customercode =  this.getUrlParam ("customercode");   //获取customercode
    let flag=  this.getUrlParam ("flag");    //获取flag
    let mobile =  this.getUrlParam ("mobile");    //获取mobile
},

问题:
遗留难点,从h5页面怎么跳回小程序呢?
方法1:在小程序的web-view页面添加一个悬浮在最顶层的按钮,点击按钮跳转回小程序(web-view自动撑满整个屏幕,所以需要使用cover-view标签包裹)但是包裹后的button不支持点击事件,也可以使用navigator标签写跳转地址。可自行查阅相关资料进行尝试。
方法2:在h5页面写跳转回小程序的方法,但是需要引入https://res.wx.qq.com/open/js/jweixin-1.3.2.js,具体也可查询资料进行尝试。

后续会再出一篇文章讲解上述两种方法的使用情况
但是两种情况都会跟小程序顶部的导航栏返回存在兼容性的问题。如果大家有更好的解决方法,欢迎评论讨论。文章来源地址https://www.toymoban.com/news/detail-507825.html

到了这里,关于小程序嵌套H5跳转(web-view)问题解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序web-view环境下H5跳转小程序页面方法

    一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转。但是web-view页面要想通过手指触碰返回小程序页面,就无法使用超级链接a标记了。那么这个问题应该如何解决呢? 首先需要在H5页面中引入JSSDK,它可以让H5页面的js文件执

    2024年01月17日
    浏览(73)
  • 微信小程序使用web-view跳转网页解决跳转出现空白或者被拦截问题

    首先,在小程序的页面布局文件中添加web-view组件的引用 给大家先画个草图大家就明白了 具体操作可以私信我,我手把手教你解决

    2024年04月23日
    浏览(63)
  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?

     微信小程序appId查看方法: 1)有后台登录权限的情况下:登录微信公众平台后, 微信公众平台 微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。 https://mp.weixin.qq.com/ 点击右上角logo,在“帐号信息”中找到AppID(小程序ID) 2)没有后台登录权

    2024年02月11日
    浏览(81)
  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?

    1)找到企业ID,登录 企业微信 企业微信 https://work.weixin.qq.com/wework_admin/loginpage_wx  2)找到接入链接  功能-客服-微信客服 微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。 https://mp.weixin.qq.com/

    2024年02月11日
    浏览(68)
  • 小程序使用web-view无法打开该H5页面不支持打开的解决方法

    我在 正式上线版 小程序使用  web-view  组件测试时提示:“无法打开该页面,不支持打开 https://xxxxxx,请在“小程序右上角更多-反馈与投诉”中和开发者反馈。” 奇怪的是,“ 真机调试”、“开发模式 ”都可以使用  web-view  组件访问我需要的路径。只有“体验版”、“线

    2024年02月04日
    浏览(48)
  • 微信小程序web-view跳转

    h5项目中跳转外部连接可使用的web-view标签解决 官网连接:web-view | 微信开放文档 1.添加事件 2.新页面中的跳转链接(一行即可,默认会会自动铺满整个小程序页面) src就是路径,写需要跳转的网页地址即可! 3.配置路由,app.jason中 4.小程序后台配置域名 开发管理=开发设置=业务域名中

    2024年02月11日
    浏览(69)
  • web-view往h5传参及传参乱码问题

    1、微信端的操作 往wxml中配置web-view 并在对应js中动态设置路径的参数 在需要的地方修改其路径参数 2、h5端(接受上面传进来的参数) 注:这里建议如果h5是vue项目的话,可以本地映射一个地址出去。在vue.config.js下配置devServer--host设置为本机ip地址,接着小程序接入该地址用

    2024年02月09日
    浏览(39)
  • 微信小程序组件、web-view、h5之间交互

    目录结构 小程序 /pages/index/index.wxml /pages/index/index.js /pages/index/index.json 组件 /component/index-page/index.wxml /component/index-page/index.js /component/index-page/index.json web-view /pages/web/web.wxml /pages/web/web.js h5

    2023年04月16日
    浏览(76)
  • 支付宝小程序 组件 web-view h5交互

    目录结构 支付宝小程序 /pages/index/index.axml /pages/index/index.js /pages/index/index.json 组件  /component/index-page/index.axml  /component/index-page/index.js   /component/index-page/index.json web-view /pages/web/web.axml /pages/web/web.js h5

    2024年02月13日
    浏览(45)
  • 小程序使用web-view内嵌跳转另一个小程序

    1、配置需要跳转的小程序地址和参数,直接跳转 2、新建一个h5Pages.vue文件使用web-view内嵌需要跳转的小程序界面 html部分: js部分: 3、可能需要对方小程序配置安全域名

    2024年02月09日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包