实现微信小程序跳转到公众号

2,796 阅读2分钟

当拿着 UI 设计好的精美图标,准备放到页面中并关联跳转到公众号的功能时,才发现小程序中并不支持直接跳转到公众号首页。

对于这个问题找到了两种方案:

  1. 点击按钮,关联到某篇公众号文章,通过文章进入到公众号主页
  2. 使用微信提供的公众号组件

小程序的关联

1. 关联公众号

  • 关联到某篇公众号文章,可以使用 web-view 直接跳转到指定文章页面(个人类型的小程序暂时不支持使用)。

  • 使用微信提供的公众号组件 official-account

操作步骤:

  1. 在微信公众号后台关联目标小程序

  2. 微信小程序后台开启【公众号关注组件】(必须是同一主体的公众号)

  3. 在需要展示地方加入组件代码(每一个页面只能添加一个组件,uniapp 也是一样的代码)

 <official-account></official-account>
  1. 调整组件的样式,根据需要加入组件加载成功或失败的方法

组件限定最小宽度为300px,高度不可修改(84px)

配置成功后就可以看到公众号组件出现在页面上了:

image.png

如何在开发者工具中调试

首先,微信开发者工具中登录的微信必须是小程序的开发者,这样才能看到公众号组件。

其次,可以根据用户进入小程序的场景来设定编译模式,比如扫描二维码(1101)或是体验版的入口(1017),具体支持的场景如下:

image.png

设定编译模式:

image.png image.png

注:局部编译仅用于调试,对上传操作不起作用

2. 关联小程序

关联小程序时,直接在代码外包裹一层 navigate 就可以实现:

<navigate appid="即将跳转的小程序的appid" />

公众号组件突然不展示的问题

如果第一次打开小程序展示,后面又突然不展示,可能是启动场景变化导致的,可以根据自己的启动场景来排查问题。

  • 冷启动:首次打开小程序,或小程序销毁后被用户再次打开(需要重新加载启动)
  • 热启动:打开过小程序,小程序并未被销毁,再次打开小程序的过程就是热启动