WebApp快捷打包
功能测试页 (包含所有 js API 接口的示例代码)
可以直接打包本网址体验测试各项功能
转到模块插件

敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议。

JS-SDK 引用方式:

♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20260727.zip,请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库;

♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package

URL 控制参数

隐藏原生标题栏

转到

u.cshtml?xapp-navigation=0

u.cshtml#xapp-navigation=0

显示原生标题栏

转到
//系统默认是显示原生标题栏的,你可以在“配置APP”页面的“原生标题栏”处设置默认显示或隐藏

u.cshtml

u.cshtml?xapp-navigation=1

u.cshtml#xapp-navigation=1

在本窗口中打开链接

转到

u.cshtml?xapp-target=self

在新窗口中打开链接

转到

u.cshtml?xapp-target=blank

在系统浏览器中打开链接

转到

u.cshtml?xapp-target=browser

隐藏分享按钮

转到

u.cshtml?xapp-share=0

显示分享按钮

转到

u.cshtml?xapp-share=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

禁用下拉刷新

转到

u.cshtml?xapp-refresh=0

启用下拉刷新

转到

u.cshtml?xapp-refresh=1

判断网页是否在APP内打开

客户端中通过 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中
}

获取渠道名称 channel

生成安装包时设置的渠道名称会添加到 User-Agent 中,规则为 LT/{渠道名称}

//js 正则匹配获取渠道名称
const channel = /LT\/(\w+)/.exec(navigator.userAgent);
alert(channel ? channel[1] : '没有渠道信息');

//也可直接使用 jsBridge.channel 属性,如果未设置渠道名称打包则返回 null
alert(`渠道 ${jsBridge.channel}`);
JavaScript API 接口 jsBridge

属性

inApp 否在运行在 APP 中

获取网页是否在APP中打开的

if (jsBridge.inApp) {
  alert("你正在APP中使用");
} else {    
  alert("不在APP中");
}

channel 渠道名称(生成安装包时设置)

//如果未设置渠道名称打包则返回 null
alert(jsBridge.channel);

appVersion 应用版本号

//获取在 生成安装包 页面上设置的数字版本号,如 123
alert(jsBridge.appVersion);

//解决 没有打包插件xxx function not supported 不支持某个函数的问题
//1. 确保您的项目引用了最新版 jsBridge 库;
//2. 如果应用在运营过程中新增了某个插件,在旧版应用里面调用新插件的 js 接口会出现 没有打包插件 的提示;
//3. 插件版本升级可能会新增 js 接口,在旧版应用里面调用新的 js 接口会出现 xxx function not supported 不支持某个函数的提示;
//请根据你的应用版本发布情况,判断从某个版本开始才包含了新增插件或接口
if (jsBridge.appVersion > 123) {
  //调用新的接口
  //...
}

isRoot

获取当前页面是否在主窗口中( false 则为子窗口)

//true 主窗口, false 子窗口
//需在 jsBridge.isReady() 之后调用
alert(jsBridge.isRoot);

界面控制

UI 界面控制选项

转到

open 在新窗口中打开 全屏、横屏

//全屏并用横屏方式打开
jsBridge.open({
  url : 'https://app.yimenapp.net/doc/u2.cshtml',
  showTitle: false,
  fullScreen: true,
  screenOrientation: 1
});

open 在新窗口中打开 自适应横竖屏

//自适应横/竖屏方式打开
jsBridge.open({
  url : 'https://app.yimenapp.net/doc/u2.cshtml',
  showTitle: true,
  titleColor: "#FFFFFF",    
  titleTextColor: "#000000",    
  statusBarColor: "#FFFFFF",
  statusBarBlackText: true,
  screenOrientation: 0
});

openInBrowser 在浏览器中打开链接

jsBridge.openInBrowser('https://m.baidu.com');

close 关闭窗口

转到
//需在子窗口中执行 close
//主窗口中执行 close 无效
//如需退出 APP 可以在任何地方执行 jsBridge.exit()
jsBridge.close();

close 关闭窗口,并在父窗口执行js代码

转到

关闭当前窗口,并在父窗口执行指定的 js 代码

jsBridge.close("alert('欢迎回到我这里~~\n' + location.href)");

onClose 当关闭当前窗口时触发

转到

当关闭当前窗口时执行指定的回调函数,回调函数返回 true / false 以指示是否允许关闭。

//需在子窗口中调用,主窗口中执行无效
jsBridge.onClose(function(appData){
  console.log(JSON.stringify(appData));
  if (confirm("确实要关闭吗?")) {
    return true;  //允许关闭
  } else {
    return false; //不关闭
  }
});

onBackPressed 当按后退键触发(仅Android)

转到

当Web窗口可后退(canGoBack)时,用户点按安卓后退键时触发,回调函数返回 true / false 以指示是否允许后退。

//当页面可后退时才会触发
//仅支持 Android
jsBridge.onBackPressed(function(appData){
  console.log(JSON.stringify(appData));
  if (confirm("确实要后退吗?")) {
    return true;  //允许后退
  } else {
    return false; //不允许
  }
});

evalInNavbar 导航栏控制

转到

1. 导航栏实际上是一个Web窗口,你可以在里面执行任意 js 语句;
2. 如未启用导航栏则不执行任何操作;

evalInToolbar 在工具栏中执行 js

1. 工具栏实际上是一个Web窗口,你可以在里面执行任意 js 语句; 2. 如未启用工具栏则不执行任何操作;

jsBridge.evalInToolbar("location.reload()");

launch 启动 URI 链接

转到

♦ 可以通过 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);
});

actionButton 显示/隐藏浮动按钮

jsBridge.actionButton({
  //true 显示, false 隐藏
  visible: (window.bool0 = !window.bool0)
});

action 显示APP配置里勾选的按钮面板

//显示APP配置里勾选的按钮面板
jsBridge.action();

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);

onMenuAction 但点击更多按钮时触发

但点击更多按钮,显示功能按钮面板时触发。你可以调用这个方法指定显示哪些按钮。

//要显示的按钮数组
var btns = [
  "ShareWxFriend",  //分享到微信好友
  "ShareWxTimeline",//分享到微信朋友圈
  "CopyLink",       //复制链接
  "Refresh",        //刷新
  "OpenInBrowser"   //在浏览器中打开
];
jsBridge.onMenuAction(btns);
alert("已设置");

uiShare 显示/隐藏 分享按钮

//true 显示, false 隐藏
window.bool2 = !window.bool2;
jsBridge.uiShare(window.bool2);

uiActions 显示/隐藏 更多菜单按钮

//true 显示, false 隐藏    
window.bool3 = !window.bool3;
jsBridge.uiActions(bool3);

uiRefresh 启用/禁用 下拉刷新

//true 启用, false 禁用    
window.bool4 = !window.bool4;
jsBridge.uiRefresh(bool4);

侧滑边栏

侧滑边栏

转到

纯原生代码实现侧滑边栏,沉侵式设计,带来良好的用户体验。

网页截屏

captureWebPage 截屏网页快照 - 保存到相册

//保存到相册
jsBridge.captureWebPage({
  //是否整页截屏(滚屏截图,长屏)
  //建议打包并启用 X5内核 截取整屏(长屏),不然可能存在兼容问题
  fullPage  : false,
  //截屏后是否弹出分享
  share     : true,
  //是否将图片以 jpg base64 格式返回, 默认 false
  //false 保存到相册
  //true 以 base64 格式返回
  needResult: false
});

captureWebPage 截屏网页快照 - 返回jpg base64

//返回 jpg base64
jsBridge.captureWebPage({
  needResult: true
}, function(success, res) {
  console.log(res.base64);
  if (res.base64) {
    alert("成功,base64 字符数量 " + res.base64.length);
  }
});

captureWebPage 截屏网页快照(整页截屏,长图)

jsBridge.captureWebPage({
  //建议打包并启用 X5内核 截取整屏(长屏),不然可能存在兼容问题
  fullPage: true,
  share   : true
});

长按(链接、图片)

长按(链接、图片)

转到

长按(链接、图片或带链接的图片)弹出操作菜单。

剪贴板

setClipboardText 设置剪贴板文本

设置剪贴板文本

var text = "Hello 世界 " + new Date().getTime();
jsBridge.setClipboardText(text);
alert("已复制到剪贴板");

getClipboardText 获取剪贴板文本

获取剪贴板文本

jsBridge.getClipboardText(function(text) {
  alert(text);
});

文件系统与SQLite数据库

jsBridge.fs FileSystem 文件系统

转到

提供App端本地文件/目录/下载/解压/哈希/分享/打开等操作接口。

jsBridge.db SQLite 数据库

转到

提供App端本地 SQLite 数据库操作接口。

微信、支付宝、银联、农行、工行、中信支付

微信 URL快捷支付

转到

• 可以将如下参数 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

pay 微信支付

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);
  }
});

wxPay 微信支付

• 在你的服务器端使用 微信官方统一下单接口 获取 "预支付交易会话标识 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);
  }
});

支付宝 URL快捷支付

转到

• 可以将如下参数 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

pay 支付宝支付

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("支付失败或取消了支付");
  }
});

aliPay 支付宝支付

• 在你的服务器端参考 支付宝官方请求参数说明 构造 "订单字符串",交由此 js 函数发起支付;

• 此支付方式 不需要 配置机密信息(私钥/公钥)到打包平台;

orderString:

jsBridge.aliPay({
  orderString: "{{aliPay.orderString}}"
}, function (succ, text) {
  if (succ) {
    alert("支付成功");
  } else {
    //resultStatus返回码说明
    alert("支付失败或取消了支付");
  }
});

银联云闪付 URL快捷支付

转到

• 可以将如下参数 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

pay 银联云闪付

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("支付失败或取消了支付");
  }
});

unionPay 银联云闪付

• 在你的服务器端使用 银联官方接口 获取 "银联受理订单号 tn",交由此 js 函数发起支付;

• 此支付方式 不需要 配置机密信息(pfx证书)到打包平台;

jsBridge.unionPay({
  tn: "替换成你的银联受理订单号"
  //用 jsBridge.unionSeInfo 函数获取到的当前手机厂商 pay 类型,可选(仅安卓,iOS始终忽略此参数)
  //, seType : ""
}, function (succ, text) {
  if (succ) {
    alert("支付成功");
  } else {    
    alert("支付失败或取消了支付");
  }
});

unionSeInfo 获取银联手机厂商 pay 类型

获取银联手机厂商 pay 类型

jsBridge.unionSeInfo(function (succ, text) {
  if (succ) {
    alert("seType:" + text);
  } else {
    alert("error:" + text);
  }
});

unionPayAppInstalled 检查用户是否已安装银联闪付App

检查用户是否已安装银联闪付App

jsBridge.unionPayAppInstalled(function (yes) {
  alert(yes ? "已安装" : "未安装");
});

银联全民付

转到

abcPay 农行掌上银行

• 农行掌上银行APP支付 SDK 的 js API 接口映射;

• 请参考农行官方手册调用服务器端接口获取支付订单号 token,交由此 js 接口发起App支付;

jsBridge.abcPay({
  token: "1111112222222233333"
}, function (succ, text) {
  if (succ) {
    alert("支付成功");
  } else {    
    alert("支付失败或取消了支付");
  }
});

abcPayAppInstalled 检查用户是否已安装农行掌银APP

检查用户是否已安装农行掌上银行APP

jsBridge.abcPayAppInstalled(function (yes) {
  alert(yes ? "已安装" : "未安装");
});

icbcPay 工商银行

• 工商银行APP支付 SDK 的 js API 接口映射;

• 请参考工行官方手册调用服务器端接口获取支付信息,交由此 js 接口发起App支付;

//注意,请使用 生产环境 参数
jsBridge.icbcPay({
  interfaceName   : "接口名",
  interfaceVersion: "接口版本号",
  tranData  : "交易信息",
  merSignMsg: "交易信息签名",
  merCert   : "商户公钥文件信息"
}, function (succ, text) {
  if (succ) {
    alert("支付成功:" + text);
  } else {    
    alert("支付失败或取消了支付:" + text);
  }
});

中信银行支付

转到

微信/QQ/支付宝 登录;微信一次性订阅消息、拉起小程序;

wxAppInstalled 是否已安装微信客户端

检查设备是否已安装微信客户端

jsBridge.wxAppInstalled(function(yes){
  alert(yes ? "已安装" : "未安装");
});

wxLogin 微信登录 通过函数回调

通过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"
    //...
  }
}
*/

wxLogin 微信登录 通过网页回调

登录结果及授权参数将通过 URL Query 传到给你指定的链接

jsBridge.wxLogin("./u.cshtml");
/*
1. 登录成功后将授权码 code 等参数附加到 url 上跳转链接
2. url 参数请参见 微信登录 通过函数回调
u.cshtml?code=xxx&openid=xxx
*/

wxSubscribeMsg 微信一次性订阅消息

微信一次性订阅消息,请参考官方 说明1说明2

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      : //数字,订阅场景值
}
*/

wxLaunchMiniProgram 拉起微信小程序

拉起微信小程序,请参考官方 说明

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