小程序web-view填坑

前言

小程序新出了web-view，正好有一个需求需要做页面跳转，在此记录下过程中发现的填坑

白名单设置

白名单是设置二级域名的，也就是也就说，如果访问的是https://agt.yugi.com下面的地址，就要设置https://agt.yugi.com，而不是https://www.yugi.com,并且这个设置，因此，针对小程序的页面，尽量不要做二级域名，避免设置不过来。而且这个设置似乎不是马上生效的，所以一开始一直提示域名非法。

带参数跳转

因为考虑还会有其他的页面跳转， 就直接做了一个web的页面，带入url即可，然后实际操作中，发现一直白屏，通过数据分析，发现是URL的参数丢失了。
通过调查，发现是我的参数中含有的一些参数在微信传参中会丢失，需要在跳转前将参数转义，使用前在重新转义回去。

传参

toUrl(event) {
    // 打开页面(只能打开白名单的域名)
    var url = event.target.dataset.url;
    if(!url){
      return;
    }
    url = encodeURIComponent(url);
    url = '/pages/web/web?url=' + url;
    wx.navigateTo({
      url: url
    })
  }

---

收参

onLoad: function (options) {
    // 页面渲染后 执行
    var page = this;
    var url = options.url;
    url = decodeURIComponent(url);
    
    // 页面初始化 options为页面
    var newUrl = "https://www.yugi.com";
    if (url.indexOf('http://yugi.com')>-1){
      url = url.replace('http://yugi.com', newUrl);
    } else if (url.indexOf('http://www.yugi.com')>-1) {
      url = url.replace('http://www.yugi.com', newUrl);
    }
    //isPassArea=1&xcx=1
    if (url.indexOf('isPassArea')<0) {
      url = url +'&isPassArea=1';// 二级域名不过滤
    }
    if (url.indexOf('xcx') < 0) {
      url = url + '&xcx=1';// 小程序标识，如果有需要特殊处理，可以用此判断
    }
    if (url.indexOf('flag=1') < 0) {
      url = url.replace('flag=1','flag=2');
    }
    if (url.indexOf('flag') < 0) {
      url = url + '&flag=2';// 取消一键下载
    }
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
      url: url
    }) 
  }

分享

微信不能分享网页，所以，依然是分享这个微信小程序页面，this.data.url在上文中的onload已经设置好了。页面标题暂时没有看到API可以获取，所以略过。

onShareAppMessage(options) {
    var url = this.data.url;
    url = encodeURIComponent(url);
    url = '/pages/web/web?url=' + url;
    // console.log(url);
    return {
      title: 'yugi',
      desc: '',
      path: url
    }
  }

一下列出几个较为完整的代码，便于下次阅读修改

web.js

// pages/web/web.js
Page({
  data: { // 参与页面渲染的数据
    url: ''
  },
  onShareAppMessage(options) {
    var url = this.data.url;
    url = encodeURIComponent(url);
    url = '/pages/web/web?url=' + url;
    return {
      title: 'title',
      desc: '',
      path: url
    }
  },
  onLoad: function (options) {
    // 页面渲染后 执行
    var page = this;
    var url = options.url;
    url = decodeURIComponent(url);
    
    // 页面初始化 options为页面
    var newUrl = "https://www.yugi.com";
    if (url.indexOf('http://yugi.com')>-1){
      url = url.replace('http://yugi.com', newUrl);
    } else if (url.indexOf('http://www.yugi.com')>-1) {
      url = url.replace('http://www.yugi.com', newUrl);
    }
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
      url: url
    }) 
  }
})

web.wxml