qing
qingjs是为了方便前端人员在云之家环境调用native代码的工具类,兼容新版桌面端、老版桌面端、移动端、微信
桥测试页面:http://www.yunzhijia.com/public/js/qing/latest/test_qing.html
如何使用
常规使用案例
- NPM版本
npm install @yunzhijia/qing
// QingJS资源请求路径,可以是CDN地址
qing.assertHost = 'https://static.yunzhijia.com' // 这改为云之家服务域名
- 常规版本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>usecase</title>
</head>
<body>
<!-- 引入qing -->
<script src="//static.yunzhijia.com/public/js/qing/latest/qing.js"></script>
<script>
// 在 qing.config 执行前,所有其它的 ydk api 都不会真正被调用
// 这里是一个简单的配置,其它 API list 请参考详细文档
qing.config({
debug : false,
jsApiList : ['checkJsApi', 'share'],
jsEventList: ['appear', 'disappear'] // 自动绑定事件,会通过document.dispatchEvent分发
});
// 获取个人信息
qing.call('getPersonInfo', {
success : function(res){}
});
qing.on('appear', {
complete: function (res) {},
error: function (res) {},
success : function(res){}
});
</script>
</body>
</html>
接口调用说明
所有接口的调用形式为 qing.call('xxx', {...})
,参数必须是一个对象。
每个接口除了自身必须的参数外,还支持以下通用参数:
-
success
:接口调用成功时执行的回调函数。 -
error
:接口调用失败时执行的回调函数。 -
complete
:接口调用完成时执行的回调函数,无论成功或失败都会执行。
以上所述的回调函数的参数说明,如 success : function (res) { ... }
,这里的 res
为对象,除了每个接口自身返回的数据之外,还有两个通用属性 code
和 errMsg
,其值格式如下:
- 调用成功(
success
):{code: 200, errMsg: "", data: {}}
- 调用失败(
error
):{code: 500, errMsg: "不合法的图片文件大小", data: {}}
注: code 类型为数字,非字符串。
接口说明
基础接口
qing.config 获取app信息
在 qing.config 未成功执行前,其他 api 将无法正常使用(在调用队列里安静的等着,不会被执行)
qing.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。
jsApiList: ['api-1', 'api-2', '...'] //必填,需要使用的JS接口列表
});
只有在 jsApiList 中明确指定的 API,当前 webview 中才可用。因为某些 API 的初始化需要额外的开销,从而导致资源浪费。
qing.checkJsApi 判断当前客户端版本是否支持指定 API 接口
用于检测当前客户端支持哪些桥。
qing.checkJsApi({
jsApiList: [
"gotoLightApp", // qing.nativeJsBridgeVersion >= 0.9.18
"todoList", // qing.nativeJsBridgeVersion >= 0.9.80
"setBounce", // qing.nativeJsBridgeVersion >= 0.9.27, iosOnly
"selectLocalFile" // qing.nativeJsBridgeVersion >= 0.9.30, androidOnly
],
success: function(res){
console.log(res);
}
});
// success返回结果res示例:
{
"success": true,
"data":{
"gotoLightApp": true,
"todoList": false,
"setBounce": true,
"selectLocalFile": false
}
}
通过应用后端返回的签名信息获取ticket
在活动页或者混合应用中, 可以通过 qing.call('getTicket')
取得ticket。
方法一:
qing.call('getTicket', {
signUrl: '/path/to/myapp/sign',
signMethod: 'post',
success (e) {
alert(e.data.ticket)
},
error (error) {
alert(error)
}
})
signUrl是获取签名的接口,各个轻应用的后端应该提供这样一个接口,这个接口会接收到一个名为url参数(post)
返回结果的格式必须如下:
{
"success": true,
"data": {
appId: "",
timeStamp: "",
nonceStr: "",
signature: ""
}
}
方法二:
如果你通过别的方式(例如页面直出)拿到了签名信息,也可以像下面的例子直接传入。
qing.call('getTicket', {
timeStamp:'1530867948317',
signature:'7qaScdppiMKuDoYadUqbZhlZhgw=',
appId:'101091520',
nonceStr:'0.7057841489531929',
success (e) {
alert(e.data.ticket)
},
error (error) {
alert(error)
}
})
附录1:所有 API 列表
- 与 native 相关的 API
以下为 base api,也就是对第三方开放的无限制的部分
- qing.config
- qing.checkApi
- qing 中还包含了一些为了便于编码便利而存在的一些辅助性 api
- qing.version,qing版本号
- qing.isSupportNativeJsBridge,当前 webview 支持桥
- qing.nativeJsBridgeVersion,当前客户端桥版本
- qing.hasOwn,见
Object.hasOwnProperty
- qing.isFunction,是否函数
- qing.isString,是否字符串
- qing.isNumber,是否数字
- qing.isObject,是否对象
- qing.isArray,是否数组
- qing.forEach,见
Array.prototype.forEach
- qing.keys,见
Object.keys
- qing.ns,把字符串转换为命名空间,
"a.b.c"
1.>{a:{b:{c:{}}}}
- qing.isWX,是否微信客户端
- qing.isChrome,是否 chrome
- qing.isFirefox,是否 firefox
- qing.isOpera,是否 opera
- qing.isSafari,是否 safari
- qing.isIe,是否 IE 浏览器,这个用法稍微不一样,如
qing.isIe() or qing.isIe(6)
- qing.isIphone,是否 iphone
- qing.isIpad,是否 ipad
- qing.isIpod,是否 ipod
- qing.isIos,是否 ios 平台
- qing.isAndroid,是否 Android 平台
- qing.isAndroidPhone,是否 Android 手机
- qing.isAndroidTable,是否 Android 平板
- qing.isBlackberry,是否黑莓
- qing.isMac,是否 mac 本
- qing.isWindows,是否 win 系统
- qing.isWindowsPhone,是否 win 手机
- qing.isWindowsTable,是否 win 平板
- qing.isMobile,是否手机
- qing.isDesktop,是否 PC 机
- qing.isTouchDevice,是否触屏设备
附录2:全局返回码说明
注: code类型为数字,非字符串。
返回码 | 说明 |
---|---|
100 | 调用成功,并且有多次返回 |
200 | 调用成功 |
404 | 接口不存在 |
500 | 全局调用失败code |