小程序-<web-veiw>的使用（历史页面返回问题）

小程序官方文档真是不敢恭维啊，<web-view>的坑很多，而且网上的资料也是少之又少，决定写一下<web-view>的使用。

<web-view>的基本使用

<web-view>组件的提供的两个属性：
1.src属性 : 向 <web-view> 传递链接和参数；
2.bindmessage属性：页面通过该属性向小程序传递数据,从而实现小程序和网页的通信；
了解<web-view>更多信息
<web-view>使用时的特性：
1.web-view 组件是一个可以用来承载网页的容器，每个页面只能有一个<web-view/>，<web-view/>会自动铺满整个页面，并覆盖其他组件（除系统的navigationbar和tabbar）；
2.如果里边有使用其他基础组件，那这些组件将被<web-view>组件覆盖；
3.你的主/子域名都需要添加到“微信公众平台->设置->开发设置->业务域名”里边（一个账号下业务域名允许添加20个）；
4.在iOS中，若存在JSSDK接口调用无响应的情况，可在<web-view/>的src后面加个“#wechat_redirect”解决;
5.个人类型与海外类型的小程序暂不支持使用;
src属性的使用

// index.wxml 代码如下：

<web-view src='https://baidu.com'></web-view> // 这里的链接也可以改成动态的

运行以上代码即可查看加载网页效果。

注意：在应用中我们有时会动态去绑定参数，然而坑就有可能出现了。动态绑定参数的方法有两种：

我们一般情况下会想到可以通过url查询字符串的方式给页面传值，也就是直接使用 Mustache 语法（双大括号）将变量包起来放在src属性的字符串链接后边直接拼接上，比如我们要传一个“id”参数，代码如下：

<web-view src='https://baidu.com?id={{id}}'></web-view>

然而这样做，你可能就掉进了坑里，尽管看上去没什么问题，但是安卓手机有很大概率获取不到我们传过去的参数值，因为网页加载时src属性可能是这样的“https://baidu.com?id=”,导致网页中js不能通过解析url得到小程序传过来的“id”。所以，
2.正确的动态传参方法：在index.js文件中，将想要传递的参数和链接拼接完成，然后通过setData()方法更新页面链接，达到动态传参的效果，代码如下：

// index.js
Page({
  data: {
    url: "",
  },
  
  onLoad: fucntion(options) {
    let vId = options.id; // 上个页面传递过来的id
    let tempUrl = `https://baidu.com?id=${vId}`;
    this.setData({
      url: tempUrl,
    });
  },
})

bindmessage属性的使用
注意：1.该属性需要与H5页面中的script配合使用
2.发送消息时传参问题：传参时要选择下图中打✅号的那种方式，不可以使用打❌号的方式，否则获取不到数据。

屏幕快照 2018-05-23 上午11.06.59.png

// H5页面中javascript代码如下：
<!-- 引入小程序提供的JS -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<!-- javascript中调用小程序提供的api -->
<script>
  // 调用wx发送消息方法
  wx.miniProgram.postMessage({ data: {foo: 'bar'} }) // 
</script>

// index.wxml代码如下：
<web-view src='{{lotsUrl}}' bindmessage='msgHandle'></web-view>

// index.js代码如下：
Page({
  // 消息接收处理方法
  msgHandle: function(e) {

  }
}

<web-view>页面导航问题（历史页面返回）

小程序中web页面导航返回按钮问题的解决方案有两种，第一种是通过系统的NavigationBar自身的返回按妞，这种是小程序自带的返回历史页面的方式，第二种是使用JSSDK 1.3.2提供的接口返回。这里只讲一下第一种方法，第二种方法暂时未实现。

通过系统的NavigationBar自身的返回按妞，实现网页返回历史页面功能
需要在加载<web-view>页面时，前面还有一个页面【这个页面可以是一个空白页面（想象成一个虚拟页面），或者是一个实际存在页面】，此页面用于push出<web-view>页面，只有这样才能使用NavigationBar自身的返回按妞，实现网页返回历史页面功能，否则这种方法不适用你的项目。

前一个页面是一个实实在在的有内容的页面，通过其中某个按钮push出要加载的<web-view>页面。只需要在按钮的事件方法里面执行如下代码即可：

let vId = '123'; // 这里是获取到的id信息
wx.navigateTo({
  url: "../lots/lots?id=" + vId, // 拼接传参到下个页面
});

如果要加载的<web-view>页面就是首页，那么需要添加一个空页面（虚拟页面）来充当底层首页，然后进来首页立马push出<web-view>页面，代码如下：

假设index页面为首页（空白页/虚拟首页），lots页面为<web-view>页（实际上的首页）

// app.js 代码如下：
App({
  data: {
    webviewIsShowed: false // 用来标记lots页面是否已经显示过了
  },
  onHide() {
    this.data.webviewIsShowed = false;  // 小程序退出时，将变量置为初始值
  },
})

// index.js 代码如下：

// 获取实例变量
var app = getApp();

Page({
    onShow() {
        // 如果已经显示过lots页了，则执行后退操作，否则就跳到lots页。（后退到lots页最后一级再点后退按钮将退出小程序）
        if (!app.data.webviewIsShowed) {
            wx.navigateTo({
                url: '../lots/lots'
            })
        } else {
            wx.navigateBack({
                delta: 1
            });
        }
    }
})

// lots.wxml 代码如下： 
<web-view src="https://baidu.com"></web-view>

// lots.js 代码如下：

// 获取实例变量
var app = getApp();

Page({
    onShow() {
        app.data.webviewIsShowed = true; // 修改webviewIsShowed的值，标记已经显示过web-view页了
    }
})

通过以上各页代码的设置就可以实现历史页面返回的功能。

<web-view>页面设置了分享功能注意事项
注意：（切记）如果你在<web-view>页面设置了分享功能，那么你需要在转发给朋友的时候，将转发页面的地址改为首页，而不是默认当前页的地址；如果不更改，你的好友打开的时候将没有返回按钮和返回历史页面的功能，因为他们打开的是lots页面而不是index页面。

// lots.js 代码如下：

// 获取实例变量
var app = getApp();

Page({
    onShow() {
        // 显示转发菜单
        wx.showShareMenu({
            withShareTicket: true
        });

        app.data.webviewIsShowed = true; // 修改webviewIsShowed的值，标记已经显示过web-view页了
    },
    onShareAppMessage() {
        return {
            title: '分享标题',
            path: '/pages/index/index' // 分享出去后打开的页面地址
        }
    },
})

参考文章：
微信小程序-<web-view>
WTF小程序之<web-view>
解决微信小程序<web-view>组件所在页面无返回按钮的问题