♦ JS-SDK 引用方式:
♦ 普通网页 script 方式加载:下载最新版 mpBridge-v20241215.zip,请在页面上调用 mpBridge 接口之前引用 mpbridge-mini.js 库;
♦ js module 方式引用:npm install ym-mpbridge 具体请参考 npm package
//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 );
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);
执行原生接口
mpBridge.ready(function () { mpBridge.execute({ //接口方法名称 API,本示例以 openCustomerServiceChat 拉起微信客服 为例 //必需,字符串类型 action: "openCustomerServiceChat", //对应的接口参数,原样传递,本示例参考 这里 args: { extInfo: { //客服链接 url: "https://work.weixin.qq.com/ca/cawcdeec8bc6fe051d" }, //企业ID corpId: "wwd0962a21514e124f", showMessageCard: false, sendMessageTitle: "", sendMessagePath: "", sendMessageImg: "" }, //是否需要返回值 //需要返回值(true)时接口执行完成后将自动关闭页面返回 needResult: false, //UI定制 ui: { //页面左上角标题 title: "联系我们", //图片链接 https://... imageSrc: "https://appfenfa.yimenapp.com/assets/img/mp.png", //图片样式 imageStyle: "max-width:72px;max-height:72px;border-radius:12px", //提示文字 message: "有任何问题请及时联系我们", //执行按钮文字 positiveText: "联系客服", //取消按钮文字 negativeText: "返回" } }, function(success, res) { //需要返回值时(needResult: true)才有的回调 layer.alert(success + "\n" + JSON.stringify(res)); }); }, true);
登录
mpBridge.ready(function () { mpBridge.login({ //支付宝授权登录:请参考 //auth_base 静默授权 仅能获取 user_id //auth_user 主动授权 能获取更多用户信息 scopes: "auth_base" }, function(success, res) { /** 授权成功时返回 res: { //授权码,作为服务器端接口参数获取用户信息 code: "" } */ layer.alert(success + "\n" + JSON.stringify(res)); }); }, true);
mpBridge.ready(function () { var onLogin = function(success, res) { /** 授权成功时返回 res: { //作为服务器端接口参数获取用户信息 //静默登录和授权登录时都会返回 code code: "", //授权登录时返回的用户信息 userInfo: { }, //失败时的错误信息 error: "" } */ layer.alert(success + "\n" + JSON.stringify(res)); }; //由于小程序本身的限制,登录返回后可能刷新页面,导致无法保持调用 mpBridge.login 时的上下文信息 //为保险起见请调用 mpBridge.on 接口确认执行一下登录返回回调 if (!mpBridge.on("login", onLogin)) { mpBridge.login({ //微信授权登录:请参考 //用授权成功后用返回的 code 调用服务器 auth.code2Session 获取用户信息 //超时时间(毫秒) timeout: 5000, //获取用户信息的用途 desc: "同步登录用户资料", //授权登录(用户需点击登录按钮) UI 定制 //如需静默登录请勿提供此参数,或 ui: null ui: { //页面左上角标题 title: "授权登录", //图片链接 https://... imageSrc: "https://appfenfa.yimenapp.com/assets/img/mp.png", //图片样式 imageStyle: "max-width:72px;max-height:72px;border-radius:12px", //提示文字 message: "请登录后使用我们更多的服务", //登录按钮文字 loginText: "登录", //取消按钮文字 cancelText: "取消" } }, onLogin); } }, true);
mpBridge.ready(function () { var onLogin = function(success, res) { /** 授权成功时返回 res: { //作为服务器端接口参数获取用户信息 //静默登录和授权登录时都会返回 code code: "", //用于标识当前设备, 无论登录与否都会返回, 有效期 5 分钟。 anonymousCode: "", //授权登录时返回的用户信息 userInfo: { }, //失败时的错误信息 error: "" } */ layer.alert(success + "\n" + JSON.stringify(res)); }; if (!mpBridge.on("login", onLogin)) { mpBridge.login({ //头条/抖音授权登录:请参考 //用授权成功后用返回的 code/anonymousCode 调用服务器 code2Session 获取用户信息 //可选,未登录时, 是否强制调起登录框,默认 true force: true, //授权登录(用户需点击登录按钮) UI 定制 //如需静默登录请勿提供此参数,或 ui: null ui: { //页面左上角标题 title: "授权登录", //图片链接 https://... imageSrc: "https://appfenfa.yimenapp.com/assets/img/mp.png", //图片样式 imageStyle: "max-width:72px;max-height:72px;border-radius:12px", //提示文字 message: "请登录后使用我们更多的服务", //登录按钮文字 loginText: "登录", //取消按钮文字 cancelText: "取消" } }, onLogin); } }, true);
mpBridge.ready(function () { var onLogin = function(success, res) { /** 授权成功时返回 res: { //作为服务器端接口参数获取用户信息 code: "", } */ layer.alert(success + "\n" + JSON.stringify(res)); }; if (!mpBridge.on("login", onLogin)) { mpBridge.login({ //快手授权登录:请参考 //用授权成功后用返回的 code 调用服务器 code2Session 获取用户信息 //超时时间(毫秒) timeout: 5000, //授权登录(用户需点击登录按钮) UI 定制 //如需静默登录请勿提供此参数,或 ui: null ui: { //页面左上角标题 title: "授权登录", //图片链接 https://... imageSrc: "https://appfenfa.yimenapp.com/assets/img/mp.png", //图片样式 imageStyle: "max-width:72px;max-height:72px;border-radius:12px", //提示文字 message: "请登录后使用我们更多的服务", //登录按钮文字 loginText: "登录", //取消按钮文字 cancelText: "取消" } }, onLogin); } }, true);
mpBridge.ready(function () { var onLogin = function(success, res) { /** 授权成功时返回 res: { //作为服务器端接口参数获取用户信息 code: "" } */ layer.alert(success + "\n" + JSON.stringify(res)); }; if (!mpBridge.on("login", onLogin)) { mpBridge.login({ //百度授权登录:请参考 //用授权成功后用返回的 code 调用服务器 SessionKey 获取用户信息 //超时时间(毫秒) timeout: 5000, //授权登录(用户需点击登录按钮) UI 定制 //如需静默登录请勿提供此参数,或 ui: null ui: { //页面左上角标题 title: "授权登录", //图片链接 https://... imageSrc: "https://appfenfa.yimenapp.com/assets/img/mp.png", //图片样式 imageStyle: "max-width:72px;max-height:72px;border-radius:12px", //提示文字 message: "请登录后使用我们更多的服务", //登录按钮文字 loginText: "登录", //取消按钮文字 cancelText: "取消" } }, onLogin); } }, true);
mpBridge.ready(function () { var onGetPhoneNumber = function(success, res) { /* 成功时返回 res: { //获取手机号回调参数: //微信 付费管理、回调参数、服务器端接口 //头条/抖音 配置隐私协议、回调参数、解密算法 res:{}, //静默登录回调参数: //头条/抖音 login:{} } */ layer.alert(success + "<br/>" + JSON.stringify(res)); }; if (!mpBridge.on("getPhoneNumber", onGetPhoneNumber)) { mpBridge.getPhoneNumber({ //UI定制 ui: { //页面左上角标题 title: "手机号", //图片链接 https://... imageSrc: "https://appfenfa.yimenapp.com/assets/img/mp.png", //图片样式 imageStyle: "max-width:72px;max-height:72px;border-radius:12px", //提示文字 message: "请登录后使用我们更多的服务", //授权按钮文字 positiveText: "授权手机号登录", //取消按钮文字 negativeText: "取消" } }, onGetPhoneNumber); } }, true);
支付
mpBridge.ready(function () { mpBridge.pay({ //支付宝支付参数:请参考 //tradeNO 与 orderStr 参数任选其一 //可选,小程序支付交易号 tradeNO: "xxxxx", //可选,支付参数拼接成的字符串 //orderStr: "yyyyy" }, function(success, data) { layer.alert(success + "\n" + JSON.stringify(data)); }); }, true);
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);
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);
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);
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);
地理位置
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);
页面路由/跳转
url:
mpBridge.ready(function () { //保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabBar 页面 请参考 mpBridge.navigateTo({ //以/开始的小程序页面路径,可在 页面管理 复制获得路径 url: $("#navigateTo").val() }, function(success, data) { if (!success) { layer.alert(JSON.stringify(data)); } }); }, true);
url:
mpBridge.ready(function () { //关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabBar 页面 请参考 mpBridge.redirectTo({ //以/开始的小程序页面路径,可在 页面管理 复制获得路径 url: $("#redirectTo").val() }, function(success, data) { if (!success) { layer.alert(JSON.stringify(data)); } }); }, true);
mpBridge.ready(function () { //关闭当前页面,返回上一页面或多级页面 请参考 mpBridge.navigateBack({ //返回的页面数,如果 delta 大于现有页面数,则返回到首页 delta: 1 }, function(success, data) { if (!success) { layer.alert(JSON.stringify(data)); } }); }, true);
url:
mpBridge.ready(function () { //跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 请参考 mpBridge.switchTab({ //需要跳转的 tabBar 页面的路径,可在 页面管理 复制获得路径 url: $("#switchTab").val() }, function(success, data) { if (!success) { layer.alert(JSON.stringify(data)); } }); }, true);
url:
mpBridge.ready(function () { //重启小程序并打开某个页面 请参考 mpBridge.reLaunch({ //需要打开的页面路径,可在 页面管理 复制获得路径 url: $("#reLaunch").val() }, function(success, data) { if (!success) { layer.alert(JSON.stringify(data)); } }); }, true);
mpBridge.ready(function () { mpBridge.open({ //以 https:// 开始的链接 url: "https://appfenfa.yimenapp.com/doc/mp_loginpay.cshtml" }); }, true);
属性
if (/MicroMessenger.*miniProgram|Alipay.*MiniProgram|toutiaomicroapp|QQ.*miniProgram|swan\/|JD.*miniProgram|kwapp.*miniProgram/i.test(navigator.userAgent)) { layer.alert("是在小程序中"); } else { layer.alert("不在小程序中"); }
if (mpBridge.inMp) { layer.alert("是在小程序中"); } else { layer.alert("不在小程序中"); }
if (mpBridge.isWx) { layer.alert("微信小程序中"); } else { layer.alert("不在微信小程序中"); }
if (mpBridge.isAlipay) { layer.alert("支付宝小程序中"); } else { layer.alert("不在支付宝小程序中"); }
if (mpBridge.isTt) { layer.alert("头条/抖音小程序中"); } else { layer.alert("不在头条/抖音小程序中"); }
if (mpBridge.isKs) { layer.alert("快手小程序中"); } else { layer.alert("不在快手小程序中"); }
if (mpBridge.isQq) { layer.alert("QQ小程序中"); } else { layer.alert("不在QQ小程序中"); }
if (mpBridge.isBaidu) { layer.alert("百度小程序中"); } else { layer.alert("不在百度小程序中"); }
if (mpBridge.isJd) { layer.alert("京东小程序中"); } else { layer.alert("不在京东小程序中"); }