当拿着 UI 设计好的精美图标,准备放到页面中并关联跳转到公众号的功能时,才发现小程序中并不支持直接跳转到公众号首页。
对于这个问题找到了两种方案:
- 点击按钮,关联到某篇公众号文章,通过文章进入到公众号主页
- 使用微信提供的公众号组件
小程序的关联
1. 关联公众号
-
关联到某篇公众号文章,可以使用 web-view 直接跳转到指定文章页面(个人类型的小程序暂时不支持使用)。
-
使用微信提供的公众号组件 official-account
操作步骤:
-
在微信公众号后台关联目标小程序
-
微信小程序后台开启【公众号关注组件】(必须是同一主体的公众号)
-
在需要展示地方加入组件代码(每一个页面只能添加一个组件,uniapp 也是一样的代码)
<official-account></official-account>
- 调整组件的样式,根据需要加入组件加载成功或失败的方法
组件限定最小宽度为300px,高度不可修改(84px)
配置成功后就可以看到公众号组件出现在页面上了:
如何在开发者工具中调试
首先,微信开发者工具中登录的微信必须是小程序的开发者,这样才能看到公众号组件。
其次,可以根据用户进入小程序的场景来设定编译模式,比如扫描二维码(1101)或是体验版的入口(1017),具体支持的场景如下:
设定编译模式:
注:局部编译仅用于调试,对上传操作不起作用
2. 关联小程序
关联小程序时,直接在代码外包裹一层 navigate 就可以实现:
<navigate appid="即将跳转的小程序的appid" />
公众号组件突然不展示的问题
如果第一次打开小程序展示,后面又突然不展示,可能是启动场景变化导致的,可以根据自己的启动场景来排查问题。
- 冷启动:首次打开小程序,或小程序销毁后被用户再次打开(需要重新加载启动)
- 热启动:打开过小程序,小程序并未被销毁,再次打开小程序的过程就是热启动