敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议。
♦ JS-SDK 引用方式:
♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20260727.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
在浏览器客户端通过 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中
}
生成安装包时设置的渠道名称会添加到 User-Agent 中,规则为 LT/{渠道名称}
//js 正则匹配获取渠道名称
const channel = /LT\/(\w+)/.exec(navigator.userAgent);
alert(channel ? channel[1] : '没有渠道信息');
//也可直接使用 jsBridge.channel 属性,如果未设置渠道名称打包则返回 null
alert(`渠道 ${jsBridge.channel}`);
属性
获取网页是否在APP中打开的
if (jsBridge.inApp) {
alert("你正在APP中使用");
} else {
alert("不在APP中");
}
//如果未设置渠道名称打包则返回 null alert(jsBridge.channel);
//获取在 生成安装包 页面上设置的数字版本号,如 123
alert(jsBridge.appVersion);
//解决 没有打包插件、xxx function not supported 不支持某个函数的问题
//1. 确保您的项目引用了最新版 jsBridge 库;
//2. 如果应用在运营过程中新增了某个插件,在旧版应用里面调用新插件的 js 接口会出现 没有打包插件 的提示;
//3. 插件版本升级可能会新增 js 接口,在旧版应用里面调用新的 js 接口会出现 xxx function not supported 不支持某个函数的提示;
//请根据你的应用版本发布情况,判断从某个版本开始才包含了新增插件或接口
if (jsBridge.appVersion > 123) {
//调用新的接口
//...
}
获取当前页面是否在主窗口中( false 则为子窗口)
//true 主窗口, false 子窗口 //需在 jsBridge.isReady() 之后调用 alert(jsBridge.isRoot);
界面控制
//全屏并用横屏方式打开
jsBridge.open({
url : 'https://app.yimenapp.net/doc/u2.cshtml',
showTitle: false,
fullScreen: true,
screenOrientation: 1
});
//自适应横/竖屏方式打开
jsBridge.open({
url : 'https://app.yimenapp.net/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.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({
//是否整页截屏(滚屏截图,长屏)
//建议打包并启用 X5内核 截取整屏(长屏),不然可能存在兼容问题
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({
//建议打包并启用 X5内核 截取整屏(长屏),不然可能存在兼容问题
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会员 的订单 S63921786827 0.01元支付;
支付成功跳转到https://m.baidu.com/,失败跳转到 https://xw.qq.com/;
注意,要对各参数进行 UrlEncode UTF-8 编码;
https://g.yimenyun.net/pay/?channel=0&orderid=S63921786827&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会员 的订单 S63921786827 0.01元支付;
支付成功跳转到https://m.baidu.com/,失败跳转到 https://xw.qq.com/;
注意,要对各参数进行 UrlEncode UTF-8 编码;
https://g.yimenyun.net/pay/?channel=1&orderid=S63921786827&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会员 的订单 S63921786827 0.01元支付;
支付成功跳转到https://m.baidu.com/,失败跳转到 https://xw.qq.com/;
注意,要对各参数进行 UrlEncode UTF-8 编码;
https://g.yimenyun.net/pay/?channel=2&orderid=S63921786827&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(success, res) {
if (success) {
//授权码 res.code 请参考服务器端接口通过code获取access_token
alert(JSON.stringify(res));
} else {
alert("登录失败或取消了登录");
}
});
/*
1. 登录成功的结果在 ret 中返回,是个 json 对象:
2. 如果你在打包平台填写了 微信AppSecret,APP会用授权码 code 去获取 openid, access_token 等信息,由于授权码 code 只能使用一次,所以你再用 code 去腾讯接口获取信息会失败;
3. 如果没有填写 微信AppSecret, res 中只返回 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