前言

小程序新出了web-view，正好有一個需求需要做頁面跳轉(zhuǎn)，在此記錄下過程中發(fā)現(xiàn)的填坑

白名單設(shè)置

白名單是設(shè)置二級域名的，也就是也就說，如果訪問的是https://agt.yugi.com下面的地址，就要設(shè)置https://agt.yugi.com，而不是https://www.yugi.com,并且這個設(shè)置，因此，針對小程序的頁面，盡量不要做二級域名，避免設(shè)置不過來。而且這個設(shè)置似乎不是馬上生效的，所以一開始一直提示域名非法。

帶參數(shù)跳轉(zhuǎn)

因為考慮還會有其他的頁面跳轉(zhuǎn)， 就直接做了一個web的頁面，帶入url即可，然后實際操作中，發(fā)現(xiàn)一直白屏，通過數(shù)據(jù)分析，發(fā)現(xiàn)是URL的參數(shù)丟失了。
通過調(diào)查，發(fā)現(xiàn)是我的參數(shù)中含有的一些參數(shù)在微信傳參中會丟失，需要在跳轉(zhuǎn)前將參數(shù)轉(zhuǎn)義，使用前在重新轉(zhuǎn)義回去。

傳參

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) {
    // 頁面渲染后 執(zhí)行
    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';// 小程序標(biāo)識，如果有需要特殊處理，可以用此判斷
    }
    if (url.indexOf('flag=1') < 0) {
      url = url.replace('flag=1','flag=2');
    }
    if (url.indexOf('flag') < 0) {
      url = url + '&flag=2';// 取消一鍵下載
    }
    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
    this.setData({
      url: url
    }) 
  }

分享

微信不能分享網(wǎng)頁，所以，依然是分享這個微信小程序頁面，this.data.url在上文中的onload已經(jīng)設(shè)置好了。頁面標(biāo)題暫時沒有看到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: { // 參與頁面渲染的數(shù)據(jù)
    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) {
    // 頁面渲染后 執(zhí)行
    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為頁面跳轉(zhuǎn)所帶來的參數(shù)
    this.setData({
      url: url
    }) 
  }
})

web.wxml

<web-view src="{{url}}"></web-view>