博客小程序如何实现对公众号文章进行内嵌浏览?
通过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,
});
}
},
});