博客小程序如何实现对公众号文章进行内嵌浏览,web-view使用
2024-11-02 08:58 阅读(189)

博客小程序如何实现对公众号文章进行内嵌浏览?


通过web-view承载网页的容器。会自动铺满整个小程序页面。


文章列表页


list.wxml

<view wx:for="{{articleList}}" wx:key="index" catchtap="goToDetailFunc" data-url="{{ item.url}}">
  <van-row>
    <van-col span="20">
      <view class="name">
        {{ item.title }}
      </view>
      <view class="text">
        浏览量 {{ item.viewers }}
      </view>
    </van-col>
    <van-col span="4">
      <van-icon name="arrow" class="you-arrow" />
    </van-col>
  </van-row>
</view>


<view class="text-center text-gray" catchtap="">
  版权所有 ©木番薯科技 [公众号]
</view>

list.js


goToDetailFunc(event){
    const { url } = event.currentTarget.dataset;
    wx.navigateTo({
      url: `../web/index?url=${url}`,
    });
}

文章详情页


detail.wxml

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

detail.wxss


web-view{
  width: 100%;
  height: 100%;
}

detail.js


const app = getApp();
let that = null;
Page({
  onLoad(options) {
    that = this;
    if (options.url != null) {
      this.setData({
        webUrl: options.url,
      });
      if (options.title != null) {
        wx.setNavigationBarTitle({
          title: options.title,
        });
      }
    } else {
      wx.navigateBack({
        delta: 1,
      });
    }
  },
});