微信小程序webView跳转

1、跳转webView页面，并传参数

typescript 复制代码

<button bindtap="goWebView">跳转webView</button>
 
//跳转webview
goWebView(){
    const userId = '20210105175850-1d7a5f0d13_user';
    const path = "wmh5.xxxxx99.com/html/revenueManage"
    wx.navigateTo({
      url: '/pages/webView/webView?userId='+userId+'&path='+path,
    })
},

2、创建一个webView页面并接收传递过来的值

typescript 复制代码

//创建一个webView文件夹，页面内容为下：
<web-view src="{{webUrl}}" ></web-view>
 
//js页面内容
data: {
    webUrl:'',
    userId:''
},
 
onLoad: function (options) {
    console.log({ 'h5传入参数': options })
    // const newUrl = options.path +"?userId="+options.userId;
    const newUrl = 'https://wmh5.xxxxx99.com/html/revenueManage?userId=20210105175850-1d7a5f0d13_user'
    console.log('path: ',newUrl);
    this.setData({
      webUrl:newUrl,
      userId:options.userId
    })
},

3、跳转到webView中的H5页面并获取userId

typescript 复制代码

方法一：获取从小程序传过来的userId （局限于一个参数）
// alert(window.location.href); //获取网址(这里只取到固定的userId)
if (window.location.href.split("?")[1]) {
   let userId = window.location.href.split("?")[1].split("=")[1];
   if (userId) {
      this.userId = userId;
      // alert(userId);// webView中的H5只能通过alert获取日志
      //将用户id存储到缓存中
      window.localStorage.setItem("userId", this.userId);
  }
}
 
方法二：获取url所有的传递值并转化为对象存储 （作用于多个参数传递）
mounted(){
//解析url 
   const urlInfo =  this.parseParam(window.location.href);
   if(urlInfo){ //判断对象是否存在
       if(urlInfo.active){//判断对象的属性值是否存在
            this.tabsCurrent = urlInfo.active;
            console.log('active',urlInfo.active);
        }
        if(urlInfo.buddyId){
             this.buddyId = urlInfo.buddyId;
             console.log('buddyId',urlInfo.buddyId);
        }
   }
}
 
解析url函数(//)
parseParam(url) {
   const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来
   const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中
   let paramsObj = {};
   // 将 params 存到对象中
   paramsArr.forEach(param => {
      if (/=/.test(param)) { // 处理有 value 的参数
           let [key, val] = param.split('='); // 分割 key 和 value
           val = decodeURIComponent(val); // 解码
           val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字
           if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key，则添加一个值
               paramsObj[key] = [].concat(paramsObj[key], val);
           } else { // 如果对象没有这个 key，创建 key 并设置值
               paramsObj[key] = val;
           }
       } else { // 处理没有 value 的参数
           paramsObj[param] = true;
       }
   })
  console.warn('url解析：',paramsObj)
  return paramsObj;
}

4、webView页面之间的跳转与参数获取

typescript 复制代码

（1）跳转其它页面
<a href="../invitedList/index.html">   
     <div class="c-info-label">受邀朋友</div>
</a>
 
<a :href=`../revenueManage/details.html?buddyId=${item.userId}`>
 
 
（2）获取本地缓存userId
const userId = window.localStorage.getItem("userId");
console.log("userId ", userId);
if (userId) {
     this.postData.userId = userId;
}

5、webView中H5页面跳回小程序

typescript 复制代码

（1）引入微信sdk
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
 
（2）跳转到小程序我的等级界面
gotoMyClass() {
     wx.miniProgram.redirectTo({ url: '/pages/myGrades/myGrades' });
},

6、无法打开非业务域名

使用webView嵌套h5需要注意点：

（1）域名必须是https，不然会被拦截

（2）h5页面尺寸必须使用rem单位，不然无法做适配（使用HX开发，可以设置自动转化）

（3）h5页面中的日志要使用 alert() 弹出日志，无法查看 console.log()

（4）h5的跳转h5使用 a标签

（5）h5存储小程序传递过来的 userId等数据使用浏览器缓存存储，不用一个参数到处携带