E企盈营销工具技术服务商 热线:4006-838-530

微信小程序跳转公众号推文

E企盈直播平台营销卖货系统

注:笔者是自学小程序,自身开发经验不足,代码肯定存在不规范和不足,该博客参考一下就好实现在小程序中,点击某个组件后跳转到公众号的推文。注意前提是需将你的小程序和公众号绑定!才能实现跳转。最终效果: 思想是:先从后台获取数据显示相关推文信息在前端,当点击时跳转到一个新的页面,运用小程序的一个特殊组件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.jsPage({   onLoad: function(options) {     this.setData({      url:options.url   // 通过传参实现跳转公众号推文    })      }, })还有一点需注意的是 web-view组件暂不支持个人类型小程序,可留意官方文档 如果有更好的方法欢迎提出或者发个链接到评论区,共勉,谢谢!

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序跳转公众号推文
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏