♦ js-sdk 引用方式:
♦ 普通网页 script 方式加载:下载最新版 ,请在页面上调用 mpbridge 接口之前引用 mpbridge-mini.js 库。
♦ js module 方式引用:npm install ym-mpbridge
♦ 为微信、支付宝、头条、快手、qq、百度及京东小程序平台提供统一的h5网页类型页面 js 接口;
♦ 所有接口应放在 mpbridge.ready(function(){ }) 中回调执行;
//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.login({
//支付宝授权登录:
//auth_base 静默授权
//auth_user 主动授权
scopes: "auth_base"
}, function(success, data) {
/**
授权成功时返回 data:
{
//授权码,作为服务器端接口参数获取用户信息
code: ""
}
*/
layer.alert(success "\n" json.stringify(data));
});
}, true);
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 调用服务器 获取用户信息
//超时时间(毫秒)
timeout: 5000
}, onlogin);
}
}, true);
mpbridge.ready(function () {
mpbridge.login({
//头条/抖音授权登录:
//用授权成功后用返回的 code/anonymouscode 调用服务器 获取用户信息
//可选,未登录时, 是否强制调起登录框,默认 true
force: true
}, function(success, data) {
/**
授权成功时返回 data:
{
//授权码,作为服务器端接口参数获取用户信息
code: "",
//用于标识当前设备, 无论登录与否都会返回, 有效期 5 分钟。
anonymouscode: ""
}
*/
layer.alert(success "\n" json.stringify(data));
});
}, true);
mpbridge.ready(function () {
mpbridge.login({
//快手授权登录:
//用授权成功后用返回的 code 调用服务器 获取用户信息
//超时时间(毫秒)
timeout: 5000
}, function(success, data) {
/**
授权成功时返回 data:
{
//授权码,作为服务器端接口参数获取用户信息
code: "",
}
*/
layer.alert(success "\n" json.stringify(data));
});
}, true);
mpbridge.ready(function () {
mpbridge.login({
//百度授权登录:
//用授权成功后用返回的 code 调用服务器 获取用户信息
//超时时间(毫秒)
timeout: 5000
}, function(success, data) {
/**
授权成功时返回 data:
{
//授权码,作为服务器端接口参数获取用户信息
code: ""
}
*/
layer.alert(success "\n" json.stringify(data));
});
}, 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: {
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.getlocation({
//坐标类型
type: "gcj02"
}, function(success, data) {
//定位成功时返回 data
/**
{
//经度
longitude: 116.404,
//纬度
latitude: 39.915,
//精确度,单位米
accuracy: 10
}
**/
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 大于现有页面数,则返回到5845vip威尼斯电子游戏首页
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: "http://www.zhidianwl.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("不在京东小程序中");
}