微信公众号开发引导用户关注公众号

    微信公众号开发，本质是一个网页的形式，用户进入这个网页系统，并不一定要关注公众号，只要提供链接，就可以直接进入。例如电动车充电桩系统，用户直接用微信的扫一扫，扫描插座二维码，就可以进入充电系统，并没有关注公众号的行为。

    但是，用户没有关注公众号，就会收不到消息推送，会影响主体对用户的后续服务，所以要引导未关注用户关注公众号。

    用户关注公众号主要有三种方式：（1）搜索关注，对用户不友好，基本不考虑。（2）二维码关注。（3）链接关注

    这里考虑二维码关注和链接关注的方式。有个前提，就是引导方式是从我们自己的微信网页系统引导过去的，注意这个前提，下面会说一些不同的情况。

    根据微信提供的API

（https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140839）由后台配合，获取用户是否关注公众号信息，接下来就是前端的引导工作。

 

二维码方式

    用户未关注公众号，前端弹出对话框，提供微信公众号二维码图片，提示用户长按识别，即可实现跳转到关注页面，这个页面和我们平时直接扫公众号二维码或者搜索微信公众号得到的页面是一样的。

    用户点击关注后，会跳转到公众号会话页面

    然后再一步步返回，回到我们自己开发的网页系统。

链接方式

前端直接链接到关注页（不可行）

    二维码的方式，需要用户手动操作识别，有没有一种方式，可以再减少一点用户操作？比如知道用户没有关注公众号后，给出一个弹框，弹框内容为“您还未关注公众号，请先关注。”用户点击确认后，我们帮用户跳转到关注页面。

    这里需要一个关注页的url。

    首先打开公众号，点击右上角的图标

    示例公众号是服务号，点击【全部消息】

    点击右上角的三个点，选择【复制链接】

    这样我们就得到一个形如

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIwNjUxMjc3OA==&scene=126&bizpsid=0&subscene=0#wechat_redirect

的链接，但是这里面包含的一些信息我们并不需要，所以处理一下，按照

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIwNjUxMjc3OA==#wechat_redirect的形式处理，就可以得到公众号关注页的链接了。

    得到的链接我们是可以直接在微信中打开（不是由我们自己微信网页跳过去，比如聊天消息中我们发出一个链接，可以直接点击跳转），得到的页面与二维码扫描、搜索公众号得到的关注页不一样，是下图的形式。

    如果我们前端直接在网页中将当前url改变为此网址，用代码：

    window.location.href = url

    页面是跳转了，但是关注按钮会没有（测试了下，苹果和部分安卓是先出现关注按钮，页面加载完就消失了，部分安卓保留有关注按钮，但是点击没有反应。）

    用微信开发者工具调试，会有这样一条报错

    微信把开发网页内，链接引导关注的功能禁止了，这是微信7.0版本以后出现的问题。微信不支持诱导关注的行为。前端直接跳转的方式行不通。

链接生成二维码给用户

    但是其实微信只是禁止了一些链接访问方式，还是有些可以实现的。目前调试出了一种可行方式。

    用VUX的【Qrcode】组件，将链接创建成二维码，通过这种方式创建的二维码，用户长按识别，可以跳转到公众号关注页面，且关注按钮功能正常。

<div class="img-box">
  <qrcode value="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIwNjUxMjc3OA==#wechat_redirect" type="img"></qrcode>
</div>

    这样的方式可以实现引导用户关注，并且用户关注后，会停留在关注页面，而不是二维码扫描那样，关注后会自动跳到公众号会话页面。用户返回时，比二维码的方式少一步返回。

总结

    引导用户关注公众号，前端直接操作跳转的方式不可行，必须要用户手动识别二维码，而在公众号二维码和链接生成的二维码之间，因为可以减少用户返回操作步数，所以选择链接生成二维码的方式更优一点。