小程序

♦ JS-SDK 引用方式：

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

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

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, res) {
        /**
        授权成功时返回 res:
        {
            //授权码，作为服务器端接口参数获取用户信息
            code: ""
        }
        */
        layer.alert(success + "\n" + JSON.stringify(res));
    });
}, true);

login 登录：微信

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://ruanzhu.yimenapp.com/assets/img/mp.png",
                //图片样式
                imageStyle: "max-width:72px;max-height:72px;border-radius:12px",
                //提示文字
                message: "请登录后使用我们更多的服务",
                //登录按钮文字
                loginText: "登录",
                //取消按钮文字
                cancelText: "取消"
            }
        }, onLogin);
    }
}, true);

login 登录：头条/抖音

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://ruanzhu.yimenapp.com/assets/img/mp.png",
                //图片样式
                imageStyle: "max-width:72px;max-height:72px;border-radius:12px",
                //提示文字
                message: "请登录后使用我们更多的服务",
                //登录按钮文字
                loginText: "登录",
                //取消按钮文字
                cancelText: "取消"
            }
        }, onLogin);
    }
}, true);

login 登录：快手

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://ruanzhu.yimenapp.com/assets/img/mp.png",
                //图片样式
                imageStyle: "max-width:72px;max-height:72px;border-radius:12px",
                //提示文字
                message: "请登录后使用我们更多的服务",
                //登录按钮文字
                loginText: "登录",
                //取消按钮文字
                cancelText: "取消"
            }
        }, onLogin);
    }
}, true);

login 登录：百度

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://ruanzhu.yimenapp.com/assets/img/mp.png",
                //图片样式
                imageStyle: "max-width:72px;max-height:72px;border-radius:12px",
                //提示文字
                message: "请登录后使用我们更多的服务",
                //登录按钮文字
                loginText: "登录",
                //取消按钮文字
                cancelText: "取消"
            }
        }, onLogin);
    }
}, true);

getPhoneNumber 获取手机号码

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://ruanzhu.yimenapp.com/assets/img/mp.png",
                //图片样式
                imageStyle: "max-width:72px;max-height:72px;border-radius:12px",
                //提示文字
                message: "请登录后使用我们更多的服务",
                //授权按钮文字
                positiveText: "授权手机号登录",
                //取消按钮文字
                negativeText: "取消"
            }
        }, onGetPhoneNumber);
    }
}, 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://ruanzhu.yimenapp.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("不在京东小程序中");
}

Copyright © 2024 小程序