美文网首页F2e踩坑之路
在微信公众平台前端网页上添加分享按钮

在微信公众平台前端网页上添加分享按钮

作者: 人类进化又没带我 | 来源:发表于2017-10-26 10:13 被阅读75次

微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?

今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈,关注微信号等按钮。

微信内嵌浏览器

通过 Mac 远程调试 iPhone 上微信自己的网页,我们可以发现微信内嵌浏览器定义了一个私有 JavaScript 对象:WeixinJSBridge,通过操作这个对象的相关方法可以实现分享到微信朋友圈,和判断一个微信号的关注状态以及实现关注指定微信号等功能。

function WeiXinShareBtn() {

if (typeof WeixinJSBridge == "undefined") {

alert(" 请先通过微信搜索 青团社app 关注青团社公众号,通过微信分享文章 :) ");

} else {

WeixinJSBridge.invoke(‘shareTimeline‘, {

"title": "青团社兼职",

"link": "https://www.qtshe.com",

"desc": " 做中国最纯净的大学生兼职平台",

"img_url": "https://ojlf2aayk.qnssl.com/logo.jpeg"

});

}

}

或者这种

var imgUrl = "图片地址";

var lineLink = "网址";

var descContent = '爱在五月,\n\n妈咪爱1+1亲子健康之旅开启全国行首站----重庆站妈咪爱活性益生菌';

var shareTitle = '标题';

var appid = '';

function shareFriend() {

WeixinJSBridge.invoke('sendAppMessage',{

"appid": appid,

"img_url": imgUrl,

"img_width": "200",

"img_height": "200",

"link": lineLink,

"desc": descContent,

"title": shareTitle

}, function(res) {

//_report('send_msg', res.err_msg);

})

}

function shareTimeline() {

WeixinJSBridge.invoke('shareTimeline',{

"img_url": imgUrl,

"img_width": "200",

"img_height": "200",

"link": lineLink,

"desc": descContent,

"title": shareTitle

}, function(res) {

//_report('timeline', res.err_msg);

});

}

function shareWeibo() {

WeixinJSBridge.invoke('shareWeibo',{

"content": descContent,

"url": lineLink,

}, function(res) {

//_report('weibo', res.err_msg);

});

}

// 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {

// 发送给好友

WeixinJSBridge.on('menu:share:appmessage', function(argv){

shareFriend();

});

// 分享到朋友圈

WeixinJSBridge.on('menu:share:timeline', function(argv){

shareTimeline();

});

// 分享到微博

WeixinJSBridge.on('menu:share:weibo', function(argv){

shareWeibo();

});

}, false);

相关文章

  • 在微信公众平台前端网页上添加分享按钮

    微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你...

  • 微信公众号内分享功能的实现

    分享场景 在微信公众号的前端网页内, 我们以前经常会看到分享到朋友圈或者是关注微信等按钮, Click, 之后会弹...

  • 微信小程序中添加客服按钮contact-button功能

    先看结果 功能布置 1.前台页面添加按钮 2.后台使用微信公众平台网页版客服工具 完成个人亲测有效

  • 微信cookie域

    微信公众号进入网页和微信右上角扫码按钮进入网页,cookie相同(入口不同而已)

  • JSSDK调用

    微信JS-SDK是微信公众号平台面向网页开发这提供基于微信内的网页开发工具包。 接口大类分为:分享接口、微信支付、...

  • 前端实现微信公众平台分享

    微信公众平台SDK开发文档地址 点击JSSDK跳转到相应的说明文档 一般来说,wx.config里的需要用到的必填...

  • 微信公众号抄袭处理办法

    微信公众平台近日上线了“原创声明”功能。微信公众平台将会对原创文章添加“原创”标识,当该文章在公众平台被其他用户发...

  • 微信WeixinJSBridge API(屏蔽右上角按钮等)

    API介绍 1、隐藏微信网页右上角的按钮(...按钮):开发者可以用这个功能来禁止当前页面被分享2、隐藏微信网页底...

  • 微信授权

    一、微信公众平台配置 1. 获取appid, appsecret,添加白名单 登录微信公众平台,进入基本配置。开发...

  • 微信公众平台开发(二)网页开发

    以前写过一篇《微信公众平台开发的一点收获》,这一篇说说微信公众平台网页开发的知识。微信公众平台应该是国内最大的开放...

网友评论

本文标题:在微信公众平台前端网页上添加分享按钮

本文链接:https://www.haomeiwen.com/subject/ldmhpxtx.html