微信小程序中关注公众号功能踩坑实践

1、原生小程序公众号关注组件(有限制)

<official-account></official-account>

注意事项：

微信基础库 2.3.0 开始支持

只有扫码打开小程序有效, 且适用场景值如下

当小程序从扫小程序码场景打开时(场景值1047, 场景值1124)

当小程序从聊天顶部场景中的「最近使用」内打开时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态（场景值1089）

当从其他小程序返回小程序时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态（场景值1038）

通过小程序搜索, 朋友分享小程序卡片进入, 开发者工具扫码进入等场景都没有。

2、通过webview传参跳转至业务域名下进行跳转(不可行)

因webview组件跳转需配置业务域名, 而关注公众号跳转链接为：(其中biz后面base64为公众号的unid转为base64所得)

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=**AxOTUyMTI3**==#wechat_redirect

其中 mp.weixin.qq.com 为微信官方业务域名, 无法配置为自己的业务域名直接使用, 会提示如图所示

猜想方案：可通过跳转至配置过自己业务域名的页面下通过参数形式在该页面进行跳转打开

小程序webview页面中

其中微信公众号关注链接形如 https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=**AxOTUyMTI3**==#wechat_redirect

<web-viewsrc="https://weier.com/webview/focusUs?redirectUrl=微信公众号关注链接#wechat_redirect"></web-view>

业务域名页面https://weier.com/webview/focusUs中

redirectLinkUrl() {

// ...提取链接中的参数 redirectUrl 此处省略

constredirectUrl='https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=**AxOTUyMTI3**==#wechat_redirect'

// 不知该方法在webview中可行不可行?

window.location.href=redirectUrl

}

根据webview提示看来这种方法估计也需要配置业务域名

3、通过webview打开小程序关联公众号的文章链接(可行, 用户操作成本较高)

注意：该方法只能跳转小程序关联公众号的文章, 否则也是打不开的

通过webview方式链接到小程序关联公众号文章里, 该文章内容引导用户点击标题下的蓝色主体跳转至公众号关注页进行关注公众号等操作

webview页面跳转列举

<web-view src="https://mp.weixin.qq.com/s?__biz=************#rd"></web-view>

然后webview内容会跳转号公众号文章内, 我们就可以在该文章内引导用户关注我们

点击蓝色字体即可跳转至该公众号关注页面

4、通过公众号图片扫码进入关注(可行, 用户操作成本更高)

该方法可通过放置公众号二维码, 但是因小程序中不能实现长按图片识别公众号图片的功能, 用户只能长按保存图片至本地, 然后通过微信扫一扫保存的图片进入关注页面, 这种用户操作流程比方法三的操作成本更高, 故不考虑。

5、通过微信小程序客服消息回复关键词推送关注公众号链接(暂未尝试, 需配置客服服务器)

该方法通过配置客服服务器自己配置相应的关注公众号推送消息, 通过链接用户点击即可跳转至关注页面, 该方法成本较高, 需要自己配置完善的客服服务器并开发部分推送功能。

重要：

需要指出的是，根据《微信小程序平台运营规范》，微信小程序提供的服务中，不得存在诱导类行为。也就是说，未经腾讯许可或授权，在小程序中进行诱导用户关注公众号的行为。有可能会被微信封禁客服消息推送能力。严重地可能会关停小程序。因此，需要谨慎地使用此功能。

总结：综合第1、3方法

首次使用官方关注组件 <offcial-account>进行展示, 若不满足场景值可以通过监听 binderror 事件控制展示出跳转公众号文章链接引导用户关注该公众号

<viewclass="official-account"><official-accountwx:if="{{loadSuccess}}"bindload="officialAccountLoad"binderror="officialAccountError"></official-account><web-viewwx:elsesrc="https://mp.weixin.qq.com/s?__biz=************#rd"></web-view></view>

如有更好的方法，欢迎补充。。。

最后编辑于：2020.05.12 14:26:03