uni-app 小程序嵌套h5页面 小程序数据传给H5

### uni-app 小程序嵌套 H5 页面数据传递方法 #### 实现原理 在uni-app的小程序环境中，通过`<web-view>`组件可以加载外部H5页面。为了实现从小程序到H5的数据传输，可以通过URL参数的方式，在加载H5页面时将所需数据作为查询字符串附加到目标网址后面。 #### 代码示例 ##### 小程序端配置 当需要向H5页面传递数据时，可以在设置`src`属性的同时构建带有参数的完整路径： ```html <!-- 在小程序中定义web-view --> <template> <view> <!-- 使用v-bind动态绑定url地址，并附带要发送给H5的数据 --> <web-view :src="'https://example.com/h5page?data=' + encodeURIComponent(JSON.stringify(data))"></web-view> </view> </template> <script> export default { data() { return { // 需要传递至H5的数据对象 data: { key1: 'value1', key2: 'value2' } }; }, }; </script> ``` 上述代码展示了如何利用JavaScript中的`JSON.stringify()`函数序列化复杂类型（如对象），并通过`encodeURIComponent()`编码确保特殊字符不会破坏URL结构[^1]。 ##### 接收方(H5)解析逻辑 对于接收到的请求，H5页面则需读取并解析这些参数: ```javascript // 获取当前页面URL上的query string部分 const queryString = window.location.search; // 解析queryString得到键值对形式的对象 function getQueryParams(qs){ qs = qs.split("+").join(" "); var params={}, tokens, re=/\[(.*?)\]/g, // 匹配[]内的内容用于处理数组型参数 m; tokens=qs.substring(1).split("&"); for(var i=0;i<tokens.length;i++){ var p=tokens[i].split('='); if (m=re.exec(p[0])){ var targetKey=m[1]; if(!params[p[0]]){ params[p[0]]=[]; } params[p[0]][targetKey]=decodeURIComponent((p[1]+''==='true'||p[1]+''==='false')?(p[1]==='true'?true:false):p[1]); }else{ if (!/[^\w\-\.]/.test(p[0])){ params[p[0]]=decodeURIComponent(p[1]); } } } try { // 如果是json格式，则尝试反序列化成js对象 const jsonDataStr=params['data']; delete params['data']; // 移除原始未解码版本 Object.assign(params, JSON.parse(decodeURIComponent(jsonDataStr))); } catch(e){} return params; } console.log('Received Data:', getQueryParams(queryString)); ``` 此段脚本负责提取并转换来自小程序的输入信息，使其能够被H5应用正常理解和使用[^3]。