♦ JS-SDK 引用方式:
♦ 普通网页 script 方式加载:下载最新版 mpBridge-v20250221.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/kfid/kfca1b5bb8cadc6ed6e"
},
//企业ID
corpId: "ww44f24fc31cb4c991",
showMessageCard: false,
sendMessageTitle: "",
sendMessagePath: "",
sendMessageImg: ""
},
//是否需要返回值
//需要返回值(true)时接口执行完成后将自动关闭页面返回
needResult: true,
//UI定制
ui: {
//页面左上角标题
title: "联系我们",
//图片链接 https://...
imageSrc: "https://www.yimenexe.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://www.yimenexe.com/assets/img/mp.png",
//图片样式
imageStyle: "max-width:72px;max-height:72px;border-radius:12px",
//提示文字
message: "请登录后使用我们更多的服务",
//登录按钮文字
loginText: "登录",
//取消按钮文字
cancelText: "取消",
//是否为不用点击操作的静默登录
//true 时主要用于静默获取 code 在服务器端换取 openid
silence: false
}
}, 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://www.yimenexe.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://www.yimenexe.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://www.yimenexe.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({
//QQ登录:请参考
//成功后用返回的 code 调用服务器 code2Session 获取用户信息
//超时时间(毫秒)
timeout: 5000,
//授权登录(用户需点击登录按钮) UI 定制
//如需静默登录请勿提供此参数,或 ui: null
ui: {
//页面左上角标题
title: "授权登录",
//图片链接 https://...
imageSrc: "https://www.yimenexe.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://www.yimenexe.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.shareImage({
//顶部标题
title: "查看图片",
//图片链接
//使用 分享图片、保存到相册 时,需在小程序管理后台 -> 开发管理 -> 配置 downloadFile合法域名
imageSrc: "https://www.yimenapp.com/assets/mp.jpg",
//样式
imageTyle: "width: 100%; border-radius: 8px;",
//缩放模式 参考这里
imageMode: "widthFix",
//转发给好友 参考这里
sharePage: {
//是否显示此按钮
enabled: true,
//按钮文字
buttonText: "转发给好友",
//按钮类型 参考这里
buttonType: "default",
//转发参数 参考这里 原样传递
args: {
title: "我的作品,欢迎品鉴~~~",
path: "",
imageUrl: "https://i.yimenyun.net/sys/1.jpg"
}
},
//仅支持微信小程序
//分享图片 参考这里
shareImage: {
enabled: true,
buttonText: "分享图片",
buttonType: "primary",
//分享参数 参考这里 原样传递
args: {
//不填写图片本地路径,小程序会自动下载 imageSrc 参数所指定的图片用于分享
path: "",
style: "default",
needShowEntrance: false,
entrancePath: ""
}
},
//保存到相册 参考这里
saveImage: {
//是否启用
enabled: true,
buttonText: "保存到相册",
buttonType: "warn"
}
});
}, true);
图片、视频
mpBridge.ready(function () {
mpBridge.chooseUploadMedia({
//选择、拍摄
choose: {
//最多可以选择的文件个数
count: 3,
//是否压缩所选文件
sizeType: ['original', 'compressed'],
//album 相册,camera 相机
sourceType: ['album', 'camera'],
//仅支持微信
//image 图片,video 视频,mix 可同时选择图片和视频
mediaType: ['image', 'video'],
//仅支持微信
//拍摄视频最长拍摄时间,单位秒。时间范围为 3s 至 60s 之间
maxDuration: 10,
//仅支持微信
//拍摄时使用 back 后置摄像头,front 前置摄像头
camera: "back",
},
//上传
upload: {
//接收文件的服务器地址
//需在小程序后台配置 开发与服务 - 开发管理 - 服务器域名 - uploadFile合法域名
url: "https://www.yimenapp.com/doc/echo2.cshtml",
//文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容
name: "file",
//HTTP 请求 Header
header: {
"User-Agent": navigator.userAgent,
Cookie: document.cookie
},
//HTTP 请求中其他额外的 form data
formData: {
key1: "value1"
},
//超时时间,单位为毫秒
timeout: 20000
},
//UI定制
ui: {
//页面标题
title: "选择图片",
//提示文字
message: "请从相册选择或相机拍摄图片",
//返回按钮文字,留空 null 则不显示返回按钮
negativeText: "返回",
//清除按钮文字,留空 null 则不显示清除按钮
clearText: "清除",
//选择按钮文字
chooseText: "选择/拍照",
//确定按钮文字
positiveText: "确定"
},
//仅微信
//当 choose.sourceType 包含 camera 时,是否需要请求相机权限
//授权弹窗会展示在 小程序用户隐私保护指引 中填写的用途说明
authorizeCamera: false
}, function (success, res) {
layer.alert(`${success}\n${JSON.stringify(res)}`);
/** 成功时 res 返回上传图片的服务器响应数组,与图片顺序依次对应
[
{
data: "上传图片服务器接口响应字符串",
statusCode: 200
},
...
]
**/
});
}, 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://www.yimenexe.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("不在京东小程序中");
}