小程序webview我爱死你了 小程序webview和H5通讯

webview 我 *

众所周知,将已上线的H5页面转换为小程序,最快的方法是通过WebView进行套壳。然而,在这个过程中,我们需要将H5页面的登录和支付功能迁移到小程序版本。这意味着H5页面需通过特定的方式与小程序进行通信,以实现如支付等关键功能。

因此需要了解H5与WebView之间的通讯方式,以确保数据的顺利传递和功能的无缝对接。

找了很久发现H5与WebView的通讯方式主要有两种

  1. 小程序通过改变H5地址栏携带参数
  2. WebSocket实时通讯

而webview自带的bindmessage、bindload、binderror,触发条件只有小程序后退、组件销毁、分享、复制链接,给我卡的死死的,只好选择了第一种方式,WebSocket虽然可以实现实时通讯,但会增加额外的开销,不符合我的需求。

这里的URL域名必须添加到 小程序后台中-管理-业务域名内,否则会报无法打开 xxx 页面,个人小程序是没有这个选项的,需要申请成企业小程序

小程序向H5通讯

小程序端

js 复制代码
<view class="content">
		<web-view :src="url"></web-view>
	</view>

H5端

js 复制代码
// 判断当前页面的 URL 是否包含 'userInfo',用于识别是否来自小程序端
if (window.location.href.includes('userInfo')) {  
    // 匹配 URL 中的 userInfo 参数
    const userInfoRegex = /userInfo=([^]*)/; 

    // 解码
    const decodedUrl = decodeURIComponent(window.location.href); 

    // 使用正则表达式从解码后的 URL 中提取参数值
    const userInfoMatch = decodedUrl.match(userInfoRegex);
    let auth_token =  userInfoMatch[1];
    localStorage.setItem('loc_token', auth_token);
}
H5向小程序通讯

小程序端

js 复制代码
onMounted(() => {
	const paymentData = getCurrentPages().pop().options.paymentData // 获取当前页面参数
	submitInfo(paymentData);
	});

H5端

js 复制代码
 wx.miniProgram.navigateTo({
          url: `/pagesMember/pay/pay?paymentData=${payInfo.value}`,
        })

通讯限制也就算了,导航栏不能自定义,还不让去掉,这让自带导航栏显得极其突兀!我 * !!!

navigationStyle: custom对 web-view 组件无效 一句话干碎我的摸鱼梦,领导要把那块做成透明的,没办法只好把常用页面重构, but小程序不支持elementPlus啊,太爽了家人们。

相关推荐
西西学代码1 分钟前
Flutter---坐标网格图标
前端·javascript·flutter
用户21411832636022 分钟前
假期值班,困在形式主义里的“假坚守”
前端
需要兼职养活自己7 分钟前
react【portals】与vue3【<Teleport>】
前端·react.js
用户47949283569158 分钟前
React 19.2 重磅更新:终于解决 useEffect 依赖数组难题
前端·react.js
梦里小白龙14 分钟前
前端视频课程添加水印,全屏不消失解决方法
前端·音视频
我命由我1234519 分钟前
PDFBox - PDDocument 与 byte 数组、PDF 加密
java·服务器·前端·后端·学习·java-ee·pdf
@PHARAOH20 分钟前
HOW - prefetch 二级页面实践
前端·javascript·react.js
EF@蛐蛐堂22 分钟前
WUJIE VS QIANKUN 微前端框架选型(一)
前端·vue.js·微服务·架构
咚咚咚小柒29 分钟前
【前端】用el-popover做通用悬停气泡(可设置弹框宽度)
前端·javascript·vue.js·elementui·html·scss
Ares-Wang31 分钟前
CSS3》》 transform、transition、translate、animation 区别
前端·css·css3