小程序通过 url 向内嵌 H5 传参注意事项

时间:2021-10-24 01:13:21

当在小程序中通过 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;
        }
    }