web前端逃坑指南------H5及微信中JavaScript唤起app的解决方案callapp-lib

最近遇到一个需求：点击一个按钮，如果本机装有则唤起app，没有的话则跳下载页。

刚一接到需求，觉得很熟悉，实际上这个功能也确实很常见, 尤其是在微信里面更是常见，尝试着自己写，但是却发现总是很难做到100%的完美。主要还是微信单方面修改了底层, 禁止非腾讯系软件通过H5直接跳转app

那么我们就需要自己想办法了

作为一个刚入前端的菜鸡, 自己写当然是写不出来的了, 所以就用了别人写好的现成的轮子callapp-lib

不得不说确实挺友好的, 它能在大部分的环境中成功唤端，而且炒鸡简单啊，拿过去就可以用啊，还支持很多扩展功能

今天我们就来说说这个callapp-lib

我的接到的需求大概是这样的如果检测到不是在app里面用webview打开的页面就会显示上面的立即打开按钮,

点击的话会判断是否在微信中, 如果在微信中打开就会显示点击右上角-选择在safari中打开的图片, 然后在浏览器中直接跳转打开app, 跳到app对应的页面

首先分析需求, 第一步判断现在在哪个端打开的网页

export default function(context) {if (process.server) {let ua = context.req.userAgentua.isWechat = Boolean(ua.source.toLowerCase().match(/MicroMessenger/i))ua.isInApp =(context.query && context.query.openinapp !== undefined) || context.req.headers['x-request-deviceid']ua.isWechatMini = context.query && context.query.wechatmin === '1'ua.device = {id: context.req.headers['x-request-deviceid'] || context.req.cookies.get('koa:sess') || '',info:context.req.headers['x-request-device'] ||JSON.stringify({platform: 'web',client: 'arcard-portal',userAgent: context.req.headers['user-agent']})}context.store.commit('SET_USERAGENT', ua)}
}

由于我用的是nuxt框架, 所以直接在中间件里面搞的, 判断是不是在app是不是在微信, 这个方法很多, 百度上一堆

接下来写我们图一上方飘着的那个组件

<template><div class="quick-open-app-container"><div class="logo"><img src="~/assets/img/arlogo.png" alt="logo" /></div><div class="info"><div class="title">{{ $t('layout.name') }}</div><div class="content">{{ $t('layout.info') }}</div></div><van-button class="open-app" size="small" @click="open">{{ $t('layout.openapp') }}</van-button></div>
</template>
<script>
export default {props: {params: {type: Object,default: () => ({path: '',param: {}})}},computed: {userAgent() {return this.$store.getters.userAgent}},methods: {open() {let params = this.paramsthis.$router.push({path: '/' + this.$route.params.lang + '/callapp',query: { path: params.path, param: params.param }})}}
}
</script>
<style lang="stylus">
@import '~assets/css/design'.quick-open-app-containerheight $openapp-heightdisplay flexbackground-color #eeejustify-content centeralign-items center.logoimgwidth design(80)height design(80)margin-left design(20)margin-top design(10).infoflex 1margin-left design(20).titlefont-size design(26)font-weight 700color #333.contentfont-size design(24)color #666.open-appbackground-color $button-bluecolor $whitemargin-right design(20)
</style>

最后一步, 也是最重要的一步, 也是本文今天的重点, 就是唤醒app了

进到这一步, 说明网页不是在app中打开的, 是在浏览器或者微信中, 所以我们这里只需要判断是不是在微信中就行

在微信的话让他浏览器打开, 不在微信的话直接就跳转, 也就是在这里使用我们的callapp-lib来进行跳转

//导入
$ npm install --save callapp-lib

//使用

const CallApp = require('callapp-lib');orimport CallApp from 'callapp-lib';

下面介绍一下必填的属性

      const options = {scheme: {protocol: 'kccatalog'},intent: {package: '',scheme: ''},appstore: '填写appstore的下载地址',yingyongbao: '填写应用宝的下载地址',fallback: '填写唤端失败后跳转的地址。'}const callLib = new CallApp(options)callLib.open({param: url.param,path: url.path})

Options

实例化过程中，需要传递一个 options 对象给类，options 对象各属性需要严格按照下面的格式。

下面所有不是必填的，如果你不需要传值，就不要写这个属性，而不是传递一个空字符串或者空对象，callapp-lib 并未对这种情况进行严格的检测。

scheme

类型: object
必填: ✅

用来配置 URL Scheme 所必须的那些字段。

protocol

类型: string
必填: ✅

APP 协议，URL Scheme 的 scheme 字段，就是你要打开的 APP 的标识。

appstore: 类型: string 必填: ✅填写appstore的下载地址,

yingyongbao: 类型: string 必填: ✅填写应用宝的下载地址,

fallback: 类型: string 必填: ✅填写唤端失败后跳转的地址

介绍一下什么是URL Scheme

我们来看一下 URL 的组成：[scheme:][//authority][path][?query][#fragment]

就像给服务器资源分配一个 URL，以便我们去访问它一样，我们同样也可以给手机APP分配一个特殊格式的 URL，用来访问这个APP或者这个APP中的某个功能(来实现通信)。APP得有一个标识，好让我们可以定位到它，它就是 URL 的 Scheme 部分。我们拿 https://www.baidu.com 来举例，scheme 自然就是 https 了。

常用APP的 URL Scheme
APP 微信支付宝淘宝微博 QQ 知乎短信

URL Scheme weixin:// alipay:// taobao:// sinaweibo:// mqq:// zhihu:// sms://

URL Scheme 语法

上面表格中都是最简单的用于打开 APP 的 URL Scheme，下面才是我们常用的 URL Scheme 格式：
行为(应用的某个功能)|scheme://[path][?query]|              |应用标识     功能需要的参数

APP	微信	支付宝	淘宝	微博	QQ	知乎	短信
URL Scheme	weixin://	alipay://	taobao://	sinaweibo://	mqq://	zhihu://	sms://

methods

open

唤端功能。接收一个对象作为参数，该对象支持以下属性：

path

类型: string 必填: ✅

需要打开的页面对应的值，URL Scheme 中的 path 部分

只想要直接打开 app ，不需要打开特定页面，path 传空字符串 '' 就可以。

其它非必填的可以去github上看

<template><div @click="goDownload"><img class="bgImg" src="~/assets/img/bg.png" alt="" /><img v-if="userAgent.isWechat" class="chickImg" src="~/assets/img/chick.png" alt="" /></div>
</template>
<script>
import CallApp from 'callapp-lib'
export default {computed: {userAgent() {return this.$store.getters.userAgent}},mounted() {if (!this.userAgent.isWechat) {this.openApp(this.$route.query)}},methods: {openApp(url) {const options = {scheme: {protocol: 'kccatalog'},intent: {package: '',scheme: ''},appstore: '填写appstore的下载地址',yingyongbao: '填写应用宝的下载地址',fallback: '填写唤端失败后跳转的地址。'}const callLib = new CallApp(options)callLib.open({param: url.param,path: url.path})},goDownload() {window.location.href = '没有自动唤端的话,证明手机里面没有app, 点击页面上任意一个地方直接跳应用宝下载链接, 微信不会拦截支付宝的链接'}}
}
</script>
<style lang="stylus">
.bgImgposition absolutewidth 100%height 100%display block
.chickImgwidth 235pxheight 175pxposition absolutetop 20.5pxright 26.5px
</style>

web前端逃坑指南------H5及微信中JavaScript唤起app的解决方案callapp-lib相关推荐

APP二维码微信扫描后无法下载微信中无法下载APP的解决方案
微信扫一扫屏蔽了APP下载连接无非是想让大家将资源转移到自家平台,国人微信中毒过深,看到二维码首先想到的一定是微信(好强大的用户引导).为了更好的用户体验,只能向腾讯屈服将应用转移到腾讯平台.当然如果 ...
微信中无法下载app的解决方案
使用微信推广的朋友经常都会遇到推广链接被拦截导致无法打开或无法下载app的情况,此时用户在微信中打开会提示"已停止访问该网页 .这是一种非常差的用户体验,数据表明90%的用户碰到这种情况都会 ...
微信中无法下载APP的解决方案（微信自动跳转浏览器打开下载链接）
一.需求描述现在微信分享的功能很多,从分享的链接下载apk安卓包是很常用的一个功能.但是微信自带的scheme接口是不允许直接通过微信下载apk包的,只能通过浏览器来下载,但很多用户不知道是被屏蔽了 ...
web前端新手面试指南：自我介绍
web前端新手面试指南:自我介绍面试时注意:自我介绍不能太长,也不能过短,3分钟左右最合适,尤其做为web前端技术方面的面试,更加要说到点上,我依次从学习方面.项目实践.未来规划这三个方面写下web ...
web 前端必备学习指南-精华
工具 box-shadow generator 生成 box-shadow 的工具. gradient-generator 渐变生成器. Ultimate CSS Gradient Generator ...
好程序员web前端培训分享做H5页面需要学什么
好程序员web前端培训分享做H5页面需要学什么,很多人问过我这个问题,而问这个问题的人基本上都是刚听说过h5,处在懵懂的阶段,他们往往会被一些网上炫酷页面所吸引,开始的目的也很简单,能通过自己的努力做 ...
Vue React Angular之三国杀，web前端入坑第六篇上
「懒癌引发血案」目前前端技术栈发生了翻天覆地的变化,上篇刚写了只会jquery 要失业,再不学新的你就要被淘汰,虽然有点危言耸听,不过现实情况确实是这样. vue.react.angular对比 ...
Vue、React、Angular之三国杀，web前端入坑第六篇(上)
「懒癌引发血案」目前前端技术栈发生了翻天覆地的变化,上篇刚写了只会jquery 要失业,再不学新的你就要被淘汰,虽然有点危言耸听,不过现实情况确实是这样. vue.react.angular对比 ...
uniapp的打包：h5、微信小程序以及APP方式
uniapp的打包:h5.微信小程序以及APP方式 H5打包微信小程序打包 App打包本人用的是HBuilder编译器,学习uniapp时b站某位大大推荐的,我刚开始接触代码时候也用过,那时候并不 ...

web前端逃坑指南------H5及微信中JavaScript唤起app的解决方案callapp-lib

Options

scheme

protocol

methods

open

web前端逃坑指南------H5及微信中JavaScript唤起app的解决方案callapp-lib相关推荐

最新文章

热门文章