利用企业微信 JS-SDK 实现手机端原生能力调用

肥胖小羊2026-07-29 8:14

当企业开发 H5 混合应用时，往往需要调用手机相册、扫一扫、地理位置定位等硬件或原生系统能力。此时必须在前端页面引入并配置企业微信的 JS-SDK。

配置步骤

后端计算安全签名（signature）。签名算法涉及 jsapi_ticket、noncestr、timestamp 和当前网页的 url。
前端调用 wx.config 进行注入鉴权。
在 wx.ready 回调中绑定具体的业务动作。

前端集成代码片段

复制代码

<!-- 引入官方 JS 文件 -->
<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
  // 假设后端渲染传入的签名参数
  const configData = {
      debug: false,
      appId: 'YOUR_CORPID',
      timestamp: 1710000000,
      nonceStr: 'Wm3WZYTPz0wzccnW',
      signature: '1a2b3c4d5e...',
      jsApiList: ['scanQRCode', 'getLocation', 'openEnterpriseChat']
  };

  wx.config(configData);

  wx.ready(function(){
      // 鉴权成功后调用扫一扫
      document.getElementById('scanBtn').onclick = function() {
          wx.scanQRCode({
              needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果
              scanType: ["qrCode","barCode"],
              success: function (res) {
                  const result = res.resultStr; // 当needResult为1时，扫码返回的结果
                  console.log("Scanned result: ", result);
              }
          });
      };
  });

  wx.error(function(res){
      console.error("JS-SDK config error:", res.errMsg);
  });
</script>

通过熟练运用 JS-SDK，移动端网页可以获得接近原生 App 的顺畅交互体验。