关于微信 WeixinJSBridge整理

面条请不要欺负汉堡

已于 2025-01-02 10:56:12 修改

阅读量1.7k

点赞数 22

分类专栏： Vue+Element+axios+store(vuex) 微信公众号文章标签： WeixinJSBridge 前端微信公众平台微信h5

于 2024-12-31 16:53:59 首次发布

本文链接：https://blog.csdn.net/gao_xu_520/article/details/144846196

版权

Vue+Element+axios+store(vuex) 同时被 2 个专栏收录

71 篇文章

订阅专栏

微信公众号

1 篇文章

订阅专栏

文章目录

（一）WeixinJSBridge与wx JS-SDK区别
- WeixinJSBridge
- wx JS-SDK
（二）使用API的时候会报下面问题
- - 报 {"err_msg":"system:access_denied"}
（三）WeixinJSBridge 功能
（四）材料

WeixinJSBridge 和 wx JS-SDK 都可以用于调用微信的原生功能，但它们有不同的使用场景和设计目的。理解它们之间的区别有助于更好地选择适合的开发方法。

（一）WeixinJSBridge与wx JS-SDK区别

WeixinJSBridge

WeixinJSBridge是微信内部提供的一套原生接口，允许开发者直接调用微信的一些原生功能，比如分享给好友、分享到朋友圈、隐藏工具栏等。但是，使用WeixinJSBridge有一些限制和不便之处：

不公开的接口‌：WeixinJSBridge是微信内部的桥接接口，官方没有公开详细的文档和支持，这意味着其使用可能会受到微信版本更新和功能变更的影响，从而带来兼容性问题。
开发难度较大‌：直接使用WeixinJSBridge需要对微信的内部实现有更深的了解，开发难度较大，不适合一般开发者使用。
安全风险‌：直接调用WeixinJSBridge可能会绕过微信的安全检查和权限验证机制，存在安全风险。

wx JS-SDK

wx JS-SDK是微信官方提供的一套前端开发工具包，旨在为开发者提供安全、稳定和方便的微信原生功能调用接口。它基于WeixinJSBridge封装，提供了更高层次的API，并确保安全性和兼容性。wx JS-SDK具有以下优势：

‌官方支持‌：wx JS-SDK是微信官方发布并维护的，提供详细的文档和技术支持，确保开发者能够顺利使用微信功能。 ‌
安全性高‌：通过wx JS-SDK调用微信功能时，微信会进行安全验证（如签名校验），确保调用是合法的，并防止滥用。 ‌
封装良好‌：wx JS-SDK对WeixinJSBridge进行了高层封装，提供了更简单易用的API，降低了开发难度。 ‌
跨版本兼容‌：wx JS-SDK通过版本控制和更新机制，确保不同版本的微信客户端都能正确支持相关功能。

总的来说，WeixinJSBridge和wx JS-SDK都可以在微信浏览器中调用微信的原生功能，但wx JS-SDK是官方推荐的方式，因为它更安全、更稳定、更方便，适合绝大多数开发者使用。

尽管 WeixinJSBridge其不公开、不稳定和安全性问题,但是在某些情况下可以直接调用微信的原生功能，还是很香的。

（二）使用API的时候会报下面问题

报 {“err_msg”:“system:access_denied”}

（三）WeixinJSBridge 功能

必须在微信中打开有效！！必须在微信中打开有效！！必须在微信中打开有效！！
微信浏览器私有接口WeiXinJsBridge，大致有以下几个有用的知识点：

关闭当前浏览器
获取用户的网络状态
图片集预览
发邮件
跳转到指定公众号账号页面
分享系列功能
隐藏下方工具栏隐藏微信右上角分享按钮（三个小圆点）
微信浏览器支付函数

关闭当前浏览器

 WeixinJSBridge.call('closeWindow');

获取用户的网络状态

var netType = {
							"network_type:wifi": "wifi网络",
							"network_type:edge": "非wifi,包含3G/2G",
							"network_type:fail": "网络断开连接",
							"network_type:wwan": "2g或者3g"
						};
						WeixinJSBridge.invoke("getNetworkType", {}, function(e) {
							alert(netType[e.err_msg])
						})

图片集放大预览

 WeixinJSBridge.invoke("imagePreview", {
				 	"urls": [
				 		"https://b0.bdstatic.com/ugc/plwcNl7cCzbLNwBlvLGcuAa0ea704a48784b19a64e448c1870ccfb.jpg",
				 		"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png",
				 		"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_workStyle1ca3fe.png"
				 	]
				 })

发邮件


				WeixinJSBridge.invoke("sendEmail", {
						"title": "新年快乐!",
						"content": "你好 2025年", //时间戳 这里随意使用了一个值
					},
					function(e) {
						alert(e.err_msg)
					})

在这里插入图片描述

但是点击发送下面的操作，不行

跳转到指定公众号账号页面

分享系列功能

分享系列功能微信6.0之后不再可以使用，但是微信提供的新的方法 JS-SDK, 官方接口请参见微信JSSDK说明文档

隐藏下方工具栏隐藏微信右上角分享按钮（三个小圆点）

我在测试环境是无效的

微信浏览器支付函数

function onBridgeReady() {
    // 从后端获取的支付参数
    var payParams = {
        "appId": "your_app_id",       // 公众号ID
        "timeStamp": "your_timestamp", // 时间戳
        "nonceStr": "your_nonce_str", // 随机字符串
        "package": "prepay_id=your_prepay_id", // 订单详情扩展字符串
        "signType": "MD5",            // 签名类型
        "paySign": "your_pay_sign"    // 签名
    };

    // 调用WeixinJSBridge的invoke方法发起支付
    WeixinJSBridge.invoke('getBrandWCPayRequest', payParams, function(res) {
        // 处理支付结果
        if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 支付成功
            alert("支付成功！");
        } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
            // 用户取消支付
            alert("用户取消了支付！");
        } else {
            // 支付失败
            alert("支付失败，请重试！");
        }
    });
}

// 检测WeixinJSBridge对象是否存在，如果不存在则监听WeixinJSBridgeReady事件
if (typeof WeixinJSBridge == "undefined") {
    if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
} else {
    // WeixinJSBridge对象已存在，直接调用onBridgeReady函数
    onBridgeReady();
}