微信小程序web-view跳转到网页

2022-07-19

首先,配置web-view业务域名

  <block wx:for="{{list}}" wx:key="index">
    <view class="wditem" bindtap="gotolink" data-webview="{{item.link}}">
      <image src="{{item.featured_media_src_url}}" class="wdico"></image>
      <view class="textBox">
        <text class="text_name">{{item.title.rendered}}</text>
        <text class="text_content">{{tools.subStr(item.excerpt.rendered,0,30)}}... </text>
      </view>
      <view class="clear"></view>
    </view>
    </block>

在小程序首页index/index.wxml,通过网站api获取了所需展示的文章,循环文章列表,{{item.link}}就是文章url

  gotolink:function(e){
    this.setData({
        weblink:e.currentTarget.dataset.webview
    })
    wx.navigateTo({
      url: '/pages/webview/webview?webview='+this.data.weblink,
    })
  },

index/index.js 获取文章url,并传参到文章详情页面pages/webview/webview

pages/webview/webview.wxml:

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

pages/webview/webview.js:

  onLoad(options) {
        this.setData({
            path:options.webview
        })
    },
相关内容
最新

坚持的力量

wordpress建站,视频剪辑拍摄,动画制作