callapp-lib 是一个 H5 唤起 APP 的解决方案,能够满足大部分唤起客户端的场景,也预留了扩展口,帮你实现一些定制化的功能。
如果你想了解一些唤端的原理知识,或者阅读下面的文档有不理解的名词,可以访问这篇博客 H5 唤起 APP 指南 。
如果你在使用 callapp-lib 的过程中,有好的想法或者发现了 bug,提 Issue 就行,作者会及时跟进。
Install with npm:
npm install --save callapp-lib
const CallApp = require('callapp-lib');
or;
import CallApp from 'callapp-lib';
callapp-lib 同样支持 script
加载,你可以使用下面的 cdn 文件(地址在下面的示例中),也可以下载 dist/index.umd.js
到你的项目中,index.umd.js
会暴露一个全局变量 CallApp
,这个全局变量和上面 commonjs
导入的 CallApp
内容是一致的,使用方法也是一致的。
<!-- 及时下载未压缩的最新版本 Js -->
<script src="https://unpkg.com/callapp-lib"></script>
or
<!-- 具体某一版本,本例中是 3.1.2 ,下载速度较上面快一些,因为上面的地址会有 302 -->
<script src="https://unpkg.com/callapp-lib@3.1.2/dist/index.umd.js"></script>
callapp-lib 中传递出来的是一个类,你需要将它实例化,然后才能去调用实例对象的方法。
const options = {
key1: 'xxx',
key2: 'xxx',
};
const callLib = new CallApp(options);
callLib.open({
param: {},
path: 'xxx',
});
<style>
#open-app {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
.btn {
position: relative;
width: 100px;
height: 40px;
background: skyblue;
}
.btn p {
color: #fff;
font-size: 14px;
line-height: 40px;
text-align: center;
}
</style>
<!-- 标签包裹一层,防止wx注入标签时防止闪烁,id标签默认是定位,所以父级需要relative -->
<div class="btn">
<p>跳转文章</p>
<div id="open-app"></div>
</div>
const options = {
key1: 'xxx',
key2: 'xxx',
};
const lib = new CallApp(options);
> 如果使用该方法,需要提供挂载标签,提前进行注册,非click时调用
lib.signup([
{
id: 'open-app',
path: '',
height?: '40',
param?: {
type: 'article',
id: 163355,
}
},
{
id: 'open-weapp',
type: 'weapp', // 'app' | 'weapp' 默认'app'
path: '',
height?: '40px',
appid?: '', // 所需跳转的小程序appid,即小程序对应的以wx开头的id, 不写使用weappId
username?: '', // 所需跳转的小程序原始id,即小程序对应的以gh_开头的id(跳转时,有appid会优先使用appid,没有appid才会使用username)
wePath?: '', // 所需跳转的小程序内页面路径及参数
envVersion?: 'release' | 'devlop' | 'trial'; // 跳转小程序版本 默认 release
extraData?: '' // 以JSON格式字符串向所需跳转的小程序传递数据
}
]);
对常见的一些问题进行了汇总,如果这些问答无法解决你的疑惑,加钉钉群,按照提问模板进行提问
实例化过程中,需要传递一个 options 对象给类,options 对象各属性需要严格按照下面的格式。
下面所有不是必填的,如果你不需要传值,就不要写这个属性,而不是传递一个空字符串或者空对象,callapp-lib 并未对这种情况进行严格的检测。
类型: object
必填: ✅
用来配置 URL Scheme 所必须的那些 v 字段。
-
protocol
类型:
string
必填: ✅APP 协议,URL Scheme 的 scheme 字段,就是你要打开的 APP 的标识。
-
host
类型:
string
必填: ❎URL Scheme 的 host 字段。
-
port
类型:
string
|number
必填: ❎URL Scheme 的 port 字段。
callapp-lib 2.0.0 版本已移除,原先的 protocol 移入到新增的 scheme 属性中
类型: object
必填: ❎
外链。我们的 APP 的某些功能可能会集成到另一个 APP 中,为了区分它们的协议,会加上一个中间透明页来分发路由,这层中间页的 URL Scheme 对于我们来说就是外链。当然,这里的外链对 Intent 同样生效。
例:youku://ykshortvideo?url=xxx
-
protocol (2.0.0 版本由原先的 protocal 修改为 protocol,原先的 protocal 是拼写错误)
同 URL Scheme 的 scheme 字段,在你的 APP 就和上面的 protocol 属性值相同,在其他 APP 打开就传该 APP 的 scheme 标识。
-
path
参考 URL Scheme 的 path 字段,它代表了该 APP 的具体的某个功页面(功能),这里的 path 就是对应的中间页。
-
key
既然只是中间页,它自然要打开我们真正要打开的页面,所以我们需要把要打开的页面的 URL Scheme 传递过去。就像前端从 URL 的 query 字符串里面取值一样,客户端也是从 URL Scheme 里面来取。至于参数 key 定成什么,大家自己去协商吧,上面的示例中
url
也只是一个示例。
类型: object
必填: ❎
安卓原生谷歌浏览器必须传递 Intent 协议地址,才能唤起 APP。
它支持以下五个属性,其中 scheme 和 上面的 protocal 一样,其他四个都是 apk 相关信息,其中 package 和 scheme 必传:
- package
- action
- category
- component
- scheme
类型: object
必填: ❎
如果你们的 ios 工程师没有做相应的配置来让 APP 支持 Universal Link,你可以不用传递, callap-lib 将会使用 URL Scheme 来替代它。
-
host
你的 Universal Link 的域名,
apple-app-site-association
文件就放在这个域名对应的服务器上。 -
pathKey
3.5.0
版本以后pathKey
非必填项,pathkey
填写与不填写代表了 Universal Link 拼接的两种方式。不建议使用pathKey
,因为使用它拼接的 Universal Link 不贴合 URL 设计**。-
不使用 pathKey:客户端提起 path 信息将会从 url 中获取,而不是从 queryString 中获取
Universal Link 拼接规则:
const universalLink = `https://${host}/${open方法中的path}?${open方法中param转换的queryString}`;
-
使用 pathKey:pathKey 就和前面 Intent 的 key 属性一样,只是这里的 pathKey 是客户端用来提取 path 信息的,以便知道调用的是 APP 的哪个页面。这个值也是需要你和 ios 童鞋协商定下来的。
Universal Link 拼接规则:
const universalLink = `https://${host}?${pathKey}=${open方法中的path}&${open方法中param转换的queryString}`;
-
类型: string
必填: ✅
APP 的 App Store 地址,例: https://itunes.apple.com/cn/app/id1383186862
。
类型: string
必填: ❎
APP 的应用宝地址,例:'//a.app.qq.com/o/simple.jsp?pkgname=com.youku.shortvideo'
。如果不填写,则安卓微信中会直接跳转 fallback
类型:boolean
必填: ❎
默认:true
拉起其他 app,默认微信端使用微信原生标签,微信版本 8.0.8
以上版本支持使用
类型:string
必填: ❎
useWxNative: true, 微信内使用原生标签注册,必填。否则不需要
类型:string
必填: ❎
全局微信小程序 appid
类型: boolean
必填: ❎
默认值: false
是否支持微博,默认不支持
类型: number
必填: ❎
默认值: 2000
等待唤端的时间(单位: ms),超时则判断为唤端失败。
类型: string
必填: ✅
唤端失败后跳转的地址。
类型: function
必填: ❎
(status: 'pending' | 'failure', wxTagFailure?) => void;
埋点入口函数。运营同学可能会希望我们在唤端的时候做埋点,将你的埋点函数传递进来,不管唤端成功与否,它都会被执行。当然,你也可以将这个函数另作他用。
这个回调函数会回执行两次,第一次是触发 open 方法,第二次是唤端失败,它有一个入参 status ,它有两个值 pending
和 failure
,分别代表函数触发及唤端失败。
在微信标签使用中,触发时机是唤端wx.error|唤端失败
wxTagFailure 返回相应信息,唤端失败返回微信返回的失败信息。wx.error 返回{errMsg: 'error'}
类型: function
必填: ❎
url scheme 自定义拼接函数,内置的 buildScheme 函数是按照 uri 规范来拼接的,如果你们的 app 对 url scheme 有特殊需求,可以自定义这个函数,此函数有两个入参,(config, options)
, config 是你调用 open 方法是传入的对象,options 是你初始化 callapp-lib 时传入的对象。
唤端功能。接收一个对象作为参数,该对象支持以下属性:
-
path
类型:
string
必填: ✅需要打开的页面对应的值,URL Scheme 中的 path 部分,参照 H5 唤起 APP 指南 一文中的解释。
只想要直接打开 app ,不需要打开特定页面,path 传空字符串
''
就可以。 -
param
类型:
object
必填: ❎打开 APP 某个页面,它需要接收的参数。
-
callback
必填: ❎
类型:function
自定义唤端失败回调函数。传递
callback
会覆盖 callapp-lib 库中默认的唤端失败处理逻辑。
接收一个对象作为参数,该对象包含以下属性:
- path
- param
属性含义和 open
方法参数的属性一致。
返回 URL Scheme。如果你觉得 callapp-lib 的唤端处理方式不符合你的需求,但你又不想费心费力的自己去拼凑 URL Scheme,可以利用这个方法直接生成。
生成 Intent 地址,接收参数同 generateScheme
方法参数。
生成 Universal Link,接收参数同 generateScheme
方法参数。
在微信环境下使用微信原生标签
进行 app 跳转,其他环境下进行 dom 的点击事件绑定open
方法
微信公众号满足条件
需要微信 jssdk 1.6.0 版本以上
注意拉起 app:
- wx 注册 config 需要绑定的公众号
- 域名需要开放平台绑定的域名
- 微信注册 config 需要添加
openTagList: ['wx-open-launch-app', 'wx-open-launch-weapp']
拉起小程序,仅需保证是安全域名
-
id
必填:✅
用于微信自定义标签插入,最好根据父级进行定位,如果跳转失败会给该元素绑定点击事件(lib.open)
-
height
必填:❎
默认:40px必须设置高度,无固定高度无法点击跳转
其他参数同 open 方法
注意拉起小程序:
-
type
必填: ❎
默认: 'app'拉起小程序需要改成'weapp'
非微信环境,weapp 不会注册事件
-
appid
必填: ❎
所需跳转的小程序 appid,即小程序对应的以 wx 开头的 id, 不写使用 weappId
-
username
必填: ❎
所需跳转的小程序原始 id,即小程序对应的以 gh_开头的 id(跳转时,有 appid 会优先使用 appid,没有 appid 才会使用 username)
-
wePath?: ''
必填: ❎
所需跳转的小程序内页面路径及参数
-
env
必填: ❎
默认: 'release''release' | 'develop' | 'trial'
-
extraData
必填: ❎
默认传入 object, 会进行 encodeURIComponent 处理,以 JSON 格式字符串向所需跳转的小程序传递数据。小程序可在 App.onLaunch、App.onShow 等中获取;小游戏可在 wx.onAppShow、wx.getLaunchOptionsSync 等中获取(支持的微信版本:iOS 8.0.18 及以上、Android 8.0.19 及以上)
如果刚好解决了你的问题,如果你心情还不错,如果尚有余粮,可以给作者打赏一杯咖啡哦,爱宁~