摘要：
实现在小程序中，点击某个组件后跳转到公众号的推文。注意前提是需将你的小程序和公众号绑定！才能实现跳转。最终效果如图： 思想是：先从后台获取数据显示相关推文信息在前端，当点... 实现在小程序中，点击某个组件后跳转到公众号的推文。
注意前提是需将你的小程序和公众号绑定！才能实现跳转。
最终效果如图：
思想是：先从后台获取数据显示相关推文信息在前端，当点击时跳转到一个新的页面，运用小程序的一个特殊组件web-view跳转到相应的推文。
这里我用的是云开发后台，先配置好数据，将推文链接以及前端要展示的推文相关信息写好
这是第一张图的红框内的wxml代码：
<view class='allContainer' wx:for="{{photoTweets}}" bindtap="toPhotoTweets" data-id='{{index}}'>
<view class='containerView'>
<view class='containerText'>
<view class='title'>{{item.title}}</view>
<view class='content'>{{item.content}}</view>
</view>
<image class='image' src='{{item.photo}}' mode='widthFix'></image>
</view>
<view class='solidView'><view class='b'></view></view>
</view>js代码：
/**
* 从云开发数据库中获取推文
*/
getPhotoTweets: function () {
var that = this
db.collection('photoTweets').get({
success(res) {
that.setData({
photoTweets: res.data.reverse(), // 使最新推文在上面
})
}
})
},
/**
* 公众号推文跳转
*/
toPhotoTweets: function (e) {
var id = e.currentTarget.dataset.id; // 获取点击的推文的数组下标
var url = this.data.photoTweets[id].url; // 通过id判断是哪个推文的链接
//跳转并传参
wx.navigateTo({
url: '/pages/showTweets/showTweets?name=photoTweets&url=' + url,
})
},
.allContainer{
margin: 45rpx;
}
.containerView{
display: flex;
}
.containerText{
flex: 1;
}
.content{
color: #888;
margin-top: 30rpx;
}
.title{
font-size: 35rpx;
font-weight:500;
}
.image{
width: 200rpx;
height: 200rpx;
margin-top: 8rpx;
}
.b{
margin-top: 20rpx;
height: 1rpx;
width: 80%;
background-color: rgb(245, 241, 241);
}
之后重点来了，前面说过要跳转需在新页面用web-view组件，跳转到新页面：
<!--pages/showPhoto/showPhoto.wxml-->
<web-view src="{{url}}"></web-view>
// pages/showPhoto/showPhoto.js
Page({
onLoad: function(options) {
this.setData({
url:options.url // 通过传参实现跳转公众号推文
})
},
})还有一点需注意的是 web-view组件暂不支持个人类型小程序，可留意官方文档
此篇文章由DurkBlue博客申请发布，转载吧请注明来处
