WebApp快捷打包

WebApp快捷打包
功能测试页

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=http%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中 }
javascript 接口 jsBridge

请在你需要使用 jsBridge 接口的页面引用
<script src="//gate.myapp.ltd/cdn/jsbridge-mini.js"></script>


或者下载 jsbridge-v20180807.zip 放到你自己的服务器上。

一般情况下 jsBridge 会迅速完成初始化,如果需要在浏览器加载网页过程中调用 jsBridge 接口函数,你需要将代码放到 jsBridge.ready 的回调函数中。


jsBridge.ready(function () {
  //jsBridge.share();   //分享
  //jsBridge.wxPay();   //微信APP支付
  //jsBridge.aliPay();  //支付宝APP支付
  //...
});

属性

inApp

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


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

version

获取APP内核版本号


alert(jsBridge.version)

appVersion

获取APP打包版本号


//如 123 表示 1.2.3
alert(jsBridge.appVersion);

通讯录

contactOne 从通讯录中选择一个联系人

从通讯录中选择一个联系人,以 JSON 格式返回


jsBridge.contactOne(function(person) {
  if (person) {
    alert(JSON.stringify(person));
  } else {
    alert("已取消或没有使用通讯录的权限");
  }
});

contactAll 获取通讯所有联系人

获取通讯所有联系人,以 JSON 数组格式返回


jsBridge.contactAll(function(persons) {
  if (persons) {
    alert("获取到" + persons.length + "个联系人信息\n第一个是\n" + JSON.stringify(persons[0]));
  } else {
    alert("没有使用通讯录的权限");
  }
});

剪贴板

setClipboardText 设置剪贴板文本

设置剪贴板文本


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

getClipboardText 获取剪贴板文本

获取剪贴板文本


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

支付

pay 微信支付

channel 参数为 0 表示微信支付


jsBridge.pay({
  channel: 0, //0为微信支付, 1为支付宝
  orderid: new Date().getTime().toString(),
  title  : "购买VIP会员",
  amount : 0.01
}, function(succ, text) {
  if (succ) {
    alert("支付成功");
  } else {    
    alert("支付失败或取消了支付");
  }
});

wxPay 微信支付

自己在服务器端发起微信“统一下单”,构造支付字段,调起微信APP支付。


jsBridge.wxPay({
  appid    : "应用ID",
  partnerid: "商户号",
  prepayid : "预支付交易会话ID",
  package  : "扩展字段",
  noncestr : "随机字符串",
  timestamp: "时间戳(单位是秒,不是毫秒,切记)",
  sign     : "签名"
}, function (succ, text) {
  if (succ) {
    alert("支付成功");
  } else {    
    alert("支付失败或取消了支付");
  }
});

pay 支付宝支付

channel 参数为 1 表示微信支付


jsBridge.pay({
  channel: 1, //0为微信支付, 1为支付宝
  orderid: new Date().getTime().toString(),
  title  : "购买VIP会员",
  amount : 0.01
}, function(succ, text) {
  if (succ) {
    alert("支付成功");
  } else {    
    alert("支付失败或取消了支付");
  }
});

aliPay 支付宝支付

用自己构造支付宝订单字符串发起支付


jsBridge.aliPay({
  orderString: "替换成你的订单字符串"
}, function (succ, text) {
  if (succ) {
    alert("支付成功");
  } else {    
    alert("支付失败或取消了支付");
  }
});

分享

share 分享网页

弹出分享菜单,用默认值分享


jsBridge.share();

share 分享网页 自定义标题

弹出分享菜单,用指定的标题分享,其他用默认值


jsBridge.share({
  title: "这是自定义分享标题(未指定则为网页标题)"
});

share 分享网页 直接分享

指定了 to 参数,不会弹出分享菜单,直接呼出对应的APP完成分享


jsBridge.share({
  //0 微信朋友圈
  //1 微信好友
  //2 QQ好友
  //3 QQ空间
  to    : 0,
  title : "可以指定标题",
  link  : "http://m.baidu.com",
  imgUrl: "http://cdn.myapp.ltd/sys/logo.png",
  desc  : "摘要:内事问百度,外事找谷歌,你懂的。"
});

onMenuShare... 设置自定义网页分享

点击原生标题栏上或功能面板上的分享按钮时调用,跟微信公众号内的分享接口用法相同。

参数为 JSON 数据类型

onMenuShareTimeline 当分享到微信朋友圈时
onMenuShareFriend 当分享到微信好友时
onMenuShareQQ 当分享到QQ好友时
onMenuShareQZone 当分享到QQ空间时


jsBridge.onMenuShareTimeline({
  title : "自定义的标题",
  link  : "http://gate.myapp.ltd/doc/",
  imgUrl: "http://cdn.myapp.ltd/sys/logo.png",
  desc  : "自定义的摘要内容",
  success: function() {
    alert("分享成功");
  },
  cancel: function() {
    alert("取消了分享或分享失败");
  }
});
alert("已设置,请点击分享到朋友圈试试。");

onMenuShare... 自定义分享按钮点击事件

点击原生标题栏上或功能面板上的分享按钮时调用,注意参数为 function 函数。

参数为 function 函数

onMenuShareTimeline 当分享到微信朋友圈时
onMenuShareFriend 当分享到微信好友时
onMenuShareQQ 当分享到QQ好友时
onMenuShareQZone 当分享到QQ空间时

jsBridge.onMenuShareTimeline(function(){
  //这是点击分享到朋友圈时需要执行的函数
  //可以做分享网页、图片、文字、多图等任何事情
  alert("你点击了分享到微信朋友圈按钮");
});
alert("已设置,请点击分享到朋友圈试试。");

shareText 分享纯文字(仅支持微信)

分享纯文字到微信好友或微信朋友圈

结果回调 callback: function(succ) { }


jsBridge.shareText({
  //to: 0 微信朋友圈, 1 微信好友
  text: "纯文字分享...文本内容"
}, function(succ) {
  alert(succ ? "分享成功" : "分享失败");
});

shareImage 分享纯图片

分享纯图片,不支持QQ空间

结果回调请参考shareText


jsBridge.shareImage({
  //0 微信朋友圈
  //1 微信好友
  //2 QQ好友
  //to    : 0,
  imgUrl: "http://cdn.myapp.ltd/sys/1.jpg"
});

shareMusic 分享音乐(音频)

分享音乐(音频),不支持QQ空间

结果回调请参考shareText


jsBridge.shareMusic({
  //0 微信朋友圈
  //1 微信好友
  //2 QQ好友
  //to : 0,
  title: "音乐分享标题",
  desc : "可以写一点描述",
  //图片链接
  imgUrl: "http://cdn.myapp.ltd/sys/logo.png",
  //点击跳转的链接
  targetUrl: "http://m.baidu.com/",
  //音乐链接
  musicUrl: "http://zjdx1.sc.chinaz.com/Files/DownLoad/sound1/201708/9025.mp3"
});

shareVideo 分享视频(仅支持微信)

分享视频(仅支持微信)

结果回调请参考shareText


jsBridge.shareVideo({
  //0 微信朋友圈
  //1 微信好友
  //to : 0,
  title: "视频分享标题",
  desc : "可以写一点描述",
  //图片链接
  imgUrl: "http://cdn.myapp.ltd/sys/logo.png",
  //视频链接
  videoUrl: "http://flv3.people.com.cn/dev1/mvideo/vodfiles/2017/08/08/992bfdfef09d80e809cede9c9dd04916_c.mp4"
});

shareImages 一键多图分享朋友圈

一键分享多张图片到微信朋友圈、QQ空间等

结果回调 callback: function(succ) { }


jsBridge.shareImages({
  text  : "这是一小段多图分享的说明文本\n http://m.baidu.com/",
  images: [
"http://cdn.myapp.ltd/sys/1.jpg",
"http://cdn.myapp.ltd/sys/2.jpg",
"http://cdn.myapp.ltd/sys/3.jpg",
"http://cdn.myapp.ltd/sys/4.jpg",
"http://cdn.myapp.ltd/sys/5.jpg",
"http://cdn.myapp.ltd/sys/6.jpg",
"http://cdn.myapp.ltd/sys/7.jpg",
"http://cdn.myapp.ltd/sys/8.jpg",
"http://cdn.myapp.ltd/sys/9.jpg"
]}, function(succ) {
  //仅苹果版支持回调分享结果
  if (succ) {
    alert("发送成功");
  } else {
    alert("失败或取消了");
  }
});

图片相关

showImages 多图(组图)浏览

多张组图浏览,支持横竖屏自适配、手势缩放、批量保存到相册、一键分享朋友圈;

可配置双击屏幕自动触发多图浏览,无需调用js接口。


jsBridge.showImages({
  //屏幕方向 0自适应,1横屏,2竖屏
  screenOrientation: 0,
  //显示保存到相册按钮
  save: true,
  //显示一键分享多图按钮
  share: true,
  //多图分享摘要文字
  share_text: "WebApp快捷打包 多图分享摘要",
  //图片组, text 是文字说明
  items:[
{
  url :"http://cdn.myapp.ltd/sys/1.jpg",
  text:"美丽的大自然 01"
},
{
  url :"http://cdn.myapp.ltd/sys/2.jpg",
  text:"美丽的大自然 02"
},
{
  url :"http://cdn.myapp.ltd/sys/3.jpg"
},
{
  url :"http://cdn.myapp.ltd/sys/4.jpg"
},
{
  url :"http://cdn.myapp.ltd/sys/5.jpg"
},
{
  url :"http://cdn.myapp.ltd/sys/6.jpg",
  text:"美丽的湖泊"
},
{
  url :"http://cdn.myapp.ltd/sys/7.jpg"
}
  ]
});

扫一扫

scan 扫一扫,APP自动处理扫码结果

扫一扫,支持二维码/条码,APP自动处理扫码结果


jsBridge.scan();

scan 扫一扫,自己处理扫码结果

扫一扫,支持二维码/条码,自己处理扫码结果


jsBridge.scan({
  needResult: true
}, function(code) {
  if (code) {
    alert(code);
  } else {
    alert("扫码失败或取消了扫码");
  }
});

scanFromAlbum 从相册选图识别二维码

从相册选图识别二维码,APP自动处理识别结果


jsBridge.scanFromAlbum();

scanFromAlbum 从相册选图识别二维码

从相册选图识别二维码,自己处理识别结果


jsBridge.scanFromAlbum({
  needResult: true
}, function(code) {
  if (code) {
    alert(code);
  } else {
    alert("识别二维码失败或取消了识别");
  }
});

scanFromUrl 从图片链接识别二维码

从图片链接识别二维码,APP自动处理识别结果


jsBridge.scanFromUrl({
  imageUrl: "http://cdn.myapp.ltd/sys/qr.png"
});

scanFromUrl 从图片链接识别二维码

从图片链接识别二维码,自己处理识别结果


jsBridge.scanFromUrl({
  imageUrl  : "http://cdn.myapp.ltd/sys/qr.png",
  needResult: true
}, function(code) {
  if (code) {
    alert(code);
  } else {
    alert("识别二维码失败");
  }
});

缓存

cacheSize 获取缓存大小

获取缓存大小


jsBridge.cacheSize(function(size) {
  var txt = size + "字节\n";
  txt += (size / 1024 / 1024.0).toFixed(2) + "MB";
  alert(txt);   
});

clearCache 清除缓存

清除缓存


jsBridge.clearCache(function() {
  alert("缓存已清除");
});

登录

wxLogin 微信登录 通过网页回调

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


jsBridge.wxLogin("./u.cshtml");

wxLogin 微信登录 通过函数回调

通过js函数回调获取登录结果及授权参数


jsBridge.wxLogin(function(succ, ret) {
  if (succ) {    
    alert(JSON.stringify(ret));
  } else {
    alert("登录失败或取消了登录");
  }
});

qqLogin QQ登录 通过网页回调

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


jsBridge.qqLogin("./u.cshtml");

qqLogin QQ登录 通过函数回调

通过js函数回调获取登录结果及授权参数


jsBridge.qqLogin(function(succ, ret) {
  if (succ) {    
    alert(JSON.stringify(ret));
  } else {
    alert("登录失败或取消了登录");
  }
});

界面控制

action 显示功能按钮面板


//要显示的按钮数组
//如果未指定按钮,则以APP配置里勾选的按钮为准
//可直接执行 jsBridge.action();
var btns = [
  "ShareWxFriend",  //分享到微信好友
  "ShareWxTimeline",//分享到微信朋友圈
  "ShareQQFriend",  //分享到QQ好友
  "ShareQQZone",    //分享到QQ空间
  "CopyLink",       //复制链接
  "Refresh",        //刷新    
  "ShowImages",     //浏览图片
  "OpenInBrowser"   //在浏览器中打开
];
jsBridge.action(btns);

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


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

onMenuAction 但点击更多按钮时触发

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


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

uiNavigation 显示/隐藏 顶部标题栏


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

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

前进/后退

canGoForward 浏览记录是否可以前进

检查是否可以执行 history.forward()


jsBridge.canGoForward(function(can){
  alert(can);
});

canGoBack 浏览记录是否可以后退

检查是否可以执行 history.back()


jsBridge.canGoBack(function(can){
  alert(can);
});

backToHome 一键返回首页

一键返回首页,无论当前处于多少层级的子页面。


// 参数 true: 同时跳转到首页链接, false: 不跳转链接
jsBridge.backToHome(true);

消息推送/通知

极光 jiguang.cn

转到

个推 getui.com

转到

通知设置

转到

通知设置

其他

阿里百川 baichuan.taobao.com

转到

appSettings 跳转到APP设置

跳转到APP设置界面


jsBridge.appSettings();

wxAppInstalled 是否已安装微信客户端

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


jsBridge.wxAppInstalled(function(installed){
  if (installed) {
    alert("你的设备已安装微信");
  } else {
    alert("你的设备没有安装微信");
  }
});

getDeviceId 获取设备ID

获取设备ID,此ID不会随APP安装或重装发生变化。


jsBridge.getDeviceId(function(id){
  alert(id);
});

getInstallId 获取APP安装ID

获取APP安装ID,升级安装不会变,卸载APP重新安装会改变。


jsBridge.getInstallId(function(id){
  alert(id);
});

net 网络访问请求

发起网络访问请求,原生网络请求,性能高,也不会有 ajax 跨域限制问题


jsBridge.net({
  url: "http://gate.myapp.ltd/doc/echo.cshtml",
  method: "POST",
  params: {
    name: "World"
  },
  indicator: true
}, function (succ, text) {
  if (succ) {
    alert("服务器返回的字符串\n\n" + text);
  } else {
    alert("网络访问请求失败");
  }
});
拍照上传
长按
地理定位

Copyright © 2018 WebApp快捷打包