本文作者:DurkBlue

微信小程序如何实现跳转公众号的推文推荐

DurkBlue 2019-12-30 27216
微信小程序如何实现跳转公众号的推文摘要: 实现在小程序中,点击某个组件后跳转到公众号的推文。注意前提是需将你的小程序和公众号绑定!才能实现跳转。最终效果如图: 思想是:先从后台获取数据显示相关推文信息在前端,当点...

实现在小程序中,点击某个组件后跳转到公众号的推文。


注意前提是需将你的小程序和公众号绑定!才能实现跳转。


最终效果如图:


微信小程序如何实现跳转公众号的推文  第1张


 思想是:先从后台获取数据显示相关推文信息在前端,当点击时跳转到一个新的页面,运用小程序的一个特殊组件web-view跳转到相应的推文。


微信小程序如何实现跳转公众号的推文  第2张


 这里我用的是云开发后台,先配置好数据,将推文链接以及前端要展示的推文相关信息写好


这是第一张图的红框内的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发布,感谢转载需要请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2019-12-30
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享