小程序

JS-SDK 引用方式:

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

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

♦ 为微信、支付宝、头条、快手、QQ、百度及京东小程序平台提供统一的H5网页类型页面 js 接口;

♦ 所有接口应放在 mpBridge. ready (function(){ }) 中回调执行;

ready 小程序接口就绪时回调

//mpBridge 下的所有接口应放在 ready 中回调执行mpBridge.ready( //小程序接口就绪时需要执行的函数 function () { //mpBridge.postMessage(...); //mpBridge.pay(...); } //布尔类型,是否自动引用各小程序平台的官方 js 接口库 //如果你在网页中已经引用了下述 js 库,此参数值为 false 即可 /** 目前自动引用如下官方版本 微信 https://res.wx.qq.com/open/js/jweixin-1.3.2.js 支付宝 https://appx/web-view.min.js (仅在支付宝小程序中有效,其他地方无法打开此链接) 头条 https://lf1-cdn-tos.bytegoofy.com/goofy/developer/jssdk/jssdk-1.0.3.js QQ https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js 百度 https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.30.js 京东 https://storage.360buyimg.com/api-test/jssdk.js **/ , true);

postMessage 发送消息给小程序

mpBridge.ready(function () { mpBridge.postMessage({ //自定义转发给朋友 参考详细说明 //支持所有小程序 onShareAppMessage: { //标题,留空则默认为小程序名称 title: "自定义分享给朋友标题", //封面图片宽高比为 5:4,留空则默认为小程序页面截图 imageUrl: "https://i.yimenyun.net/sys/1.jpg", //以/开头的小程序页面路径,留空则为当前浏览的小程序页面 //可在 页面管理 复制获得路径,可接受参数 url 指定需要打开的网址(必须 uri encode 编码) //示例1: "/pages/login/login" //示例2: "/pages/feature/feature?url=" + encodeURIComponent('https://m.baidu.com') path: "" }, //自定义分享到朋友圈 参考详细说明 //仅支持微信小程序 //H5网页类型的页面不支持分享到朋友圈 onShareTimeline: { } }, function(success, data) { alert(success + "\n" + JSON.stringify(data)); });}, true);

授权登录

login 授权登录:支付宝

mpBridge.ready(function () { mpBridge.login({ //支付宝授权登录:请参考 //auth_base 静默授权 仅能获取 user_id //auth_user 主动授权 能获取更多用户信息 scopes: "auth_base" }, function(success, data) { /** 授权成功时返回 data: { //授权码,作为服务器端接口参数获取用户信息 code: "" } */ layer.alert(success + "\n" + JSON.stringify(data)); });}, true);

login 授权登录:微信

mpBridge.ready(function () { var onLogin = function(success, data) { /** 授权成功时返回 data: { //授权码,作为服务器端接口参数获取用户信息 code: "" } */ layer.alert(success + "\n" + JSON.stringify(data)); }; //由于小程序本身的限制,登录返回后可能刷新页面,导致无法保持调用 mpBridge.login 时的上下文信息 //为保险起见请调用 mpBridge.on 接口确认执行一下登录返回回调 if (!mpBridge.on("login", onLogin)) { mpBridge.login({ //微信授权登录:请参考 //用授权成功后用返回的 code 调用服务器 auth.code2Session 获取用户信息 //超时时间(毫秒) timeout: 5000 }, onLogin); }}, true);

login 授权登录:头条/抖音

mpBridge.ready(function () { mpBridge.login({ //头条/抖音授权登录:请参考 //用授权成功后用返回的 code/anonymousCode 调用服务器 code2Session 获取用户信息 //可选,未登录时, 是否强制调起登录框,默认 true force: true }, function(success, data) { /** 授权成功时返回 data: { //授权码,作为服务器端接口参数获取用户信息 code: "", //用于标识当前设备, 无论登录与否都会返回, 有效期 5 分钟。 anonymousCode: "" } */ layer.alert(success + "\n" + JSON.stringify(data)); });}, true);

login 授权登录:快手

mpBridge.ready(function () { mpBridge.login({ //快手授权登录:请参考 //用授权成功后用返回的 code 调用服务器 code2Session 获取用户信息 //超时时间(毫秒) timeout: 5000 }, function(success, data) { /** 授权成功时返回 data: { //授权码,作为服务器端接口参数获取用户信息 code: "", } */ layer.alert(success + "\n" + JSON.stringify(data)); });}, true);

login 授权登录:百度

mpBridge.ready(function () { mpBridge.login({ //百度授权登录:请参考 //用授权成功后用返回的 code 调用服务器 SessionKey 获取用户信息 //超时时间(毫秒) timeout: 5000 }, function(success, data) { /** 授权成功时返回 data: { //授权码,作为服务器端接口参数获取用户信息 code: "" } */ layer.alert(success + "\n" + JSON.stringify(data)); });}, true);

支付

pay 支付:支付宝

mpBridge.ready(function () { mpBridge.pay({ //支付宝支付参数:请参考 //tradeNO 与 orderStr 参数任选其一 //可选,小程序支付交易号 tradeNO: "xxxxx", //可选,支付参数拼接成的字符串 //orderStr: "yyyyy" }, function(success, data) { layer.alert(success + "\n" + JSON.stringify(data)); });}, true);

pay 支付:微信

mpBridge.ready(function () { var onPay = function(success, data) { layer.alert(success + "\n" + JSON.stringify(data)); }; //由于小程序本身的限制,支付返回后可能刷新页面,导致无法保持调用 mpBridge.pay 时的上下文信息 //为保险起见请调用 mpBridge.on 接口确认执行一下支付返回回调 if (!mpBridge.on("pay", onPay)) { mpBridge.pay({ //微信支付参数:请参考 //必需,时间戳,从 1970 年 1 月 1 日 00:00:00 至今的秒数 timeStamp: "", //必需,随机字符串,长度为32个字符以下 nonceStr: "", //必需,统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=*** package: "prepay_id=xxxxx", //必需,签名算法,应与后台下单时的值一致,MD5或HMAC-SHA256或RSA signType: "", //必需,签名,具体见微信支付文档 paySign: "" }, onPay); }}, true);

pay 支付:头条/抖音

mpBridge.ready(function () { mpBridge.pay({ //头条/抖音支付 接入准备,服务器端调用 预下单接口 获取 order_id 和 order_token 交给小程序发起支付。 //必需 orderInfo: { //担保交易服务端订单号 order_id: "6819903302604491021", //担保交易订单号 token order_token: "CgsIARCABRgBIAQoARJOCkx+WgXqCUIwTel2V3siEGZ0++poigIM+SMMxtMx798Vj0ZYzoTYBqeNslodUC9X5KAOHkR1YbSBz6I6pXATh5faIGy7R72A9vwm0OczGgA=" } }, function(success, data) { layer.alert(success + "\n" + JSON.stringify(data)); });}, true);

pay 支付:快手

mpBridge.ready(function () { mpBridge.pay({ //快手支付 接入指南,服务器端调用 预下单接口 获取 orderInfo 交给小程序发起支付。 //必需,原样传递服务器端预下单接口返回的order_info即可 orderInfo: { order_no : "121072611585202788127", order_info_token: "ChJrc01wUGF5Lm9yZGVyVG9rZW4SULxOUORbNX1NAzmbs3vCE8Fo8FN8EW90EM7iReQujs85RbgDNVDPqxJoGly_jX7Zv9kwTiXsrFuSgwrR-ufuZexCYejepc-C0swHGhJtqssdzyq4aMsYYWjhyloiIOZOjlvg2cPW6VJsOmt6c4Tz2qSsZoAhTeKIZAXM13SRKAUwAQ" } }, function(success, data) { layer.alert(success + "\n" + JSON.stringify(data)); });}, true);

pay 支付:百度

mpBridge.ready(function () { mpBridge.pay({ //百度支付 接入准备,服务器端调用 预下单接口 获取 order_id 和 order_token 交给小程序发起支付。 //必需,请参考 orderInfo 参数说明 orderInfo: { appKey : "MMMabc", dealId : "470193086", tpOrderId : "3028903626", totalAmount : "11300", rsaSign : "TN0ZNPyQeTnPjCN5hUa7JwrXOhR8uDASXPazidVQHFSiGCH5aouBkVvJxtf8PeqzGYWAASwS2oOt2eJfunzC5dTFd/pWJeJToMgCSgRY7KtQUCCDnMrtpqiMAf+dLiXps3HpWhVB4CK6MXfHc64ejP5a2fu5bg8B0BTcHrqaGc0=", dealTitle : "购买3个月VIP会员服务", signFieldsRange: "1" } }, function(success, data) { layer.alert(success + "\n" + JSON.stringify(data)); });}, true);

地理位置

getLocation 获取当前地理位置

mpBridge.ready(function () { //微信请参考 //支付宝请参考 mpBridge.getLocation({ //坐标类型 type: "gcj02" }, function(success, data) { //定位成功时返回 data /** { //经度 longitude: 116.404, //纬度 latitude: 39.915, //精确度,单位米 accuracy: 10 } **/ layer.alert(success + "\n" + JSON.stringify(data)); });}, true);

openLocation 打开地图显示指定位置

mpBridge.ready(function () { mpBridge.openLocation({ //经度 longitude: 120.126293, //纬度 latitude : 30.274653, //位置名称 name : "黄龙万科中心", //位置描述 address : "学院路77号" }, function(success, data) { if (!success) { layer.alert(JSON.stringify(data)); } });}, true);

页面路由/跳转

navigateTo 新窗口跳转

url:

mpBridge.ready(function () { //保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabBar 页面 请参考 mpBridge.navigateTo({ //以/开始的小程序页面路径,可在 页面管理 复制获得路径 url: $("#navigateTo").val() }, function(success, data) { if (!success) { layer.alert(JSON.stringify(data)); } });}, true);

redirectTo 覆盖当前窗口跳转

url:

mpBridge.ready(function () { //关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabBar 页面 请参考 mpBridge.redirectTo({ //以/开始的小程序页面路径,可在 页面管理 复制获得路径 url: $("#redirectTo").val() }, function(success, data) { if (!success) { layer.alert(JSON.stringify(data)); } });}, true);

navigateBack 返回上一页面或多级页面

mpBridge.ready(function () { //关闭当前页面,返回上一页面或多级页面 请参考 mpBridge.navigateBack({ //返回的页面数,如果 delta 大于现有页面数,则返回到首页 delta: 1 }, function(success, data) { if (!success) { layer.alert(JSON.stringify(data)); } });}, true);

switchTab 切换导航栏

url:

mpBridge.ready(function () { //跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 请参考 mpBridge.switchTab({ //需要跳转的 tabBar 页面的路径,可在 页面管理 复制获得路径 url: $("#switchTab").val() }, function(success, data) { if (!success) { layer.alert(JSON.stringify(data)); } });}, true);

reLaunch 重启小程序

url:

mpBridge.ready(function () { //重启小程序并打开某个页面 请参考 mpBridge.reLaunch({ //需要打开的页面路径,可在 页面管理 复制获得路径 url: $("#reLaunch").val() }, function(success, data) { if (!success) { layer.alert(JSON.stringify(data)); } });}, true);

open 新窗口中打开 URL 链接

mpBridge.ready(function () { mpBridge.open({ //以 https:// 开始的链接 url: "https://www.aabsbailbond.com/doc/mp_loginpay.cshtml" });}, true);

属性

userAgent 正则判断小程序环境

if (/MicroMessenger.*miniProgram|Alipay.*MiniProgram|toutiaomicroapp|QQ.*miniProgram|swan\/|JD.*miniProgram|kwapp.*miniProgram/i.test(navigator.userAgent)) { layer.alert("是在小程序中");} else { layer.alert("不在小程序中");}

inMp 当前环境是否在小程序中

if (mpBridge.inMp) { layer.alert("是在小程序中");} else { layer.alert("不在小程序中");}

isWx 微信小程序中?

if (mpBridge.isWx) { layer.alert("微信小程序中");} else { layer.alert("不在微信小程序中");}

isAlipay 支付宝小程序中?

if (mpBridge.isAlipay) { layer.alert("支付宝小程序中");} else { layer.alert("不在支付宝小程序中");}

isTt 头条/抖音小程序中?

if (mpBridge.isTt) { layer.alert("头条/抖音小程序中");} else { layer.alert("不在头条/抖音小程序中");}

isKs 快手小程序中?

if (mpBridge.isKs) { layer.alert("快手小程序中");} else { layer.alert("不在快手小程序中");}

isQq QQ小程序中?

if (mpBridge.isQq) { layer.alert("QQ小程序中");} else { layer.alert("不在QQ小程序中");}

isBaidu 百度小程序中?

if (mpBridge.isBaidu) { layer.alert("百度小程序中");} else { layer.alert("不在百度小程序中");}

isJd 京东小程序中?

if (mpBridge.isJd) { layer.alert("京东小程序中");} else { layer.alert("不在京东小程序中");}