小程序焦点图跳转到H5解决方案

一、先解决焦点图的点击事件
wxml部分

<swiper indicator-dots='true' 
    indicator-active-color='#ff5777'
    autoplay='true'
    circular='true'
    interval='5000'
    class='swiper'>

<block wx:for="{{bannerList}}" wx:key="index">

<swiper-item>
  <image class="swiper-image" src="{{item.img_url}}" data-id="{{item.img_id}}" data-url="{{item.img_path}}" bindtap="swipclick" mode='scaleToFill'/>
</swiper-item>

</block>
</swiper>

js部分

    swipclick:function(event){
  console.log(event)
  let item_url =event.currentTarget.dataset.url // 页面跳转地址
  let tolink  = '../../pages/h5view?url='+encodeURIComponent(item_url);
  wx.navigateTo({
    url: tolink,
  })
  console.log('嘿嘿')
},

二、制作一个空白page承载URL的加载内容
我这里在page/h5view创建了一个page
h5view.js在

/**

• 生命周期函数--监听页面加载
  */

onLoad: function (options) {

  let now_url =decodeURIComponent(options.url);
  //获取url内容
  url:now_url ,
  this.setData({
      url: now_url,
  })

},

这里接收从navigateTo过来的参数

然后渲染到wxml里

<view class="container">

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