文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

小程序通过webView打开H5页面并传参(包含webView业务域名配置)、H5页面实现返回小程序并实现传参

2023-08-16 17:29

关注

小程序内嵌webview实现跳转、传参
1、小程序通过webView打开H5页面并传参
2、H5接收小程序传参,H5返回小程序并实现传参,小程序接收H5传参


一、小程序通过webView打开H5页面并传参

在小程序中一般通过webview打开H5页面
常见问题:
1、小程序通过webview打开H5页面,需要配置业务域名,需要在小程序公众平台配置业务域名
2、在小程序中打开H5页面时,是使用微信内置浏览器打开的;所以最常见的问题是,页面打开后,微信内置浏览器的缓存清除不掉,导致小程序打开H5页面内容不更新。针对这个问题可以采取H5链接。

1、业务域名

在这里插入图片描述

微信开发者工具,可以开启不校验业务域名,方便测试使用

在这里插入图片描述

手机调试可以开启开发者模式,不校验业务域名,方便测试

在这里插入图片描述
小程序项目上线前,一定要配置业务域名,配置业务域名
业务域名配置方法:
(1)、打开小程序公众平台
在这里插入图片描述
在这里插入图片描述

(2)、配置业务域名,需要往域名根目录下放配置文件,然后校验

在这里插入图片描述

2、在小程序中打开H5页面,并解决缓存无法清除问题

方法:通过链接后面拼接时间戳,让链接每次加载都是不同的链接,可以解决微信内置浏览器缓存无法清除问题


二、H5接收小程序传参,H5返回小程序并实现传参,小程序接收H5传参

1、在H5vue页面,created () 方法中接收小程序传参
  created () {    this.mobileMode = this.$route.query.mobileMode    this.mobileType = this.$route.query.mobileType    this.code = this.$route.query.Code    this.appid = this.$route.query.appId  },
2、H5返回小程序,需要安装微信sdk
 npm install weixin-js-sdk –save

在页面中引入wxsdk

import wx from 'weixin-js-sdk'

在这里插入图片描述

在成功回调方法使用wxsdk方法实现H5返回小程序并传参
注意:如果参数比较多的时候,可以转成JSON格式传过去

const personForm = JSON.stringify(this.personList)wx.miniProgram.navigateTo({  url: '/pages/my/load?personForm=' + personForm, // 小程序地址  success () {    console.log('question success')  },  fail (error) {    console.log(error)  }})
3、小程序中接收H5返回传参,在小程序onLoad中接收
onLoad(option) {this.personData = JSON.parse(option.personForm);},

来源地址:https://blog.csdn.net/m0_47791238/article/details/130653700

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯