微信小程序:如何跳转app方案及实现

96
ThinkinLiu 5203a3bf 1c0f 41db a6f0 31ddb4a929cb
3.6 2019.05.29 15:20* 字数 1220

关于微信小程序跳转app,开发者迫切希望微信能提供,以便对app引流、以及对小程序无法实现功能进行补充、并实现自家产品的闭环;而微信则因为安全及用户流出方案考虑,不愿意让用户跳到app。那么,小程序跳app到底是否可行呢?

微信小程序:如何跳转app方案及实现

关于小程序如何跳转app,常规思路有四种:

  1. 利用官方api: 需要app接入开放平台,并且与小程序属于统一账号下,关键是该方案仅适用于通过app打开小程序,或者通过app分享的卡片打开小程序,其他情况无法跳转,故在常用的场景下,该方案基本不可行。
  2. 利用webview网页跳转: 我们可以在手机默认浏览器中直接在一个网页中打开app;那么,在微信小程序web-view中是否可以呢?实际上web-view有大量权限限制,基本除了展示信息,其他交互都需要通过小程序原生代码实现。
  3. 利用默认浏览器跳转: 我们知道,在手机默认浏览器中,我们可以直接在一个网页中打开app;但是,微信小程序做了限制,不允许跳转到默认浏览器,故该方案不可行(部分Android手机可以跳转,但随着微信小程序基础版本升级,这种情况越来越少了)。
  4. 利用应用宝跳转: 应用宝是腾讯的,他们一家,是否可以跳转到应用宝,然后打开app或下载呢?然而,由于网页域名鉴权,除了腾讯自家的部分特殊小程序,其他小程序都是无法跳转的。
  5. 利用微信未开放接口: 在github上了解到微信小程序api其实有一个openUrl的接口,据说以前是可以跳转到默认浏览器打开网页的;但是尝试后,提示无权使用...

构思以上方案及尝试花了不少时间,后来在百度谷歌也搜了不少关键词,看到的结果基本和上面的结果一致。那么,是否就真的没有办法凑从小程序跳转到app呢?

一次偶然的机会,看到了小程序客服这个功能,而小程序客服是微信中的一个类似于公众号的功能;我们知道,公众号是可以间接跳转到app的,那么跳转app的方案就出来了,小程序先打开客服页面,然后在客服页面通过关键字回复一个url(或卡片),点击url(或卡片)跳转到应用宝app推广链接,然后就可以打开或下载app了。(也可以客服卡片跳到自己的网页,然后打开app)

方案有了,那么该尝试下如何实施了:

  1. 先跳转到微信小程序客服,这个好办,官方提供了button可以直接跳转,设置open-type='contact'即可:
<button class='modal-btn' open-type='contact'>进入【护血糖APP】</button>
  1. 跳转到微信小程序客服,需要提示用户输入关键字,这个时候则需要在跳转时弹窗提示,我们需要改下,第一个button不是contact,而是一个普通按钮打开弹窗,在弹窗中设置contact按钮:
<!-- 进入客服会话提示--> 
<view class='modal-bg' wx:if="{{showConcatModal}}" catchtap='dismissConcatModal' catchtouchmove='move'>
  <view class='modal-content-bg' >
    <text class='modal-text'>在客服会话中回复“mm/萌萌/小萌伴”</text>
    <button class='modal-btn' open-type='contact'>进入【小萌伴】APP</button>
  </view>
</view>
  1. 客服会话关键词回复,这个小程序官方的仅支持文字回复,建议使用api接口来实现卡片或图片回复,可以自己开发,也可以用第三方平台,如:芝麻服务助手、知己助手等,反正就是搜索微信小程序客服,可以出来一大堆,我也是刚用,不知道到底哪家比较靠谱。

  2. 点击卡片跳转,我使用的应用宝推广url,这个在应用宝app管理后台就可以看到,可以自动识别android、ios

虽然该方案比较曲折,但是好歹能实现小程序到app的跳转,可以用于app推广引流,或者打开小程序无法实现的部分app功能。

具体代码实现可以在Github开源ui中查看首页小萌伴APP的点击事件,源码:itlao5-xmb-weapp

简书:ThinkinLiu 博客: IT老五

该方案的缺点很明显,需要用户操作过多,如果有更好的方案,欢迎一起探讨,多谢!


IT老五(it-lao5):关注公众号,一起源创,一起学习!
微信小程序
Gupao