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

注：笔者是自学小程序，自身开发经验不足，代码肯定存在不规范和不足，该博客参考一下就好

完整项目代码：https://github.com/zim-keavin/wxapp-cloud-demo

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

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

最终效果：

思想是：先从后台获取数据显示相关推文信息在前端，当点击时跳转到一个新的页面，运用小程序的一个特殊组件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 = thisdb.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组件暂不支持个人类型小程序，可留意官方文档

如果有更好的方法欢迎提出或者发个链接到评论区，共勉，谢谢！

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

微信小程序跳转公众号图文内容
显示公众号推文 <web-view src="http://....."></web-view>  web-vi ...
微信小程序跳转公众号
长按识别跳转步骤: 新建一个页面使用web-view组件的src链接到公众号编辑好的一篇带有公众号的二维码的文章微信规则只有小程序关联的公众号里的文章可以长按识别二维码 <template& ...
微信小程序消息从公众号推送
2020.06.05更新新的一年认证续费只需要续费公众号. 小程序可以自动关联认证. 一定要记得!!!!!!! ------------------------------------------- ...
微信小程序跳转公众号链接
小程序跳转微信公众号文章,是通过web-view实现的. 1.web-view会默认自动打开所跳转的页面,但我们一般项目需求是点击某一按钮或下一步进行跳转,所以在小程序中我们需要新建一个页面来承载we ...
微信小程序跳转公众号
1.在wxml中绑定跳转链接事件 <view bindtap="navigateToURL" data-url="{{item['url']}}" dat ...
微信小程序跳转公众号（引导关注）之使用公众号消息
1.首先在微信公众号后台发送一条消息,这条消息你可以定向发送给自己看到就行.如图: 内容里面放生产的公众号二维码:微信会提示你是否生产这个跳转连接,还是只是放二维码 2:第二步在小程序里面使用 s ...
微信小程序跳转公众号文章 web-view方式
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.在微信公众号里面关联小程序二.在小程序里面关注微信公众号三.使用公众号来发布文章前言提示:这里可以添加本文 ...
微信小程序跳转公众号文章非web-view
之前公司有个需求,非要让从小程序直接跳转到h5页面但是还不能用web-view 是实现,于是乎较劲脑汁,查阅各种论坛,依然一无所获,就当准备放弃了就去github 发现了一个类似的,于是就研究了 ...
微信小程序跳转公众号h5页面
小程序提供了web- view组件进行用来内嵌网页根据限制说明准备域名即可,开发阶断可以使用http的域名,在开发者工具中勾选不验证https证书即可,发布上线时必须使用https的域名. 同时需要 ...

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

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

最新文章

热门文章