微信小程序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>
<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>
  <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
index/index.wxml,通过网站api获取了所需展示的文章,循环文章列表,
{{item.link}}
{{item.link}}就是文章
url
url

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

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

pages/webview/webview.wxml:
pages/webview/webview.wxml:

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

pages/webview/webview.js:

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

坚持的力量

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