该文章或问题已被删除

小程序组件 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提供的接口返回小程序页面。 支持的接口有:

接口名说明最低版本
wx.miniProgram.navigateTo参数与小程序接口一致1.6.4
wx.miniProgram.navigateBack参数与小程序接口一致1.6.4
wx.miniProgram.switchTab参数与小程序接口一致1.6.5
wx.miniProgram.reLaunch参数与小程序接口一致1.6.5
wx.miniProgram.redirectTo参数与小程序接口一致1.6.5
wx.miniProgram.postMessage向小程序发送消息1.7.1
wx.miniProgram.getEnv获取当前环境1.7.1


我们需要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)+" "})


 

点赞 0      收藏 0

0 个评论

正在加载...

这里空空如也,快来补一刀!

加载更多

回答问题或评论文章请先 或者 注册