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

12,661 views

阅读模式

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

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

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

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

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

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

方案有了，那么该尝试下如何实施了：

先跳转到微信小程序客服，这个好办，官方提供了button可以直接跳转，设置open-type='contact'即可：

<button class='modal-btn' open-type='contact'>进入【护血糖APP】</button>

跳转到微信小程序客服，需要提示用户输入关键字，这个时候则需要在跳转时弹窗提示，我们需要改下，第一个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>

客服会话关键词回复，这个小程序官方的仅支持文字回复，建议使用api接口来实现卡片或图片回复，可以自己开发，也可以用第三方平台，如：芝麻服务助手、知己助手等，反正就是搜索微信小程序客服，可以出来一大堆，我也是刚用，不知道到底哪家比较靠谱。
点击卡片跳转，我使用的应用宝推广url，这个在应用宝app管理后台就可以看到，可以自动识别android、ios

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

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

简书：ThinkinLiu 博客: IT老五