uniapp如何集成公众号jssdk

在uniapp项目中如何正确集成微信公众号的JSSDK？我已经按照官方文档配置了安全域名并引入了JS文件，但在调用wx.config时总是提示签名无效。想请教具体的实现步骤：1）后端签名获取的正确方式；2）uniapp中wx.ready的最佳调用时机；3）有没有处理过iOS和安卓端的兼容性问题？项目中用的是vue3版本，会不会有特殊注意事项？

2 回复

在uniapp中集成公众号jssdk，需要先引入jssdk文件，然后在页面中通过wx.config进行配置，传入appId、timestamp、nonceStr、signature等参数。注意签名需在后端生成，前端调用接口获取。配置成功后即可使用jssdk的API。


在 UniApp 中集成微信公众号 JS-SDK，需通过 Web 页方式实现，因为 UniApp 本身无法直接调用微信 JS-SDK。以下是详细步骤：

1. 准备工作

  • 已认证的公众号，并获取 appId。
  • 配置公众号的 JS接口安全域名（在公众号后台设置）。

2. 后端配置（获取签名）

JS-SDK 使用需后端生成签名。示例使用 Node.js（其他语言逻辑类似）：

const jsSHA = require('jssha');

function getJSSDKConfig(url) {
  const appId = '你的公众号appId';
  const appSecret = '你的公众号appSecret';
  const timestamp = Math.floor(Date.now() / 1000);
  const nonceStr = Math.random().toString(36).substr(2, 15);
  
  // 获取 access_token（需缓存，避免频繁调用）
  const tokenUrl = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`;
  // 使用 token 获取 jsapi_ticket
  const ticketUrl = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi`;
  
  // 生成签名
  const signatureStr = `jsapi_ticket=JSAPI_TICKET&noncestr=${nonceStr}×tamp=${timestamp}&url=${url}`;
  const shaObj = new jsSHA(signatureStr, 'TEXT');
  const signature = shaObj.getHash('SHA-1', 'HEX');
  
  return { appId, timestamp, nonceStr, signature };
}

3. UniApp 页面集成

在 UniApp 中创建 Web 页面（如 web-view 组件），加载已集成 JS-SDK 的 H5 页面：

<template>
  <web-view :src="webUrl"></web-view>
</template>

<script>
export default {
  data() {
    return {
      webUrl: 'https://你的域名.com/h5-page?url=' + encodeURIComponent(window.location.href)
    };
  }
};
</script>

4. H5 页面调用 JS-SDK

在 H5 页面中引入 JS-SDK 并初始化：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
  <script>
    // 从 URL 获取后端返回的配置参数（实际由后端接口返回）
    const config = {
      appId: '后端返回的appId',
      timestamp: '后端返回的时间戳',
      nonceStr: '后端返回的随机字符串',
      signature: '后端返回的签名'
    };

    wx.config({
      debug: false, // 开启调试模式
      appId: config.appId,
      timestamp: config.timestamp,
      nonceStr: config.nonceStr,
      signature: config.signature,
      jsApiList: ['chooseImage', 'previewImage'] // 需使用的 API 列表
    });

    wx.ready(function() {
      // 初始化成功后调用 API
      wx.chooseImage({
        count: 1,
        success: function(res) {
          console.log('选择图片成功:', res);
        }
      });
    });

    wx.error(function(res) {
      console.error('JS-SDK 初始化失败:', res);
    });
  </script>
</body>
</html>

注意事项

  1. URL 一致性：签名用的 URL 必须与当前页面 URL 完全一致（包括 # 后参数）。
  2. 域名校验：确保 web-view 加载的页面在公众号安全域名内。
  3. API 权限：在 jsApiList 中声明需调用的接口。

通过以上步骤，即可在 UniApp 中间接使用微信公众号 JS-SDK 功能。

回到顶部