h5页面跳转关注公众号

业务背景

最近公司的一个项目需要用户在进入落地页后能在浏览器内进入微信关注公众号，达到引流的目的。以下是在实践过程的采用几种实现方式：
其中1，2种方式只能在微信浏览器内部去关注公众号，第3种方式可以在微信外浏览器唤起微信并实现关注公众号功能

1. jsjdk方式（微信浏览器内部）

该方式主要是使用微信官方的JS-SDK说明文档和开放标签中的跳转小程序标签：wx-open-launch-weapp，该方式需要公众号关联该小程序

依托微信游览器环境和jssdk去打开小程序，用于页面中提供一个可跳转指定小程序的按钮。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。H5通过开放标签打开小程序的场景值为1167。
示例代码如下（本实例使用了vue框架，请根据业务场景自行更改）

在这里插入代码片<template><div class="content"><img class="logo" src="~static/care.png" alt=""><p class="text">正在打开微信小程序</p><div class="open" @click="isWeixin ? open : ''">打开小程序</div><div class="weapp" v-if="isWeixin"><wx-open-launch-weapp username="小程序原始id" path="/pages/index/follow.html"><!-- path:需要打开的小程序的路径,注意加.html后缀 --><script type="text/wxtag-template"><style>.btn {height: 4000px; !impoartant; width: 5000px; !important;background-color: #f04146;color: #ffffff;}</style><div class="btn">跳转小程序</div>      </script></wx-open-launch-weapp></div></div>
</template><script>export default {data() {return {isWeixin: false,wxData: {}}},methods: {async wxmini() {const res = await fetch('你的获取微信签名的接口地址', {method: 'GET',headers: {'Content-Type': 'application/json; charset=utf-8'},// body: JSON.stringify({//   url: window.location.href// })}).then(response => response.json()).then(data => {return data});this.wxData = res.Responselet that = this   wx.config({ debug: true,appId: that.wxData.AppId, //小程序的appIdtimestamp: that.wxData.Timestamp, //生成签名的时间戳nonceStr: that.wxData.NonceStr, //生成签名的随机串signature: that.wxData.Signature, //签名jsApiList: ['onMenuShareTimeline'], // 必填，需要使用的JS接口列表openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']});/* eslint-disable */wx.ready(function() {console.log('ready')});wx.error((e) => {console.log(e, '失败信息')})}},mounted() {const ua = navigator.userAgent.toLowerCase()const isWXWork = ua.match(/wxwork/i) == 'wxwork'this.isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'if(this.isWeixin) {setTimeout(function() {const oScript = document.createElement('script');oScript.type = 'text/javascript';oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';oScript.onload = this.wxminidocument.body.appendChild(oScript);}, 1000)}},}
</script><style lang="scss" scoped root-value="37.5">.content {width: 375px;height: 100vh;margin: 0 auto;overflow: hidden;font-family: PingFangSC-Regular;display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;}.logo {width: 150px;height: 150px;margin-top: -50px;}.text {width: 100%;font-size: 20px;text-align: center;}.open {width: 200px;height: 50px;background-color: #f04146;margin-top: 30px;border-radius: 30px;color: #fff;font-size: 18px;display: flex;justify-content: center;align-items: center;}.weapp {position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 100000;font-size: 100px;overflow: hidden;opacity: 0;}
</style>

2.通过公众号复制链接进入（微信浏览器内部）

1.打开电脑版的微信客户端，打开需要前往的公众号

2.打开详情页

3.复制公众号链接

4.在页面里添加事件重定向到该地址

location.href =’复制的链接’

3. 生成小程序URL Scheme（微信浏览器外部）

通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme 」入口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。通过 URL Scheme 打开小程序的场景值为 1065。
注意该方法只能适用于国内非个人主体小程序

在公众号后台创建一篇包含公众号二维码的文章（不用发布），取得该文章链接
在已有的小程序页面使用webview引入该文章
打开小程序后台生成生成 URL Scheme

4.生成链接后在浏览器内重定向到该地址

location.href =’复制的链接’

然后就可以实现如下的效果了

后记

这几种方式只是提供几种思路，如果有更好的方式或者不懂的地方，欢迎在评论区留言，愿与诸君共勉！