敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,了解更多。
♦ JS-SDK 引用方式:
♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20241118.zip,请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库;
♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package
服务器端需使用 UTF-8 编码,否则可能会出现中文乱码问题。
var result = $("#result").text("请求中..."); $('html,body').animate({scrollTop: $('#view').offset().top}, 1200); //发起网络请求 jsBridge.net({ //必须,网络请求地址 url : 'https://appdabao.yimenapp.com/doc/echo.cshtml', //可选,支持GET/POST/PUT/DELETE/HEAD 默认GET method: 'GET', //可选,json 格式的请求参数 //PUT、POST 时以 application/x-www-form-urlencoded 或 multipart/form-data 编码方式放在 body 中提交 //GET、DELETE、HEAD 时放在 url Query 参数中提交 params: { name: "WebApp快捷打包" }, //可选,仅当 PUT、POST 时有效,如果同时存在 params 则使用 params,忽略 body body: "任意字符串", //可选,json 格式的自定义请求头 Request Header headers: { "Key1": "value1", "Key2": "value2" }, //可选,是否显示加载动画,默认 false indicator: true, //可选,预期的服务器响应的数据类型,默认 text //可能的值 // text 文本字符,回调参数 text 将原样返回服务器响应结果 // stream 二进制流,回调参数 text 将返回服务器响应二进制流的 Base64 编码 //注意,由于移动设备处理能力有限,单次请求服务器端不宜返回太多数据 dataType : "text" }, function(succ, text) { if (succ) { //服务器返回的原始字符串 //需要自己做解析,如 json/xml 等 result.text(text); } else { result.text("网络请求错误"); } });
var result = $("#result").text("请求中..."); $('html,body').animate({scrollTop: $('#view').offset().top}, 1200); jsBridge.net({ url : 'https://appdabao.yimenapp.com/doc/echo3.cshtml', method: "POST", body: JSON.stringify({ hello: "world 世界", key2: 123 }), headers: { "Content-Type": "application/json" }, indicator: true }, function(succ, text) { if (succ) { result.text(text); } else { result.text("网络请求错误"); } });
跟 jQuery 的 $.get 用法类似
var result = $("#result").text("请求中..."); $('html,body').animate({scrollTop: $('#view').offset().top}, 1200); //发起网络请求 jsBridge.http.get('https://appdabao.yimenapp.com/doc/echo2.cshtml', { name: "WebApp快捷打包" }, function(r){ //服务器需返回json格式 result.JSONView(r); });
跟 jQuery 的 $.get 用法类似
var result = $("#result").text("请求中..."); $('html,body').animate({scrollTop: $('#view').offset().top}, 1200); //发起网络请求,注意 url utf8 编码 //https://suggest.taobao.com/sug?code=utf-8&q=手机 jsBridge.http.get('https://suggest.taobao.com/sug?code=utf-8&q=%E6%89%8B%E6%9C%BA', function(r){ //服务器需返回json格式 result.JSONView(r); });
跟 jQuery 的 $.post 用法类似
var result = $("#result").text("请求中..."); $('html,body').animate({scrollTop: $('#view').offset().top}, 1200); //发起网络请求 jsBridge.http.post('https://appdabao.yimenapp.com/doc/echo2.cshtml', { name: "WebApp快捷打包 by POST" }, function(r){ //服务器需返回json格式 result.JSONView(r); });
var result = $("#result").text("请求中..."); $('html,body').animate({scrollTop: $('#view').offset().top}, 1200); //发起网络请求 jsBridge.net({ url : 'https://i.yimenyun.net/sys/s12.png', method: 'GET', dataType: "stream" }, function(succ, text) { if (succ) { //text 参数为服务器响应数据的 Base64 编码 result.text(text); } else { result.text("网络请求错误: " + text); } });
选择本地文件,以 multipart/form-data 编码方式提交(POST或PUT)到指定的 url
var result = $("#result").text("请求中..."); $('html,body').animate({scrollTop: $('#view').offset().top}, 1200); //发起网络请求 jsBridge.netUploadFile({ //必须,接收文件的服务器地址 url : 'https://appdabao.yimenapp.com/doc/echo2.cshtml', //可选,菜单项,默认 选择文件 //如果仅有一项则不会出现选择菜单,直接进入对应操作 //1 - 选择文件 //2 - 相机拍照 //4 - 录制音频 //8 - 录制视频 menuItems: 1 + 2 + 4 + 8, //可选,支持POST/PUT 默认POST method: 'POST', //可选,json 格式的请求参数 params: { name: "WebApp快捷打包" }, //可选,json 格式的自定义请求头 Request Header headers: { "Key1": "value1", "Key2": "value2" }, //可选,form 表单的 file 字段名称,默认 file name : "file", //可选,是否显示加载动画,默认 true indicator: true, //选择文件的类型,多个用逗号隔开,默认 image/* //图片 image/*, 视频 video/*, 音频 audio/* chooseMime: "image/*,video/*", //可选,进度回调 onProgress: function(count, total){ result.text("总共:" + total + ",已完成:" + count); }, //可选,成功回调 onSuccess : function(text){ var j = JSON.parse(text); result.JSONView(j); }, //可选,失败回调 onFail : function(error){ result.text("失败:" + error); } });
选择本地文件,以 multipart/form-data 编码方式提交(POST或PUT)到指定的 url
var result = $("#result").text("请求中..."); $('html,body').animate({scrollTop: $('#view').offset().top}, 1200); //发起网络请求 jsBridge.netUploadFile({ url : 'https://appdabao.yimenapp.com/doc/echo2.cshtml', menuItems: 1 + 2, indicator: true, onSuccess: function(text){ var j = JSON.parse(text); result.JSONView(j); }, onFail : function(error){ result.text("失败:" + error); } });
监听回调数据: