小程序组件 web-view 的实例使用

例如首页是 index 

index.wxml

<web-view src="https://mp.weixin.qq.com/" bindload="bindload" binderror="binderror"></web-view>

index.js

Page({
  onLoad: function (options) {

    wx.showLoading({
      title: '加载中...',
      mask: true
    });

  },
  bindload: function (e) {
    //页面加载成功
    wx.hideLoading();
  
  },
  binderror: function (e) {
    //页面加载失败
    wx.hideLoading();

  }
})

以上代码，就可以完成一个简单的打开H5网站浏览了。

H5混合+小程序开发为了有更好的体验效果，我们可以对H5网站适当修改下，让它打开页面体验效果更好些。

传统的H5网站打开新页面，是通过 a 标签跳页面的，如果使用a标签打开页面，返回会导致页面被重新加载，没办法打开一个新的 webview 窗体。

目前微信支持H5页面 对小程序进行操作，只需要在H5页面引入 JSSDK 1.3.2

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

<web-view/>网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。 支持的接口有：

我们需要H5页面 引入 JSSDK 1.3.2 后，然后再把 a 标签的href 屏蔽掉，禁止它跳转。

然后我们再在小程序中，建一个通用的页面, 例如：page

1.在 page.wxml 页面中

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

2. 在page.js 中

Page({
  onLoad: function (options) {
    
    wx.showLoading({
      title: '加载中...',
      mask: true
    });

    let url = decodeURIComponent(options.url);
    //动态打开新的页面
    this.setData({
      url: url
    });
  

  },
  bindload: function (e) {
    //页面加载成功
    wx.hideLoading();
  
  },
  binderror: function (e) {
    //页面加载失败
    wx.hideLoading();

  }
})

3. 在H5页面中, 这样打开一个新的 webview 窗口，加载一个新的页面, 比a 标签跳转式，有更好的体验效果

wx.miniProgram.navigateTo({url:"pages/page/page?url="+encodeURIComponent(""http://www.html5-app.com/?/publish/article/90)+" "})