微信公众平台开始支持前端网页，大家可能看到很多网页上都有分享到朋友圈，关注微信等按钮，点击它们都会弹出一个窗口让你分享和关注，这个是怎么实现的呢？今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈，关注微信号等按钮。
一、微信内置浏览器
通过 Mac 远程调试 iPhone 上微信自己的网页，我们可以发现微信内嵌浏览器定义了一个私有 JavaScript 对象：WeixinJSBridge，通过操作这个对象的相关方法可以实现分享到微信朋友圈，和判断一个微信号的关注状态以及实现关注指定微信号等功能。
二、js功能：分享到朋友圈
代码如下:
function weixinShareT
在移动互联网时代，微信作为一款普及率极高的社交应用，其内置浏览器——微信浏览器成为了许多开发者关注的重点。微信浏览器为了方便开发者实现特定的功能，如在微信内分享内容、检查用户是否关注特定公众号等，提供了一个名为`WeixinJSBridge`的JavaScript对象。这个对象是微信内嵌浏览器特有的，允许开发者在网页中调用一系列方法来与微信客户端进行交互。
了解`WeixinJSBridge`的基本用法。微信内置浏览器通过Mac远程调试工具，可以在iPhone上查看并调试网页，开发者可以发现`WeixinJSBridge`对象的存在。该对象提供的方法能够帮助开发者实现在微信环境中执行特定的任务，比如分享到朋友圈、发送给微信好友、分享到腾讯微博，甚至关注指定的微信号。
1. 分享到朋友圈：
分享到朋友圈的功能是通过调用`WeixinJSBridge.invoke`方法，并传递`'shareTimeline'`作为第一个参数来实现的。示例代码如下：
```javascript
function weixinShareTimeline(title, desc, link, imgUrl) {
WeixinJSBridge.invoke(
'shareTimeline', {
"img_url": imgUrl,
// "img_width": "640", // 可选参数
// "img_height": "640", // 可选参数
"link": link,
"desc": desc,
"title": title
}
);
}
```
其中，`title`是分享的标题，`desc`是描述，`link`是点击后跳转的链接，`imgUrl`是分享内容的图片地址。
2. 发送给好友：
类似地，发送给好友的功能也使用`WeixinJSBridge.invoke`，但传入的方法名称是`'sendAppMessage'`：
```javascript
function weixinSendAppMessage(title, desc, link, imgUrl) {
WeixinJSBridge.invoke(
'sendAppMessage', {
// "appid": appId, // 可选参数，通常不需要
"img_url": imgUrl,
// "img_width": "640", // 可选参数
// "img_height": "640", // 可选参数
"link": link,
"desc": desc,
"title": title
}
);
}
```
这里的参数与分享到朋友圈类似，但无需设置`appid`，因为这是直接在聊天界面中发送给好友的。
3. 分享到腾讯微博：
要分享到腾讯微博，使用`'shareWeibo'`方法：
```javascript
function weixinShareWeibo(title, link) {
WeixinJSBridge.invoke(
'shareWeibo', {
"content": title + link,
"url": link
}
);
}
```
在这里，`title`是微博内容的标题，`link`是点击后跳转的链接。
4. 关注指定的微信号：
关注指定微信号的功能相对复杂，调用`'addContact'`方法，传入包含`webtype`和`username`的对象：
```javascript
function weixinAddContact(name) {
WeixinJSBridge.invoke(
"addContact", {
webtype: "1",
username: name
},
function (e) {
WeixinJSBridge.log(e.err_msg);
// e.err_msg:add_contact:added 已经添加
// e.err_msg:add_contact:cancel 取消添加
// e.err_msg:add_contact:ok 添加成功
if (e.err_msg === "add_contact:added" || e.err_msg === "add_contact:ok") {
// 关注成功，或者已经关注过
}
}
);
}
```
`name`参数是需要关注的微信号，回调函数中的`e.err_msg`用于判断用户是否成功关注。
在使用这些功能之前，必须确保已经触发了微信浏览器的`onReady`事件，这通常是通过在文档加载完成后调用`WeixinJSBridge.call('ready')`来实现的。此外，所有的分享和关注操作都需要在微信客户端中进行，因此这些功能在非微信环境下的浏览器中是无法正常工作的。
`WeixinJSBridge`对象为微信内嵌浏览器提供了丰富的API接口，让开发者能够充分利用微信的社交特性，提升用户体验，增强网站或应用在微信内的互动性和传播性。然而，需要注意的是，微信对这些功能有一定的限制和审核机制，开发者在使用时需遵守微信的开发者政策。
