美文网首页小程序
小程序web-view填坑

小程序web-view填坑

作者: 狂飙的肥蜗牛 | 来源:发表于2017-12-28 09:03 被阅读119次

    前言

    小程序新出了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

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

    相关文章

      网友评论

        本文标题:小程序web-view填坑

        本文链接:https://www.haomeiwen.com/subject/xmlmgxtx.html