h5页面在微信环境中使用微信提供的方法

原创于 2025-09-16 17:01:07 发布 · 1.2k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #微信小程序 #html5 #javascript #前端 #后端

最近有一个项目要在h5页面里面使用微信提供的的一些方法（例如扫一扫、定位等等），由于我这边这个h5项目是使用webView嵌入到微信小程序中，所以这边暂时就提供两个办法。

第一种就是在h5页面使用微信公众号提供的JS-SDK,这种方法需要后端配合
第二种就是通过微信小程序桥接实现（就是在原生小程序里面增加一个对应的功能页面，h5页面使用的时候直接跳转到对应的小程序的功能页面来实现）

第一种h5里面使用JS-SDK实现的步骤

前期准备：

获取公众号的AppID并配置JS安全域名：公众号一定要是已经认证通过的，然后确保你的h5页面地址的域名添加到该公众号的"js安全域名中"

服务器端生成的签名：签名是验证请求合法性的关键，必须在服务器端完成。需要用到公众号的AppID和AppSecret（务必保密）来获取 jsapi_ticket，然后使用算法生成签名（这一步就需要后端帮前端写个接口或者前端使用node来自己完成）

微信网页开发 / JS-SDKhttps://developers.weixin.qq.com/doc/service/guide/h5/jssdk.html这边就需要后端根据官方这个文档来生成前端所需要的签名了，这个很重要，签名生成错误的话就会导致调用对应的方法的时候会报错

我这边签名遇到的一个问题就是对应微信公众号要把服务器的ip也要加进白名单，不然也会报错

第一步先在所在的h5页面引入JS-SDK脚本文件

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

第二步就是调取后端提供的接口，根据传过来的对应的值来初始化配置，官方也都提供个对应的生成签名的例子，不知道怎么生成的话可以看下前面那个文档和示例代码（后端的同学不知道怎么写的可以看一下那个代码包里面的对应的）

 const config = {};
/*
注意这边要给后端传一个当前地址的url然后使用encodeURIComponen()转化一下传给后端
 */
$.post("/zhrc/api/applet/sign/ticket?url=" + encodeURIComponent(window.location.href.split('#')[0]), {}, function(result) {
                console.log(result)
                //这边这个JSON.parse()是因为我接收到的是JSON字符串我用这个方法转化一下
                let result1 = JSON.parse(result)
                console.log(result1)
                config.appId = result1.appid;
                config.timestamp = result1.timestamp;
                config.nonceStr = result1.nonceStr;
                config.signature = result1.signature;
                //下面这个配置你就要根据你自己使用那个方法就加那个方法，这个配置也可以在前面，微信官方那个文档里面有，自己需要那个就引用那个就可以了
                config.jsApiList = [
                    'scanQRCode',
                ]
            });

第三步初始化 JS-SDK

            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
                appId: config.appId,
                timestamp: config.timestamp,
                nonceStr: config.nonceStr,
                signature: config.signature,
                jsApiList: config.jsApiList
            });

这边呢，现在JS-SDK就已经初始化好了，现在就要在微信环境中来校验签名了，切记这边这个操作一定要在微信环境中

现在就可以微信开发者工具，在项目里面找到更换开发模式，切换成公众号网页调试

然后在这边输入你h5页面的地址回车即可

然后在右边就可以看到你的h5页面

这边以扫一扫为例子,初始化校验签名成功的话就会出现我下面圈出来的，然后再点一下扫一扫，

调用对应方法前面那个官方文档里面都有都可以自己找一下

这样就相当于初始化成功了，然后你在手机上微信打开这个h5地址，一定要在微信内置的浏览器，

现在就可以调起扫一扫了。接着写你自己需要的功能即可

第二种微信小程序桥接实现

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <!-- 或者使用小程序提供的JS-SDK -->
<script>
    function scanViaMiniProgram() {
        if (typeof wx !== 'undefined' && wx.miniProgram) {
            // 跳转到小程序的页面，由小程序处理扫码
            wx.miniProgram.navigateTo({
                url: '/pages/scan/scan?key=yourValue' // 传递参数到小程序页面
            });
        } else {
            alert('请在微信小程序中打开');
        }
    }
</script>
<button onclick="scanViaMiniProgram()">小程序扫一扫</button>

在小程序的 pages/scan/scan 页面，使用小程序的原生扫码API

// pages/scan/scan.js
Page({
    onLoad: function(options) {
        // 可以接收H5页面传递的参数
        const key = options.key;
        
        wx.scanCode({
            success: (res) => {
                const result = res.result;
                // 扫码成功后，将结果带回之前的WebView页面
                // 一种方式是通过 navigateBack 传递数据，但更复杂且容易丢失
                // 另一种更可靠的方式：跳转到一个专门的“中转”WebView页面，并将结果作为参数传递给这个H5页面
                wx.navigateTo({
                    url: `/pages/webview/webview?scanResult=${encodeURIComponent(result)}&otherParam=${key}`
                });
            },
            fail: (err) => {
                console.error(err);
                wx.navigateBack(); // 扫码失败，返回上一页
            }
        });
    }
});

随后，在小程序的 pages/webview/webview 页面中，通过WebView组件的URL将扫码结果传递给H5页面。

重要提醒与常见问题

域名配置是关键：

如果使用JS-SDK方式，H5页面的域名必须配置在公众号的“JS接口安全域名”下。
- 如果使用小程序桥接方式，H5页面的域名必须配置在小程序的“业务域名”下。
- 确保域名已备案，且服务器支持HTTPS。
签名错误：这是最常见的问题。确保前端用于生成签名的URL参数与后端计算签名时使用的URL完全一致（需要动态获取并解码），且没有带 # 及其后面的片段
权限与配额：公众号需要认证（每年需年审）才能获取高级接口权限。JS-SDK的调用次数也有限制，需注意。
在iOS与Android上的差异：早期某些Android机型对SPA（单页面应用）的路由历史管理支持可能有问题，可能导致签名失效，请注意测试

还是不确定哪种方式适合你？

优先尝试JS-SDK方式：如果你的H5页面域名已经或者可以配置在公众号的JS安全域名下，且公众号是已认证的服务号，这通常是体验最好的选择。
考虑小程序桥接方式：如果配置公众号权限遇到困难，或者JS-SDK调用持续出现签名等问题，可以作为备选方案。或者扫码功能并非在H5页面的核心流程中，对跳转体验不敏感时也可使用。