小程序通过web-view向h5页面传参(数组格式)及h5页面接收代码如下:
1、我是将数组先JSON.stringify()以后,再拼接地址栏传到h5的,然后在h5接收以后再JSON.parse()转成数组;如果是单纯的字符窜就没必要转了;
2、如果传递的参数中包含中文需要先编码encodeURIComponent(),因为小程序再跳H5的时候自动做了编码,所以如果H5页面在小程序中不需要编码,但是如果嵌套在App中的话,App需要先编码;然后在H5接收的时候解码decodeURIComponent();(只要地址栏存在中文,H5页面就需要解码)
代码如下:
1 // web-view页面 2 Page({ 3 /** 4 * 页面的初始数据 5 */ 6 data: { 7 src: ‘‘, //h5页面链接 8 }, 9 /**10 * 生命周期函数--监听页面加载11 */12 onLoad: function (options) {13 et params = JSON.parse(options.params);14 console.log(‘传过来的数据‘, params)15 let src = ‘http://iservice.xxxxx.com.cn/upload/yj_fuWuXieYi.html?schoolName=‘ + (params.schoolName) + ‘salaryList=‘ + JSON.stringify(params.salaryList) + ‘&feeList=‘ + JSON.stringify(params.feeList);16 this.setData({17 src: src18 })19 }20 },21 })
1 // H5页面 2 <script> 3 // 获取地址栏参数 4 function getUrlSearch(name) { 5 // 未传参,返回空 6 if (!name) return null; 7 // 查询参数:先通过search取值,如果取不到就通过hash来取 8 var after = window.location.search; 9 after = after.substr(1) || window.location.hash.split(‘?‘)[1];10 // 地址栏URL没有查询参数,返回空11 if (!after) return null;12 // 如果查询参数中没有"name",返回空13 if (after.indexOf(name) === -1) return null;14 var reg = new RegExp(‘(^|&)‘ + name + ‘=([^&]*)(&|$)‘);15 // 当地址栏参数存在中文时,需要解码,不然会乱码16 var r = decodeURIComponent(after).match(reg);17 // 如果url中"name"没有值,返回空18 if (!r) return null;19 return r[2];20 }21 22 // 获取参数23 let _schoolName = getUrlSearch("schoolName") ? getUrlSearch("schoolName") : ‘‘,24 _salaryList = getUrlSearch("salaryList") ? getUrlSearch("salaryList") : [],25 _feeList = getUrlSearch("feeList") ? getUrlSearch("feeList") : [];26 _salaryList = JSON.parse(_salaryList); //再转换成数组27 _feeList = JSON.parse(_feeList); //再转换成数组
28 console.log(‘学校名称‘, _schoolName)29 console.log(‘学生薪资列表‘, _salaryList)30 console.log(‘服务费列表‘, _feeList)31 32 // 获取页面元素33 let _yfql_school = document.querySelector(‘.yfql_school‘),34 _stu_table = document.querySelector(‘.stu_table‘),35 _ser_table = document.querySelector(‘.service_table‘);36 37 // 页面赋值38 _yfql_school.innerHTML = _schoolName ? _schoolName : ‘    ‘;39 // 实习生工作补助,我这里是表格,动态生成的元素样式不起作用,需要在生成元素的时候再添加样式40 for (let i = 0; i < _salaryList.length; i++) {41 let tr = document.createElement("div");42 tr.className="stu_td1 flex-x";43 tr.style = "height:0.6rem;border-bottom:0.01rem solid #333";44 _stu_table.appendChild(tr);45 for (let k in _salaryList[i]) {46 let td = document.createElement("div");47 td.className = "flex-x";48 td.style = "width:50%;height: 0.6rem;border-right: 0.01rem solid #333;justify-content: center;box-sizing:border-box;"49 tr.appendChild(td);50 td.innerHTML = (k == "salary") ? `不低于满勤月${_salaryList[i][k]}元` : _salaryList[i][k]51 }52 }53 54 </script>