小程序通过 url 向内嵌 H5 传参注意事项
当在小程序中通过 url 向 <web-view> 内嵌的 H5 传参时,当包含特殊字符时需要进行编码处理(不然 <web-view> 中是拿不到值的,小程序竟然没有错误提示...):
1、test.wxml
<view> <web-view src="{{url}}"></web-view> </view>
2、test.js,对参数进行编码处理:
Page({ /** * 页面的初始数据 */ data: { url: 'https://xxx.xx.com' }, /** * 生命周期函数--监听页面加载 */ onLoad: function(option) { let loginName = encodeURI(wx.getStorageSync('loginName')); try { //相关操作 } } catch (e) { wx.navigateTo({ url: '../login/login' }) } let pageUrl = encodeURI(option.url); this.setData({ url: `${this.data.url}${pageUrl}loginName=${loginName}` }); }, onReady: function() { }, onShow: function(option) { } })
3、H5 端获取参数时需要进行解码处理。
//获取地址栏参数 getQueryString: (name) => { let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); let r = window.location.search.substr(1).match(reg); if (r != null) { return unescape(decodeURI(r[2])); return null; } }