敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,了解更多。
♦ JS-SDK 引用方式:
♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20241118.zip,请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库;
♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package
u.cshtml
u.cshtml?xapp-navigation=1
u.cshtml#xapp-navigation=1
u.cshtml?xapp-share=1&xapp-share-title=%e7%99%be%e5%ba%a6%e6%89%8b%e6%9c%ba%e7%ab%99&xapp-share-url=https%3a%2f%2fm.baidu.com%2f&xapp-share-image=http%3a%2f%2fm.baidu.com%2fstatic%2findex%2fplus%2fplus_logo.png&xapp-share-description=%e8%bf%99%e6%98%af%e8%87%aa%e5%ae%9a%e4%b9%89%e6%91%98%e8%a6%81
jsBridge.setOptions 的参数可以通过 URL QueryString 传递,用法请参考 setOptions js 接口说明。
在浏览器客户端通过 javascript 代码判断;
客户端或服务器端都可通过检查 UserAgent 是否存在关键词 LT-APP 判断网页是否在APP内打开的;
if (/LT-APP/.test(navigator.userAgent)) { alert("在APP内"); } else { alert("不在APP内"); }
//php $inApp = strpos($_SERVER['HTTP_USER_AGENT'], 'LT-APP'); if ($inApp) { //在APP中 } //.net bool inApp = (Request.UserAgent.IndexOf("LT-APP") >= 0); if (inApp) { //在APP中 } //java boolean inApp = (request.getHeader("User-Agent").indexOf("LT-APP") >= 0); if (inApp) { //在APP中 }
属性
获取网页是否在APP中打开的
if (jsBridge.inApp) { alert("你正在APP中使用"); } else { alert("不在APP中"); }
获取APP内核版本号
alert(jsBridge.version)
获取APP打包版本号
//数字版本号,如 100 alert(jsBridge.appVersion);
获取当前页面是否在主窗口中( false 则为子窗口)
//true 主窗口, false 子窗口 //需在 jsBridge.isReady() 之后调用 alert(jsBridge.isRoot);
界面控制
jsBridge.setOptions({ //需要加载的链接 url : '', //是否显示顶部标题栏, 不设置则用App配置 showTitle: true, //顶部标题栏背景色, 不设置则用App配置 titleColor: "#56BC94", //顶部标题栏文字, 不设置则用网页标题 titleText: "Hello Web-Native App", //顶部标题栏文字颜色, 不设置则用App配置 titleTextColor: "#FFFFFF", //是否全屏(隐藏顶部电池/信号状态栏), 不设置则用App配置 fullScreen: false, //状态栏背景色, 不设置则用App配置 statusBarColor: "#56BC94", //状态栏文字/图标是否显示为黑色, 不设置则用App配置 statusBarBlackText: false, /** * 屏幕方向 * 0 自适应(注意需取消手机方向锁定) * 1 横屏 * 2 竖屏 **/ screenOrientation: 0, //是否启用下拉刷新 refresh: false });
jsBridge.setOptions({ showTitle : false, fullScreen: true, screenOrientation: 1 });
jsBridge.setOptions({ showTitle : true, fullScreen: false, screenOrientation: 2 });
jsBridge.setOptions({ showTitle : true, fullScreen: false, screenOrientation: 2 });
jsBridge.setOptions({ showTitle : false, fullScreen: true });
jsBridge.setOptions({ showTitle : true, fullScreen: false });
jsBridge.setOptions({ url: "https://m.baidu.com/" });
1. 给参数名加上 xapp- 前缀,添加到 URL 查询串可以起到跟调用 js 接口一样的效果;
2. URL 参数值需要进行 URLEncode UTF8 编码;
3. js 接口参数与 URL 参数只能用其一,js 优先;
4. 注意,这种方式只适用于在新窗口中打开的页面(你可以在链接中加上 xapp-target=blank 参数,强制页面在新窗口中打开);
示例链接:
u2.cshtml?xapp-target=blank&xapp-screenOrientation=1&xapp-fullScreen=true
//参数说明请参见 jsBridge.setOptions 方法 //二者的参数相同 jsBridge.open({ url : 'https://www.anzhuoe.com/doc/u2.cshtml', showTitle: true });
//全屏并用横屏方式打开 jsBridge.open({ url : 'https://www.anzhuoe.com/doc/u2.cshtml', showTitle: false, fullScreen: true, screenOrientation: 1 });
//自适应横/竖屏方式打开 jsBridge.open({ url : 'https://www.anzhuoe.com/doc/u2.cshtml', showTitle: true, titleColor: "#FFFFFF", titleTextColor: "#000000", statusBarColor: "#FFFFFF", statusBarBlackText: true, screenOrientation: 0 });
jsBridge.openInBrowser('https://m.baidu.com');
//需在子窗口中执行 close //主窗口中执行 close 无效 //如需退出 APP 可以在任何地方执行 jsBridge.exit() jsBridge.close();
关闭当前窗口,并在父窗口执行指定的 js 代码
jsBridge.close("alert('欢迎回到我这里~~\n' + location.href)");
当关闭当前窗口时执行指定的回调函数,回调函数返回 true / false 以指示是否允许关闭。
//需在子窗口中调用,主窗口中执行无效 jsBridge.onClose(function(appData){ console.log(JSON.stringify(appData)); if (confirm("确实要关闭吗?")) { return true; //允许关闭 } else { return false; //不关闭 } });
当Web窗口可后退(canGoBack)时,用户点按安卓后退键时触发,回调函数返回 true / false 以指示是否允许后退。
//当页面可后退时才会触发 //仅支持 Android jsBridge.onBackPressed(function(appData){ console.log(JSON.stringify(appData)); if (confirm("确实要后退吗?")) { return true; //允许后退 } else { return false; //不允许 } });
1. 工具栏实际上是一个Web窗口,你可以在里面执行任意 js 语句; 2. 如未启用工具栏则不执行任何操作;
jsBridge.evalInToolbar("location.reload()");
♦ 可以通过 URI Scheme 呼叫其他任何APP;
♦ 支持单个 URI,callback 回调返回成功与否;
♦ 支持多个 URI,APP会逐个尝试启动,直到成功启动一个 URI 链接为止,callback 回调返回成功的 URI 序号;
//单个 uri jsBridge.launch("tel:10010", function(succ) { alert(succ ? "启动成功" : "启动失败"); }); //多个 uri //按数组顺序尝试启动,遇到一个成功的则不再尝试后面的, //回调返回成功的序号,-1表示全部没成功 jsBridge.launch([ // uri 数组 "scheme1:xxx", "scheme2:xxx", "scheme3:xxx" ], function(index) { //成功启动的 uri 序号 // -1 表示全部没成功 alert(index); });
jsBridge.actionButton({ //true 显示, false 隐藏 visible: (window.bool0 = !window.bool0) });
//显示APP配置里勾选的按钮面板 jsBridge.action();
//要显示的按钮数组 //如果未指定按钮,则以APP配置里勾选的按钮为准 //可直接执行 jsBridge.action(); var btns = [ "ShareWxFriend", //分享到微信好友 "ShareWxTimeline",//分享到微信朋友圈 "ShareQQFriend", //分享到QQ好友 "ShareQQZone", //分享到QQ空间 "ShareWeibo", //分享到微博 "ShareMenu", //弹出分享菜单 "CopyLink", //复制链接 "Back", //后退 "Forward", //前进 "Refresh", //刷新 "FullScreen", //进入全屏/退出全屏 "Orientation", //横竖屏切换 "ClearCache", //清除缓存 "Scan", //扫一扫 "ShowImages", //浏览图片 "OpenInBrowser", //在浏览器中打开 "BackToHome", //回到首页 "Exit" //退出APP ]; jsBridge.action(btns);
但点击更多按钮,显示功能按钮面板时触发。你可以调用这个方法指定显示哪些按钮。
//要显示的按钮数组 var btns = [ "ShareWxFriend", //分享到微信好友 "ShareWxTimeline",//分享到微信朋友圈 "CopyLink", //复制链接 "Refresh", //刷新 "OpenInBrowser" //在浏览器中打开 ]; jsBridge.onMenuAction(btns); alert("已设置");
//true 显示, false 隐藏 window.bool1 = !window.bool1; jsBridge.uiNavigation(bool1);
//true 显示, false 隐藏 window.bool2 = !window.bool2; jsBridge.uiShare(window.bool2);
//true 显示, false 隐藏 window.bool3 = !window.bool3; jsBridge.uiActions(bool3);
//true 启用, false 禁用 window.bool4 = !window.bool4; jsBridge.uiRefresh(bool4);
侧滑边栏
网页截屏
//保存到相册 jsBridge.captureWebPage({ //是否整页截屏(滚屏截图,长屏) fullPage : false, //截屏后是否弹出分享 share : true, //是否将图片以 jpg base64 格式返回, 默认 false //false 保存到相册 //true 以 base64 格式返回 needResult: false });
//返回 jpg base64 jsBridge.captureWebPage({ needResult: true }, function(success, res) { console.log(res.base64); if (res.base64) { alert("成功,base64 字符数量 " + res.base64.length); } });
jsBridge.captureWebPage({ fullPage: true, share : true });
长按(链接、图片)
剪贴板
设置剪贴板文本
var text = "Hello 世界 " + new Date().getTime(); jsBridge.setClipboardText(text); alert("已复制到剪贴板");
获取剪贴板文本
jsBridge.getClipboardText(function(text) { alert(text); });
文件系统与SQLite数据库
微信、支付宝、银联、农行、工行、中信支付
• 可以将如下参数 GET 或 POST 提交到 https://g.yimenyun.net/pay/ 发起支付
• channel: 支付渠道, 0 微信, 1 支付宝, 2 银联云闪付
• orderid: 订单号
• title: 订单名称
• amount: 支付金额(元)
• url_succ: 支付成功后跳转的链接
• url_fail: 支付失败跳转的链接
• 示例:
调用微信App完成名称为 购买VIP会员 的订单 S63869322615 0.01元支付;
支付成功跳转到https://m.baidu.com/,失败跳转到 https://xw.qq.com/;
注意,要对各参数进行 UrlEncode UTF-8 编码;
https://g.yimenyun.net/pay/?channel=0&orderid=S63869322615&title=%e8%b4%ad%e4%b9%b0VIP%e4%bc%9a%e5%91%98&amount=0.01&url_succ=https%3A%2F%2Fm.baidu.com%2F&url_fail=https%3A%2F%2Fxw.qq.com%2F
channel 参数为 0 表示微信支付
jsBridge.pay({ channel: 0, //0为微信支付, 1为支付宝, 2为银联云闪付 orderid: new Date().getTime().toString(), title : "购买VIP会员", amount : 0.01, attach : "aaaa" //附加字段,通知时原样返回 }, function(succ, text) { if (succ) { alert("支付成功"); } else { alert("支付失败或取消了支付\n" + text); } });
• 在你的服务器端使用 微信官方统一下单接口 获取 "预支付交易会话标识 prepay_id",再参考 调起支付接口 构造支付参数,交由此 js 函数发起支付;
• 此支付方式 不需要 配置机密信息(API密钥)到打包平台;
appid:
partnerid:
prepayid:
package:
noncestr:
timestamp:
sign:
jsBridge.wxPay({ //微信应用ID appid : "{{wxPay.appid}}", //商户号 partnerid: "{{wxPay.partnerid}}", //预支付交易会话ID prepayid : "{{wxPay.prepayid}}", //扩展字段 package : "{{wxPay.package}}", //随机字符串 noncestr : "{{wxPay.noncestr}}", //时间戳(单位是秒,不是毫秒,切记) timestamp: "{{wxPay.timestamp}}", //签名 sign : "{{wxPay.sign}}" }, function (succ, text) { if (succ) { alert("支付成功"); } else { alert("支付失败或取消了支付\n" + text); } });
• 可以将如下参数 GET 或 POST 提交到 https://g.yimenyun.net/pay/ 发起支付
• channel: 支付渠道, 0 微信, 1 支付宝, 2 银联云闪付
• orderid: 订单号
• title: 订单名称
• amount: 支付金额(元)
• url_succ: 支付成功后跳转的链接
• url_fail: 支付失败跳转的链接
• 示例:
调用支付宝App完成名称为 购买VIP会员 的订单 S63869322615 0.01元支付;
支付成功跳转到https://m.baidu.com/,失败跳转到 https://xw.qq.com/;
注意,要对各参数进行 UrlEncode UTF-8 编码;
https://g.yimenyun.net/pay/?channel=1&orderid=S63869322615&title=%e8%b4%ad%e4%b9%b0VIP%e4%bc%9a%e5%91%98&amount=0.01&url_succ=https%3A%2F%2Fm.baidu.com%2F&url_fail=https%3A%2F%2Fxw.qq.com%2F
channel 参数为 1 表示支付宝
jsBridge.pay({ channel: 1, //0为微信支付, 1为支付宝, 2为银联云闪付 orderid: new Date().getTime().toString(), title : "购买VIP会员", amount : 0.01, attach : "aaaa" //附加字段,通知时原样返回 }, function(succ, text) { if (succ) { alert("支付成功"); } else { alert("支付失败或取消了支付"); } });
• 在你的服务器端参考 支付宝官方请求参数说明 构造 "订单字符串",交由此 js 函数发起支付;
• 此支付方式 不需要 配置机密信息(私钥/公钥)到打包平台;
orderString:
jsBridge.aliPay({ orderString: "{{aliPay.orderString}}" }, function (succ, text) { if (succ) { alert("支付成功"); } else { //resultStatus返回码说明 alert("支付失败或取消了支付"); } });
• 可以将如下参数 GET 或 POST 提交到 https://g.yimenyun.net/pay/ 发起支付
• channel: 支付渠道, 0 微信, 1 支付宝, 2 银联云闪付
• orderid: 订单号
• title: 订单名称
• amount: 支付金额(元)
• url_succ: 支付成功后跳转的链接
• url_fail: 支付失败跳转的链接
• 示例:
调用银联云闪付App完成名称为 购买VIP会员 的订单 S63869322615 0.01元支付;
支付成功跳转到https://m.baidu.com/,失败跳转到 https://xw.qq.com/;
注意,要对各参数进行 UrlEncode UTF-8 编码;
https://g.yimenyun.net/pay/?channel=2&orderid=S63869322615&title=%e8%b4%ad%e4%b9%b0VIP%e4%bc%9a%e5%91%98&amount=0.01&url_succ=https%3A%2F%2Fm.baidu.com%2F&url_fail=https%3A%2F%2Fxw.qq.com%2F
channel 参数为 2 表示银联
jsBridge.pay({ channel: 2, //0为微信支付, 1为支付宝, 2为银联云闪付 orderid: new Date().getTime().toString(), title : "购买VIP会员", amount : 0.01 //当前手机厂商 pay 类型,可选,仅支持安卓 //用 jsBridge.unionSeInfo 函数获取 //, seType : "" }, function(succ, text) { if (succ) { alert("支付成功"); } else { alert("支付失败或取消了支付"); } });
• 在你的服务器端使用 银联官方接口 获取 "银联受理订单号 tn",交由此 js 函数发起支付;
• 此支付方式 不需要 配置机密信息(pfx证书)到打包平台;
jsBridge.unionPay({ tn: "替换成你的银联受理订单号" //用 jsBridge.unionSeInfo 函数获取到的当前手机厂商 pay 类型,可选(仅安卓,iOS始终忽略此参数) //, seType : "" }, function (succ, text) { if (succ) { alert("支付成功"); } else { alert("支付失败或取消了支付"); } });
获取银联手机厂商 pay 类型
jsBridge.unionSeInfo(function (succ, text) { if (succ) { alert("seType:" + text); } else { alert("error:" + text); } });
检查用户是否已安装银联闪付App
jsBridge.unionPayAppInstalled(function (yes) { alert(yes ? "已安装" : "未安装"); });
• 农行掌上银行APP支付 SDK 的 js API 接口映射;
• 请参考农行官方手册调用服务器端接口获取支付订单号 token,交由此 js 接口发起App支付;
jsBridge.abcPay({ token: "1111112222222233333" }, function (succ, text) { if (succ) { alert("支付成功"); } else { alert("支付失败或取消了支付"); } });
检查用户是否已安装农行掌上银行APP
jsBridge.abcPayAppInstalled(function (yes) { alert(yes ? "已安装" : "未安装"); });
• 工商银行APP支付 SDK 的 js API 接口映射;
• 请参考工行官方手册调用服务器端接口获取支付信息,交由此 js 接口发起App支付;
//注意,请使用 生产环境 参数 jsBridge.icbcPay({ interfaceName : "接口名", interfaceVersion: "接口版本号", tranData : "交易信息", merSignMsg: "交易信息签名", merCert : "商户公钥文件信息" }, function (succ, text) { if (succ) { alert("支付成功:" + text); } else { alert("支付失败或取消了支付:" + text); } });
微信/QQ/支付宝 登录;微信一次性订阅消息、拉起小程序;
检查设备是否已安装微信客户端
jsBridge.wxAppInstalled(function(yes){ alert(yes ? "已安装" : "未安装"); });
通过js函数回调获取登录结果及授权参数
jsBridge.wxLogin(function(succ, ret) { if (succ) { alert(JSON.stringify(ret)); } else { alert("登录失败或取消了登录"); } }); /* 1. 登录成功的结果在 ret 中返回,是个 json 对象: 2. 如果你在打包平台填写了 微信AppSecret,APP会用授权码 code 去获取 openid, access_token 等信息,由于授权码 code 只能使用一次,所以你再用 code 去腾讯接口获取信息会失败; 3. 如果没有填写 微信AppSecret, ret 中只返回 code,你需要在服务器端用 code + 微信AppSecret 去腾讯接口获取信息; { code: //授权码,只能使用一次 openid: //如果在打包平台填写了 微信AppSecret 将返回此字段 access_token: //如果在打包平台填写了 微信AppSecret 将返回此字段 userinfo: { //用户信息,如果在打包平台填写了 微信AppSecret 将返回此字段 nickname: "xxx" //... } } */
登录结果及授权参数将通过 URL Query 传到给你指定的链接
jsBridge.wxLogin("./u.cshtml"); /* 1. 登录成功后将授权码 code 等参数附加到 url 上跳转链接 2. url 参数请参见 微信登录 通过函数回调 u.cshtml?code=xxx&openid=xxx */
jsBridge.wxSubscribeMsg({ template_id: "一次性订阅消息模板ID", scene : 123 //订阅场景值 }, function(succ, data) { if (succ) { alert("成功\n" + JSON.stringify(data)); } else { alert("失败\n" + JSON.stringify(data)); } }); /* 参数说明: { template_id: //字符串类型,你在微信开放平台所申请移动应用的一次性订阅消息模板ID,请在微信开放平台上查看; scene : //数字(0-10000之间),用来标识订阅场景值 } ------------------- 回调函数参数说明: succ : //布尔类型,标识是否成功授权 data : //JSON 类型,授权成功时返回如下数据: { openid : //字符串,用户唯一标识 template_id: //字符串,订阅消息模板ID scene : //数字,订阅场景值 } */
拉起微信小程序,请参考官方 说明。
user_name:
path:
type:
jsBridge.wxLaunchMiniProgram({ user_name: "{{wxLaunchMiniProgram.user_name}}", path : "{{wxLaunchMiniProgram.path}}", type : {{wxLaunchMiniProgram.type}} //版本类型 }, function(succ, data) { if (succ) { alert("成功\n" + JSON.stringify(data)); } else { alert("失败\n" + JSON.stringify(data)); } }); /* 参数说明: { user_name: //字符串,小程序原始id,如 gh_d43f693ca31f path : //字符串,拉起小程序页面的可带参路径,不填默认拉起小程序首页,对于小游戏,可以只传入 query 部分,来实现传参效果,如:传入 "?foo=bar" type : //数字,小程序版本类型,0 正式版,1 开发版,2 体验版(默认 0) } ------------------- 回调函数参数说明: 【注意,需要在小程序中点击 <button open-type="launchApp"> 拉起APP才会有回调通知,请参考 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html】 succ : //布尔类型,是否成功 data : //JSON 类型,成功时返回如下数据: { ext_msg : //字符串,对应小程序组件 <button open-type="launchApp"> 中的 app-parameter 属性 } */
拉起微信客服,请参考官方 说明。
corpId:
url:
jsBridge.wxOpenCustomerServiceChat({ //必须,字符串类型,企业ID corpId: "{{wxOpenCustomerServiceChat.corpId}}", //必须,字符串类型,客服链接 url : "{{wxOpenCustomerServiceChat.url}}" }, function(succ, data) { if (succ) { alert("成功\n" + JSON.stringify(data)); } else { alert("失败\n" + JSON.stringify(data)); } });
通过js函数回调获取登录结果及授权参数
jsBridge.qqLogin(function(succ, ret) { if (succ) { alert(JSON.stringify(ret)); } else { alert("登录失败或取消了登录"); } }); /* 登录成功的结果在 ret 中返回,是个 json 对象: { openid: "wwwwwwwwwwwwwww", access_token: "aaaaaaaaaaaaaaa", userinfo: { //用户资料 nickname: "sssssss" //... } } */
登录结果及授权参数将通过 URL Query 传到给你指定的链接
jsBridge.qqLogin("./u.cshtml"); /* 如果登录成功会跳转到链接 u.cshtml?openid=xxxx&access_token=xxxx&userinfo=xxxx userinfo 参数是 JSON.stringify(userinfo) 的 URLEncode 编码 */
发起支付宝APP登录
authInfo:
jsBridge.alipayLogin({ //必须,字符串类型,授权请求参数 authInfo: "{{alipayLogin.authInfo}}" }, function(succ, result) { if (succ) { alert(JSON.stringify(result)); } else { alert("登录失败或取消了登录\n" + JSON.stringify(result)); } }); /* 回调参数 succ 为 true 表示授权成功,result 示例: { resultStatus: "9000", result: "success=true&auth_code=d9d1b5acc26e461dbfcb6974c8ff5E64&result_code=200&user_id=2088003646494707", memo : "" } • result 即为授权信息,请提交到您的服务器,调用支付宝服务器端接口获取 access_token 和用户信息,服务器端SDK:https://opendocs.alipay.com/open/00y8k9 ; • resultStatus 状态码说明:https://opendocs.alipay.com/open/218/105327#%E7%8A%B6%E6%80%81%E7%A0%81%20result_status%20%E8%AF%B4%E6%98%8E */
分享
//调用安卓/iOS系统自带分享,无需配置打包微信、QQ等插件 //分享文件请使用 文件系统插件的 fs.share 接口 jsBridge.sysShare({ //可选,弹窗标题 //仅用于Android,部分设备可能不会显示标题 title: "发现一个好东西", //必须,分享内容,应提供 text 或 images 之一 content: { //文本 text: "分享一段文本内容" } }, function(succ, res) { if (!succ) { alert(JSON.stringify(res)) } });
jsBridge.sysShare({ title: "发现一个好东西", content: { //可选,一张或多张图片 images: [ "http://i.yimenyun.net/sys/1.jpg", "http://i.yimenyun.net/sys/2.jpg", "http://i.yimenyun.net/sys/3.jpg" ] } }, function(succ, res) { if (!succ) { alert(JSON.stringify(res)) } });
弹出分享菜单,用默认值分享
jsBridge.share();
弹出分享菜单,用指定的标题分享,其他用默认值
jsBridge.share({ title: "这是自定义分享标题(未指定则为网页标题)" }, function(succ) { alert(succ ? "分享成功" : "分享失败"); });
指定了 to 参数,不会弹出分享菜单,直接呼出对应的APP完成分享
jsBridge.share({ //0 微信朋友圈 //1 微信好友 //2 QQ好友 //3 QQ空间 to : 0, title : "可以指定标题", link : "https://m.baidu.com", imgUrl: "http://i.cdn.yimenapp.com/sys/logo.png", desc : "摘要:内事问百度,外事找谷歌,你懂的。" });
当点击原生标题栏上或功能面板上的分享按钮时调用,跟微信公众号内的分享接口用法相同。
参数为 JSON 数据类型
onMenuShareTimeline 当分享到微信朋友圈时
onMenuShareFriend 当分享到微信好友时
onMenuShareQQ 当分享到QQ好友时
onMenuShareQZone 当分享到QQ空间时
jsBridge.onMenuShareTimeline({ title : "自定义的标题", link : "https://www.anzhuoe.com/doc/", imgUrl: "http://i.cdn.yimenapp.com/sys/logo.png", desc : "自定义的摘要内容", success: function() { alert("分享成功"); }, cancel: function() { alert("取消了分享或分享失败"); } }); alert("已设置,请点击分享到朋友圈试试。");
当点击原生标题栏上或功能面板上的分享按钮时调用,注意参数为 function 函数。
参数为 function 函数
onMenuShareTimeline 当分享到微信朋友圈时
onMenuShareFriend 当分享到微信好友时
onMenuShareQQ 当分享到QQ好友时
onMenuShareQZone 当分享到QQ空间时
jsBridge.onMenuShareTimeline(function(){ //这是点击分享到朋友圈时需要执行的函数 //可以做分享网页、图片、文字、多图等任何事情 alert("你点击了分享到微信朋友圈按钮"); }); alert("已设置,请点击分享到朋友圈试试。");
分享纯文字到微信好友或微信朋友圈
结果回调 callback: function(succ) { }
jsBridge.shareText({ //to: 0 微信朋友圈, 1 微信好友 text: "纯文字分享...文本内容" }, function(succ) { alert(succ ? "分享成功" : "分享失败"); });
分享纯图片,不支持QQ空间
结果回调请参考shareText
jsBridge.shareImage({ //0 微信朋友圈 //1 微信好友 //2 QQ好友 //to : 0, imgUrl: "http://i.cdn.yimenapp.com/sys/1.jpg" });
分享音乐(音频),不支持QQ空间
结果回调请参考shareText
jsBridge.shareMusic({ //0 微信朋友圈 //1 微信好友 //2 QQ好友 //to : 0, title: "音乐分享标题", desc : "可以写一点描述", //图片链接 imgUrl: "https://i.cdn.yimenapp.com/sys/logo.png", //点击跳转的链接 targetUrl: "https://m.baidu.com/", //音乐链接 musicUrl: "https://i.cdn.yimenapp.com/sys/music.mp3", //封面 songAlbumUrl: "https://i.cdn.yimenapp.com/sys/1.jpg", //歌词 songLyric : "Hello Lyric" });
分享视频(仅支持微信)
结果回调请参考shareText
jsBridge.shareVideo({ //0 微信朋友圈 //1 微信好友 //to : 0, title: "视频分享标题", desc : "可以写一点描述", //图片链接 imgUrl: "http://i.cdn.yimenapp.com/sys/logo.png", //视频链接 videoUrl: "http://flv3.people.com.cn/dev1/mvideo/vodfiles/2017/08/08/992bfdfef09d80e809cede9c9dd04916_c.mp4" });
jsBridge.shareWxMiniProgram({ //微信小程序 原始ID userName: "gh_fa2c1baa7833", //小程序页面路径 path : "", //标题 title : "分享的标题", //描述文字 description: "描述文字", //是否使用带 shareTicket 的分享 withShareTicket: false, //类型,0正式版,1测试版,2体验版 programType: 0, //封面缩略图,需以 http 或 https 开头 thumbImage: "http://i.yimenyun.net/sys/4.jpg", //兼容低版本微信客户端的网页链接 webPageUrl: "https://www.anzhuoe.com/" });
一键分享多张图片到微信朋友圈、QQ空间等
结果回调 callback: function(succ) { }
jsBridge.shareImages({ text : "这是一小段多图分享的说明文本\n https://m.baidu.com/", images: [ "http://i.cdn.yimenapp.com/sys/1.jpg", "http://i.cdn.yimenapp.com/sys/2.jpg", "http://i.cdn.yimenapp.com/sys/3.jpg", "http://i.cdn.yimenapp.com/sys/4.jpg", "http://i.cdn.yimenapp.com/sys/5.jpg", "http://i.cdn.yimenapp.com/sys/6.jpg", "http://i.cdn.yimenapp.com/sys/7.jpg", "http://i.cdn.yimenapp.com/sys/8.jpg", "http://i.cdn.yimenapp.com/sys/9.jpg" ]}, function(succ) { //仅苹果版支持回调分享结果 if (succ) { alert("发送成功"); } else { alert("失败或取消了"); } });
图片相关
多张组图浏览,支持横竖屏自适配、手势缩放、批量保存到相册、一键分享朋友圈;
可配置双击屏幕自动触发多图浏览,无需调用js接口。
jsBridge.showImages({ //屏幕方向 0自适应,1横屏,2竖屏 screenOrientation: 0, //显示保存到相册按钮 save: true, //显示一键分享多图按钮 share: true, //多图分享摘要文字 share_text: "WebApp快捷打包 多图分享摘要", //当前页显示第几张(从0开始,默认0) startIndex: 2, //自动滚动播放延时毫秒数,0 则不自动滚动 autoScrollInterval: 5000, //图片组, text 是文字说明 items:[ { url :"http://i.cdn.yimenapp.com/sys/1.jpg", text:"美丽的大自然 01" }, { url :"http://i.cdn.yimenapp.com/sys/2.jpg", text:"美丽的大自然 02" }, { url :"http://i.cdn.yimenapp.com/sys/3.jpg" }, { url :"http://i.cdn.yimenapp.com/sys/4.jpg" }, { url :"http://i.cdn.yimenapp.com/sys/5.jpg" }, { url :"http://i.cdn.yimenapp.com/sys/6.jpg", text:"美丽的湖泊" }, { url :"http://i.cdn.yimenapp.com/sys/7.jpg" } ] });
图片链接:
//以 http:// 或 https:// 打头的图片链接 jsBridge.saveImageToAlbum("{{saveImageToAlbum1.url}}", function(succ) { alert(succ ? "保存成功" : "保存失败:下载失败或没有相册使用权限"); });
保存图片 Base64 URL 到相册。
//图片 Base64 URL jsBridge.saveImageToAlbum("data:image/png;base64,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", function(succ) { alert(succ ? "保存成功" : "保存失败:转码失败或没有相册使用权限"); });
保存图片 Base64 内容到相册。
//图片 Base64 内容 jsBridge.saveImageToAlbum("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", function(succ) { alert(succ ? "保存成功" : "保存失败:转码失败或没有相册使用权限"); });
批量保存图片到相册。
//图片链接或Base64图片数组 jsBridge.saveImagesToAlbum([ "http://i.cdn.yimenapp.com/sys/1.jpg", "http://i.cdn.yimenapp.com/sys/2.jpg", "http://i.cdn.yimenapp.com/sys/3.jpg", "http://i.cdn.yimenapp.com/sys/4.jpg", "http://i.cdn.yimenapp.com/sys/5.jpg" ], function(succ) { if (succ) { jsBridge.toast("已保存"); } else { alert("保存失败:下载失败或没有相册使用权限"); } });
保存 Web 截屏图片到相册(仅截取 Web 浏览窗口)。
jsBridge.saveScreenshotToAlbum(function(succ) { alert(succ ? "保存成功" : "保存失败:没有相册使用权限"); });
链接
//链接请以 http:// 或 https:// 开头 jsBridge.saveVideoToAlbum("{{saveVideoToAlbum.url}}", function(succ) { alert(succ ? "保存成功" : "下载失败或没有相册使用权限"); });
扫一扫
缓存/Cookie
获取缓存大小
jsBridge.cacheSize(function(size) { var txt = size + "字节\n"; txt += (size / 1024 / 1024.0).toFixed(2) + "MB"; alert(txt); });
清除缓存
jsBridge.clearCache(function() { alert("缓存已清除"); });
清除 Cookie
jsBridge.clearCookie(); alert("Cookie 已清除");
前进/后退
检查是否可以执行 history.forward()
jsBridge.canGoForward(function(can){ alert(can); });
检查是否可以执行 history.back()
jsBridge.canGoBack(function(can){ alert(can); });
一键返回首页,无论当前处于多少层级的子页面。
// 参数 true: 同时跳转到首页链接, false: 不跳转链接 jsBridge.backToHome(true);
消息推送/通知
腾讯
百度开放平台
高德地图
APP 信息
jsBridge.appSettings();
jsBridge.appDownloads();
获取APP安装ID,升级安装不会变,卸载APP重新安装会改变。
jsBridge.appInfo(function(info){ //返回json类型 /** { appId :123, //打包平台 APP ID appVer :101, //版本号 appVerName :1.0.0, //版本名 appName :"APP名称", url :"http://...打包网址", packageName :"com.xxx.yyy", //包名 platformVer :26, //平台版本号 deviceName :"设备名称", resolution :"1080x1920", //屏幕分辨率 deviceId :"不推荐,请使用 getIMEI/getOAID 接口", installId :"安装ID,卸载APP重装会变", certMD5 :"应用MD5签名,仅安卓端", certSHA1 :"应用SHA1签名,仅安卓端" } **/ alert(JSON.stringify(info)); });
• 进入系统设置项目,设置服务状态;
• 部分开关功能可以先调用 getSettingState 接口检查设置项的开关状态;
• 选择一项运行测试:
/**
整形参数
0 系统设置(默认)
1 定位
2 Wifi无线网络
3 蓝牙
4 显示
5 声音/震动
6 通知
7 语言
**/
jsBridge.openSetting(0);
• 选择一项运行测试:
/**
整形参数
1 定位 - 是否启用GPS定位
2 定位 - 是否启用网络定位
3 蓝牙服务
6 通知
**/
jsBridge.getSettingState(1, function(on) {
alert(on ? "已开启" : "已关闭");
});
/**
回调参数 on, 布尔类型,指示开关状态
true : 已开启
false: 已关闭
**/
• 获取移动设备识别码 IMEI/MEID,需要 READ_PHONE_STATE 隐私权限;
• 多个 IMEI/MEID 用逗号(,)分隔,拨号输入 *#06# 可查看;
• Android 10+ 不能获取 IMEI,此接口返回 Android Id;
• 仅支持安卓,苹果版推荐使用 getIDFA。
jsBridge.getIMEI(function(imei){ if (imei) { alert(imei); } else { alert("获取失败或没有权限"); } });
• 详情请参考 移动安全联盟 官方说明;
• 除了各厂家较老的安卓系统基本都支持,可配合 getIMEI 使用;
• 仅支持安卓,苹果版推荐使用 getIDFA。
jsBridge.getOAID(function(oaid){ if (oaid) { alert(oaid); } else { alert("获取失败或此设备不支持"); } });
• 获取广告标识符 IDFA;
• 设置 - 隐私 - 跟踪,设置跟踪开关;
• 仅支持苹果,安卓版推荐使用 getIMEI / getOAID;
jsBridge.getIDFA(function(idfa){ if (idfa) { alert(idfa); } else { alert("没有权限或已限制跟踪"); } });
• 由于隐私限制,此设备ID已不可靠。
• 安卓推荐使用 getIMEI + getOAID
• 苹果推荐使用 getIDFA
jsBridge.getDeviceId(function(id){ alert(id); });
获取APP安装ID,升级安装不会变,卸载APP重新安装会改变。
jsBridge.getInstallId(function(id){ alert(id); });
用户按主屏HOME键,有电话拨入等, App被推到后台时触发。
jsBridge.onAppEnterBackground(function(){ console.log("enter background"); }); alert("已设置,请按主屏HOME键再打开App。"); //可以用 h5 本身的特性 document.addEventListener('visibilitychange', function (event) { if (document.hidden) { console.log('页面不可见、失活。'); } else { console.log('页面可见、激活。'); } });
当App被激活,回到前台时触发。
jsBridge.onAppEnterForeground(function(){ alert("enter foreground~~") }); alert("已设置,请按主屏HOME键切换App。");
获取设备配置的摄像头数量和类型
jsBridge.checkCamera(function (res) { alert(JSON.stringify(res)); }); /* res 返回参数: { count: //摄像头数量,int 类型 front: //是否有前置摄像头,bool 类型 back : //是否有后置摄像头,bool 类型 } */
//请求 相机、写相册 权限 jsBridge.requestPermissions([ "Camera", "WritePhotos" ], function(res) { if (res.granted) { alert("已授权"); } else { alert("已拒绝,不再询问: " + res.neverAskAgain); } }); /* 参数说明: 权限,字符串数组,一次可以申请单个或多个权限: ReadPhotos 读取相册 WritePhotos 写入相册 Camera 相机 Microphone 麦克风 Location 定位 ReadContacts 读取联系人 WriteContacts 写入联系人 BlueTooth 蓝牙 ReadPhoneState 手机设备信息(仅支持安卓) PostNotifications 通知权限(仅支持Android13+) 回调函数 res 参数说明: { granted : 布尔类型,是否已获得请求的全部权限 neverAskAgain: 布尔类型,如果拒绝了,用户是否勾选了 “不再询问” } 注意:如果 neverAskAgain == true ,再次 requestPermissions 请求隐私权限时 App 不会弹出授权提示框,此时你需要提示用户进入手机系统设置手动开启权限。调用 jsBridge.appSettings() 可以直接打开本 App 的系统设置界面。 */
//请求定位权限 jsBridge.requestPermissions([ "Location" ], function(res) { if (res.granted) { alert("已授权"); } else { alert("未授权,不再询问: " + res.neverAskAgain); } });
阿里百川
新浪微博
蓝牙(BLE)
传感器
iOS内购(In-App Purchase)
多屏异显
音视频
网络
融云 - IM即时通讯与音视频通信
今日头条/巨量引擎/字节跳动
海外
移动应用统计
无需代码集成,申请接入 https://mtj.baidu.com/
无需代码集成,申请接入 https://mta.qq.com/mta/ctr_index/census
其他第三方SDK
打印/扫描/智能终端
其他
jsBridge.toast('Hello, App.');
jsBridge.vibrate();
jsBridge.showSplash();
jsBridge.home();
//退出,不结束App进程 jsBridge.exit();
//布尔参数,退出App后是否需要结束进程,默认 false jsBridge.exit(true);
//重启应用 //仅支持 Android 10 以下系统 //Android 10 及以上相当于 jsBridge.exit(true); 需要手工启动应用 jsBridge.restart();
发起网络访问请求,原生网络请求,性能高,也不会有 ajax 跨域限制问题
jsBridge.net({ url: "https://www.anzhuoe.com/doc/echo.cshtml", method: "POST", params: { name: "World" }, indicator: true }, function (succ, text) { if (succ) { alert("服务器返回的字符串\n\n" + text); } else { alert("网络访问请求失败"); } });