测试web-view，实现小程序和网页之间的切换

官方有句提醒：个人类型与海外类型的小程序暂不支持使用

测试条件：

1.小程序后台管理中，进入“开发设置”，设置一个业务域名（注意：不是设置服务器域名）。比如 https://test.XXX.com.cn

2.配置业务域名时，会有如下提醒。按照提醒，将下载得到的校验文件，放到业务域名的根目录下，并确保可以访问到这个文件。

3.将做测试的 html 也提交到业务域名下的服务器。我写的测试代码如下：

<div>
    <h3>这是网页</h3>
    <button id="btn1">跳转到小程序的首页</button>
    <button id="btn2">点击发送数据</button>
    <p>点击第二个按钮后，然后点击小程序的回退箭头，可以获取到来自网页的数据</p>
</div>

　　window.onload = function() {
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        btn1.onclick = function() {
            wx.miniProgram.navigateTo({url: '/pages/index/index'})
        }
        btn2.onclick = function() {
            wx.miniProgram.postMessage({ data: '来自网页的数据' })
        }
    }

4.开发者工具，打开本地测试的小程序。（注意：第一步中提到的小程序，使用它的AppId登录）

编写小程序测试代码，我写的代码如下：

index.wxml中，

<navigator class="link" url="/pages/logs/logs?path=https://test.XXX.com.cn/webViewTest.html">跳转到网页</navigator>

logs.wxml中,

<web-view src="{{path}}" bindmessage="getMsgHandle"></web-view>

logs.js中

Page({
  data: {
    show: true,
    path: ''
  },
  onLoad: function () {
    var that = this;
    that.setData({
      path: that.options.path
    })
  },
  getMsgHandle: function(e) {
    var that = this;
    wx.showToast({
      title: e.detail.data[0],
      icon: 'success',
      duration: 5000
    })
    console.log(e.detail.data)
  }
})

我的测试思路：index.wxml中，点击一个链接，跳转到网页。实际实现是，点击index.wxml中的链接，跳转到logs.wxml，用logs.wxml，呈现要跳转的网页内容。

注意：测试的话，直接在开发者工具中测试，或者扫码测试即可，不用将小程序上传。

最终测试结果：点击小程序内的按钮，跳转到了显示网页的页面，点击网页中的按钮，还能回到小程序的页面。

 

经过研究，个人认为，小程序和网页的跳转，并不是真正意义上的跳转，实际上还是小程序中的页面1跳转到页面2，而页面2包裹的内容是网页而已。

如果，直接通过网页地址访问目标网页，点击目标网页中的按钮，是返回不了小程序的。

 

以上为个人测试得知，如有错误，请指正。谢谢！