敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,了解更多。
♦ JS-SDK 引用方式:
♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20251019.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://appframe.yimenapp.com/doc/u2.cshtml',
showTitle: false,
fullScreen: true,
screenOrientation: 1
});
//自适应横/竖屏方式打开
jsBridge.open({
url : 'https://appframe.yimenapp.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.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会员 的订单 S63897126823 0.01元支付;
支付成功跳转到https://m.baidu.com/,失败跳转到 https://xw.qq.com/;
注意,要对各参数进行 UrlEncode UTF-8 编码;
https://g.yimenyun.net/pay/?channel=0&orderid=S63897126823&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会员 的订单 S63897126823 0.01元支付;
支付成功跳转到https://m.baidu.com/,失败跳转到 https://xw.qq.com/;
注意,要对各参数进行 UrlEncode UTF-8 编码;
https://g.yimenyun.net/pay/?channel=1&orderid=S63897126823&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会员 的订单 S63897126823 0.01元支付;
支付成功跳转到https://m.baidu.com/,失败跳转到 https://xw.qq.com/;
注意,要对各参数进行 UrlEncode UTF-8 编码;
https://g.yimenyun.net/pay/?channel=2&orderid=S63897126823&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"
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(success, res) {
if (success) {
alert("成功\n" + JSON.stringify(res));
} else {
alert("失败\n" + JSON.stringify(res));
}
});
businessType:
query:
//要求微信 APP 版本 >= 8.0.45
jsBridge.wxOpenBusinessView({
//必须,业务类型,如 微信转账 requestMerchantTransfer,其他类型请参考其文档说明。
businessType: "{{wxOpenBusinessView.businessType}}",
//必须,业务参数,具体要求请参考业务类型对应的说明文档
query: "{{wxOpenBusinessView.query}}"
}, function(success, res) {
if (success) {
//res.businessType
//res.extMsg 微信返回的业务数据
alert("成功\n" + JSON.stringify(res));
} else {
alert("失败\n" + JSON.stringify(res));
}
});
通过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))
}
});
url:
fileName:
mimeType:
jsBridge.sysShare({
title: "发现一个好东西",
content: {
file: {
//必需,文件链接,支持 http(s):// 和 data:{mime};base64,xxxx 链接
url: "{{sysShare_file.url}}",
//分享出去的文件名,未提供则从 url 推断文件名
fileName: "{{sysShare_file.fileName}}",
//类型,未提供则从文件扩展名推断类型
//系统一般以此属性来判定可接收分享文件的目标应用,请勿随意填写
mimeType: "{{sysShare_file.mimeType}}"
}
}
}, function(succ, res) {
if (!succ) {
alert(JSON.stringify(res))
}
});
弹出分享菜单,用默认值分享
jsBridge.share();
弹出分享菜单,用指定的标题分享,其他用默认值
jsBridge.share({
title: "这是自定义分享标题(未指定则为网页标题)"
}, function(succ) {
alert(succ ? "分享成功" : "分享失败");
});
指定了 to 参数,不会弹出分享菜单,直接呼出对应的APP完成分享
to:
jsBridge.share({
//0 微信朋友圈
//1 微信好友
//2 QQ好友
//3 QQ空间
to : {{share.to}},
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://appframe.yimenapp.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) { }
to:
jsBridge.shareText({
//to: 0 微信朋友圈, 1 微信好友
to: {{share.to}},
text: "纯文字分享...文本内容"
}, function(succ) {
alert(succ ? "分享成功" : "分享失败");
});
分享纯图片,不支持QQ空间
结果回调请参考shareText
to:
jsBridge.shareImage({
//0 微信朋友圈
//1 微信好友
//2 QQ好友
to: {{share.to}},
imgUrl: "http://i.cdn.yimenapp.com/sys/1.jpg"
});
分享音乐(音频),不支持QQ空间
结果回调请参考shareText
to:
jsBridge.shareMusic({
//0 微信朋友圈
//1 微信好友
//2 QQ好友
to: {{share.to}},
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
to:
jsBridge.shareVideo({
//0 微信朋友圈
//1 微信好友
to: {{share.to}},
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://appframe.yimenapp.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: 已关闭
**/
用户按主屏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://appframe.yimenapp.com/doc/echo.cshtml",
method: "POST",
params: {
name: "World"
},
indicator: true
}, function (succ, text) {
if (succ) {
alert("服务器返回的字符串\n\n" + text);
} else {
alert("网络访问请求失败");
}
});