H5及微信中唤起app的解决方案
今天我们就来说说这个callapp-lib
我的接到的需求大概是这样的 如果检测到不是在app里面用webview打开的页面就会显示上面的立即打开按钮,
点击的话会判断是否在微信中, 如果在微信中打开就会显示点击右上角-选择在safari中打开的图片, 然后在浏览器中直接跳转打开app, 跳到app对应的页面
首先分析需求, 第一步判断现在在哪个端打开的网页
export default function(context) {
if (process.server) {
let ua = context.req.userAgent
ua.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.params
this.$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-container
height $openapp-height
display flex
background-color #eee
justify-content center
align-items center
.logo
img
width design(80)
height design(80)
margin-left design(20)
margin-top design(10)
.info
flex 1
margin-left design(20)
.title
font-size design(26)
font-weight 700
color #333
.content
font-size design(24)
color #666
.open-app
background-color $button-blue
color $white
margin-right design(20)
</style>
最后一步, 也是最重要的一步, 也是本文今天的重点, 就是唤醒app了
进到这一步, 说明网页不是在app中打开的, 是在浏览器或者微信中, 所以我们这里只需要判断是不是在微信中就行
在微信的话让他浏览器打开, 不在微信的话直接就跳转, 也就是在这里使用我们的callapp-lib来进行跳转
//导入
$ npm install --save callapp-lib
//使用
const CallApp = require('callapp-lib');
or
import 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]
| |
应用标识 功能需要的参数
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">
.bgImg
position absolute
width 100%
height 100%
display block
.chickImg
width 235px
height 175px
position absolute
top 20.5px
right 26.5px
</style>
相关文章
- 如何制作H5微信宣传页?如何制作移动端网站?
- CRMEB V4.X打通版小程序公众号H5 App商城源码
- 跨平台移动APP开发进阶(二):HTML5+、mui开发移动app教程[通俗易懂]
- 基于H5+js开发一款音乐播放器
- uni-app APP地图移动时获取地图中心点经纬度坐标
- uni-app引入sortable列表拖拽,兼容App和H5
- 羊了个羊APP/H5网页/小程序游戏系统开发搭建教程及部署源码
- 实战:第七章:微信H5支付时用户有微信分身停留5秒后未选择哪个微信分身,也未支付就被动回调到商户支付是否完成的页面...
- H5文件简介和使用
- 苹果APP上架App Store被拒常见问题及解决思路分享
- H5电影电视前端界面完整代码分享
- matlab h5文件_matlab读取二进制文件
- 移动端H5通过flexible.js+rem自适应适配方案
- H5-本地数据库indexdb
- h5-序
- uniapp打包成H5部署到服务器教程
- 小游戏 pk H5游戏,你选谁?
- java基于springboot外卖系统在线订餐系统app源码厨艺论坛APP
- App自动化测试|原生app元素定位方法
- 免费视频直播、点播H5播放器SkeyeWebPlayer适配移动端
- H5页面唤醒 支付宝App 指定页面
- 关于H5在微信获取授权详解手机开发
- 拓展业务用App组合MySQL实现跨平台数据共享(app组合mysql)
- App开发之路MySQL源码指引(app源码 mysql)
- App与MySQL数据库构建坚固的联系(app和mysql数据库)
- 数据库利用App制作读取MySQL数据库的简单方法(app制作读取mysql)
- 使用H5与Oracle构建强大的数据库应用(h5 数据库oracle)
- 学习MYSQL必备下载一款视频APP,轻松入门数据库技术(MYSQL下载视频app)
- 开发Redis在APP开发中的应用(redis进行app)
- Taro 正式发布 3.3 版本:支持使用 H5 标签与框架 DevTools