如何在APP上实现一键关注微信公众账号

2023-04-24 11:38:02JavaScript072

如何在APP上实现一键关注微信公众账号,第1张

微信公众平台一键关注代码今天有朋友问了如何在网页上或是其它地方直接点击一个按钮或是链接实现直接关注服务号的功能，现在把资料分享给大家。

在微信上，通过公众平台推送给用户的文章，是在微信内部直接打开的，用的无外乎就是一个微信内置浏览器控件（IOS上，Android上也差不多）。但特殊的是，微信官方在这里面加了一个默认的Js API--WeixinJSBridge，通过它，能直接在该页面上做这些操作：

1、将文章分享到微信朋友圈

2、将文章直接发送给微信上的好友

3、将文章分享到腾讯微博

4、关注指定用户

以上这些操作，都是通过WeixinJSBridge.invoke接口来完成的。

//通过关注微信好友下面是代码

function WeiXinAddContact(wxid, cb)

{

if (typeof WeixinJSBridge == 'undefined') return false

WeixinJSBridge.invoke('addContact', { webtype: '1', username: wxid },

function(d) {

// 返回d.err_msg取值，d还有一个属性是err_desc //add_contact:cancel 用户取消 // add_contact:fail 关注失败

// add_contact:ok 关注成功 // add_contact:added 已经关注

WeixinJSBridge.log(d.err_msg) cb &&cb(d.err_msg)})

}

//通过微信分享

function WeiXinShareBtn() { if (typeof WeixinJSBridge== "undefined")

{ alert("请先通过微信xxxx")} else { WeixinJSBridge.invoke('shareTimeline',

{ "title": "微信资讯网", "link": "微信公众平台开发", "desc": "欢迎关注微时代为您搜罗最新最尖端的微信资讯。

内容包括微信公众平台开发、微信营销方案策略、微信操作指南，好玩有趣的微信公众账号导航、微信游戏攻略、微信最新版本，

最新功能等更多更全面的微信资讯信息。", "img_url": "微信公众平台开发" })

}

复制代码

使用方法：

<a data-cke-saved-href="#" href="#" onclick="WeiXinAddContact

('<span style=" background-color:#ff0000"="">

gh_5f81fbb868d8

<a data-cke-saved-href="#" href="#" onclick="WeiXinAddContact('<span style=" background-color:#ff00

微信公众平台官方宣布微信沟通接口正式上线，用户可以在移动应用中，点击跳转到微信客户端内，用户已关注公众号时会进入会话界面，未关注则进入资料页。这是上月底微信公开语义理解接口之后微信官方公布的另外一个重量级的API。微信沟通接口只支持微信客…

显示全部

微信公众平台官方宣布微信沟通接口正式上线，用户可以在移动应用中，点击跳转到微信客户端内，用户已关注公众号时会进入会话界面，未关注则进入资料页。

这是上月底微信公开语义理解接口之后微信官方公布的另外一个重量级的API。

微信沟通接口只支持微信客户端5.3版本及以上，如果用户使用的微信客户端版本低于5.3版本，则无法正常唤起公众号。而且开发者需要到“管理中心”创建移动应用，点击“创建移动应用”，填写相关资料，审核通过的应用才能进行开发。

具体开放规则如下：

通过微信开发者资质认证的开发者，其帐号下所有的移动应用和公众号应用自动获得微信沟通权限。移动应用可以唤起同在一个开放平台帐号下的任意一个公众号。

接入流程：

在微信开放平台（http://open.weixin.qq.com）注册开放平台开发者账号；登录微信开放平台，进入“帐号中心”页申请开发者资质认证；前往“管理中心”界面提交移动应用申请，绑定公众号；前往“资源中心”下载iOS开发工具包或者Android开发工具包，内置到移动应用中，然后查看开发文档进行开发。

整理一下通过h5做微信分享相关配置。

登录微信公众号，获取AppID ，配置白名单，然后配置JS接口安全域名。

登录公众号后，左侧菜单栏选择：开发 =>基本配置，直接复制开发者ID(AppID)即可：

注意使用公网IP

左侧菜单栏选择：设置 =>公众号设置：

网页授权主要是获取微信openId使用，如果只是用分享操作，本步可以略过。

网页授权介绍

大致步骤是：

在配置完前面AppId、白名单及安全域名后，开始处理网页授权。

网页授权这一块儿内容主要是后端需要处理的内容较多，前端还是很简单的，仅需要跳入微信链接即可。为什么要走这一步呢因为有些操作，例如微信支付、播放微信录音、获取微信地址、微信卡券、商品、小店等等许多功能必须在微信浏览器汇总打开操作才可以，因此需要跳入微信浏览器及微信链接来处理后续操作。当配置后，链接便只有在微信浏览器中打开才会生效了，不然会提示：

链接如下：

https://open.weixin.qq.com/connect/oauth2/authorize?appid={$appId}&redirect_uri=={$URL}&response_type=code&scope=snsapi_base#wechat_redirect

参数分解

可见，上面需要填入的变量有二，一个是前面回去的AppId，另外一个则是url，需要写的是与配置域名所对应域名下的url，并且要进行urlEncode编码处理使用。

在拿到上述完整链接后，通过 window.location.href = ${url} 进行网页授权即可。在授权成功后，页面会重定向到自己设置的url页面去，然后在该连接上会有code值，取出即可：

将拿到的code值传给后端即可，看具体需求决定是否前端使用openId，如果非必要则不在前端获取保存或者由后端加密后传给前端使用。

大致分为五个步骤：

在步骤 1.3 中已经配置。

在需要调用JS接口的页面引入如下JS文件： https://res.wx.qq.com/open/js/jweixin-1.6.0.js

备注：支持使用 AMD/CMD 标准模块加载方法加载

配置需要如下几个参数：

那这些参数从哪儿来呢？依旧不用担心，依然是交给后端处理，后端返回时间戳、随机串及签名，其他的自己配置即可。