uniapp + Vue3 开发微信公众号、H5时，jssdk 的使用方式详细介绍？

最新推荐文章于 2025-07-15 10:34:53 发布
最新推荐文章于 2025-07-15 10:34:53 发布
阅读量749 收藏 8
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 默认专栏(前端) 文章标签： uni-app 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huang3513/article/details/148470236

uni-app + Vue3 开发微信公众号/H5 中 JSSDK 的详细使用方式

一、准备工作

  1. 微信公众号配置

    • 注册微信服务号（订阅号功能受限）
    • 配置 JS 接口安全域名（如：yourdomain.com）
    • 获取 AppID 和 AppSecret（需保密）

  2. 项目环境

    • uni-app 版本 ≥ 3.0
    • Vue 版本 ≥ 3.2
    • 确保 H5 域名与微信配置一致
二、JSSDK 集成步骤
1. 引入 JSSDK

在 index.html 中添加：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>uni-app</title>
  <!-- 引入微信 JSSDK -->
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>
2. 创建 JSSDK 初始化服务
// services/wx.js
import { ref } from 'vue';
import axios from 'axios';

// 缓存配置，避免重复请求
const isConfigured = ref(false);

// 获取签名配置
async function getSignature(url) {
  try {
    // 调用后端接口获取签名（需自行实现）
    const response = await axios.get('/api/wx/signature', {
      params: { url }
    });
    return response.data;
  } catch (error) {
    console.error('获取微信签名失败:', error);
    return null;
  }
}

// 初始化 JSSDK
async function initJssdk() {
  // 避免重复初始化
  if (isConfigured.value) return true;

  // 获取当前 URL（不含 hash）
  const url = window.location.href.split('#')[0];
  
  // 获取签名配置
  const config = await getSignature(url);
  if (!config) return false;

  // 配置 JSSDK
  return new Promise((resolve, reject) => {
    wx.config({
      debug: false, // 生产环境关闭调试
      appId: config.appId,
      timestamp: config.timestamp,
      nonceStr: config.nonceStr,
      signature: config.signature,
      jsApiList: [
        'updateAppMessageShareData',
        'updateTimelineShareData',
        'chooseImage',
        'getLocation',
        'scanQRCode'
        // 根据需要添加其他接口
      ]
    });

    wx.ready(() => {
      isConfigured.value = true;
      resolve(true);
    });

    wx.error((res) => {
      console.error('微信 JSSDK 配置失败:', res);
      reject(res);
    });
  });
}

export default {
  initJssdk,
  isConfigured
};
3. 后端签名接口实现（示例）

后端需提供接口生成签名，以下是 Node.js 示例：

// 后端接口（Node.js + Express）
const express = require('express');
const axios = require('axios');
const crypto = require('crypto');
const app = express();

// 配置
const appId = 'YOUR_APPID';
const appSecret = 'YOUR_APPSECRET';
let accessToken = '';
let jsapiTicket = '';
let tokenExpires = 0;
let ticketExpires = 0;

// 获取 AccessToken
async function getAccessToken() {
  const now = Date.now();
  if (now < tokenExpires) return accessToken;

  const response = await axios.get(
    `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`
  );
  
  accessToken = response.data.access_token;
  tokenExpires = now + (response.data.expires_in - 200) * 1000; // 提前200秒刷新
  return accessToken;
}

// 获取 JSAPI Ticket
async function getJsapiTicket() {
  const now = Date.now();
  if (now < ticketExpires) return jsapiTicket;

  const token = await getAccessToken();
  const response = await axios.get(
    `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${token}&type=jsapi`
  );
  
  jsapiTicket = response.data.ticket;
  ticketExpires = now + (response.data.expires_in - 200) * 1000; // 提前200秒刷新
  return jsapiTicket;
}

// 生成签名
function generateSignature(nonceStr, timestamp, url, ticket) {
  const str = `jsapi_ticket=${ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`;
  return crypto.createHash('sha1').update(str).digest('hex');
}

// 签名接口
app.get('/api/wx/signature', async (req, res) => {
  try {
    const url = req.query.url;
    const nonceStr = Math.random().toString(36).substr(2, 15);
    const timestamp = Math.floor(Date.now() / 1000);
    const ticket = await getJsapiTicket();
    const signature = generateSignature(nonceStr, timestamp, url, ticket);
    
    res.json({
      appId,
      nonceStr,
      timestamp,
      signature
    });
  } catch (error) {
    console.error('生成签名失败:', error);
    res.status(500).json({ error: '生成签名失败' });
  }
});

app.listen(3000, () => {
  console.log('服务器启动在端口 3000');
});
三、常用功能实现
1. 分享功能
<template>
  <view>
    <button @click="setShareInfo">设置分享</button>
  </view>
</template>

<script setup>
import wxService from '@/services/wx';

// 设置分享信息
const setShareInfo = async () => {
  try {
    // 确保 JSSDK 已初始化
    await wxService.initJssdk();
    
    // 设置分享到朋友圈
    wx.updateTimelineShareData({
      title: '分享标题',
      link: 'https://yourdomain.com',
      imgUrl: 'https://yourdomain.com/logo.png',
      success: () => {
        console.log('设置朋友圈分享成功');
      },
      fail: (res) => {
        console.error('设置朋友圈分享失败:', res);
      }
    });
    
    // 设置分享给朋友
    wx.updateAppMessageShareData({
      title: '分享标题',
      desc: '分享描述',
      link: 'https://yourdomain.com',
      imgUrl: 'https://yourdomain.com/logo.png',
      success: () => {
        console.log('设置好友分享成功');
      },
      fail: (res) => {
        console.error('设置好友分享失败:', res);
      }
    });
  } catch (error) {
    console.error('初始化 JSSDK 失败:', error);
  }
};
</script>
2. 拍照/选择图片
<template>
  <view>
    <button @click="chooseImage">选择图片</button>
    <image v-for="(img, index) in images" :key="index" :src="img" mode="aspectFit" />
  </view>
</template>

<script setup>
import { ref } from 'vue';
import wxService from '@/services/wx';

const images = ref([]);

const chooseImage = async () => {
  try {
    await wxService.initJssdk();
    
    wx.chooseImage({
      count: 9, // 最多选择9张
      sizeType: ['original', 'compressed'], // 原图或压缩图
      sourceType: ['album', 'camera'], // 来源：相册或相机
      success: (res) => {
        const localIds = res.localIds; // 返回选定照片的本地ID列表
        images.value = localIds;
        
        // 如果需要上传到微信服务器
        localIds.forEach((localId) => {
          wx.uploadImage({
            localId,
            isShowProgressTips: 1,
            success: (res) => {
              const serverId = res.serverId; // 返回图片的服务器端ID
              console.log('上传成功，serverId:', serverId);
              // 可将 serverId 发送到自己的服务器保存
            }
          });
        });
      }
    });
  } catch (error) {
    console.error('初始化 JSSDK 失败:', error);
  }
};
</script>
3. 获取地理位置
<template>
  <view>
    <button @click="getLocation">获取位置</button>
    <text v-if="location">纬度: {{ location.latitude }}, 经度: {{ location.longitude }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import wxService from '@/services/wx';

const location = ref(null);

const getLocation = async () => {
  try {
    await wxService.initJssdk();
    
    wx.getLocation({
      type: 'wgs84', // 默认为wgs84的gps坐标，可改为'gcj02'
      success: (res) => {
        location.value = {
          latitude: res.latitude,
          longitude: res.longitude,
          speed: res.speed,
          accuracy: res.accuracy
        };
      },
      fail: (res) => {
        console.error('获取位置失败:', res);
      }
    });
  } catch (error) {
    console.error('初始化 JSSDK 失败:', error);
  }
};
</script>
4. 扫一扫功能
<template>
  <view>
    <button @click="scanQRCode">扫一扫</button>
    <text v-if="scanResult">扫描结果: {{ scanResult }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import wxService from '@/services/wx';

const scanResult = ref('');

const scanQRCode = async () => {
  try {
    await wxService.initJssdk();
    
    wx.scanQRCode({
      needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果
      scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码
      success: (res) => {
        scanResult.value = res.resultStr;
      }
    });
  } catch (error) {
    console.error('初始化 JSSDK 失败:', error);
  }
};
</script>
四、注意事项

  1. URL 一致性

    • 签名计算的 URL 必须与当前页面 URL 完全一致（不含 hash）
    • 单页应用路由变化时需重新获取签名

  2. 错误处理

    • wx.error 回调捕获配置失败原因
    • 常见错误：签名错误、权限不足、URL 不匹配

  3. 版本兼容

    • 不同版本 JSSDK 支持的接口不同
    • 微信客户端版本需 ≥ 6.0.2

  4. 性能优化

    • 签名配置可缓存（有效期 7200 秒）
    • 按需初始化，避免重复请求

  5. 生产环境

    • 关闭 debug: true
    • 后端缓存 AccessToken 和 Ticket
    • 错误日志上报
五、常见问题解决方案

  1. 签名错误

    • 检查 URL 是否正确（不含 hash）
    • 验证时间戳和随机字符串是否正确
    • 检查 JSAPI Ticket 是否有效

  2. 接口调用失败

    • 确认是否在 wx.ready 回调中调用
    • 检查 jsApiList 是否已配置对应接口
    • 微信版本是否支持该接口

  3. 单页应用问题

    • 在路由变化时重新获取签名
    • 使用全局变量缓存配置状态

  4. 跨域问题

    • 确保域名已在微信公众平台配置
    • 后端接口需处理跨域请求

通过以上步骤，您可以在 uni-app + Vue3 项目中顺利集成微信 JSSDK，实现丰富的原生功能。

Vue3 - 微信公众号H5网站使用微信扫一扫(微信扫码)，苹果报错 {“errMsg“:“scanQRCode:the permission value is offline verifying“}
🏆 前端领域优质创作者
07-17 3576
vue3，nuxt3，移动端h5网站，H5网页，公众号网页，微信内置浏览器，微信网页，详细解决，调用jssdk的scanQRCode时，显示config成功。但是ios会报错，安卓没问题，安卓Android不报错，scanQRCode:thepermissionvalueisofflineverifying，就苹果IOS系统会提示错误，就苹果ios不行，js-sdk，微信扫一扫，微信扫码，wx.scanQRCode，权限值为离线验证，依旧报错，还是不行怎么办，j公众号后台配置，苹果手机报错，只有i
uni-app 开发微信公众号（H5）JSSDK 的使用方式
热门推荐
qq_24347541的博客
04-30 7万+
因为这个jssdk被uni-app坑了好多天，作者说支持1.4版本，但是我用1.4的两个分享的新方法一直不支持。 最后只能放弃了，期待什么时候能更新上。 基本的使用方法： 第一步 - 下载使用方式 下载地址：https://unpkg.com/jweixin-[email protected]/out/index.js 项目引用： 项目下新建模块，放在该模块下。 main.js引用： var jweix...
微信公众号——WXJSSDK的使用(uniapp Vue3)
最新发布
m0_63541756的博客
07-15 708
摘要： 本文分享了微信公众号开发中的实践经验，重点介绍了JS-SDK的封装与调用方法。作者从实际项目出发，讲解了如何通过weixin-js-sdk库实现微信网页授权、支付功能等核心开发流程。文章包含SDK初始化配置、微信授权重定向、支付接口对接等关键代码示例，并强调需要后端配合完成签名等安全操作。针对开发中常见的路由参数获取、环境判断等问题提供了解决方案，最后给出了一个完整的支付功能调用示例。文章旨在帮助开发者快速上手微信公众号开发，同时指出不同账号类型的功能差异需要注意。
使用uniapp开发微信小程序，小程序内嵌uniapp开发的H5项目，在此H5项目中使用微信小程序JSSDK
在这个地方会介绍一些前端和后端的开发内容，暂时以springBoot和Vue为主。
07-31 633
使用uniapp开发微信小程序，小程序内嵌uniapp开发的H5项目，在此H5项目中使用微信小程序jssdk
uniapp 开发公众号 h5（openid，微信支付，订阅通知）
两个人的幸福online
08-05 3117
【代码】uniapp 开发公众号 h5（openid，微信支付，订阅通知）
uniapp开发微信公众号（h5）项目如何引入微信jssdk，分享，扫一扫
Whoopsina的博客
02-22 2333
最近在开发h5网页需要使用到微信jssdk，使用到了微信登录，微信分享，微信扫码，其中有很多的坑，做个笔记以备不时之需 1. 下载微信jssdk，查阅了很多资料，其中有 "jweixin-module": "^1.6.0", "weixin-js-sdk": "^1.6.0" 两种jssdk实测都可以使用,采用 ------ npm install jweixin-module --save 2.了解jssdk的使用流程，可查阅官方文档 https://developers.weix
uni-app开发微信公众号扫码功能(3)-测试微信token缓存
szguomy的专栏
10-07 733
主要针对之前缓存微信Token的云函数进行测试。
vue项目使用微信公众号支付总结及遇到的坑
12-09
1. 使用jssdk调用微信支付，具体查看开发文档； 使用的vuex，在mutations中 wechatPay (state, data) { state.payObject = data console.log(&#39;微信支付开始请求&#39;) if (wechat) { wx.chooseWXPay({ timestamp:...
Springboot+uniapp+wechatPay SDK实现微信支付(JSAPI_V3)
O_ORick的博客
01-11 367
基于微信支付v3,sdk方式实现实现微信公众号jsapi
vue3实现微信公众号一次性订阅消息+ios和Android的63002 config:invalid signature问题
weixin_44622464的博客
07-06 743
微信开放文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#23 微信 JS 接口签名校验工具 首先使用官方文档加入ip白名单，域名之类的做完之后的代码（ 可查看 微信公众号订阅通知（go+vue） https://blog.csdn.net/m0_37592532/article/details/116066277 微信订阅消息接入 使用开放标签 在 H5网页设置订阅通知组件 https:/
uni-app在vue3中对接微信JSSDK
meng_xiaoxiao的博客
10-19 5690
import wx from "weixin-js-sdk"，挂载到全局app.config.globalProperties.$wx=wx;第三步：获取JSSDK在网页中的授权信息及初始化JSSDK，授权信息是后台发返回的。在项目的终运行命令：npm i weixin-js-sdk 如下图。在APP.vue里面调用getWxSignature。第二步，在项目人口文件导入微信jssdk。第一步：引入jssdk。
uni-app微信公众号支付.vue
08-01
//微信充值 //支付接口测试 function balance(url, data) { uni.request({ url: cfg.originUrl + &#39;/wx/mp/js_sig.do&#39;, data: { route: url }, method: &#39;GET&#39;, success: (res) => { jweixin.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 appId: res.data.appId, // 必填，公众号的唯一标识 timestamp: res.data.timestamp, // 必填，生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填，生成签名的随机串 signature: res.data.signature, // 必填，签名 jsApiList: [&#39;chooseWXPay&#39;] // 必填，需要使用的JS接口列表 }); jweixin.ready(function() { uni.request({ url: cfg.originUrl + &#39;/wx/recharge/pay.do&#39;, method: &#39;POST&#39;, header: { &#39;Content-type&#39;: "application/x-www-form-urlencoded", }, data: JSON.stringify(data), success: function(res) { alert("下单成功"); alert(JSON.stringify(res)); alert(res.data.order_id); all.globalData.orderId = res.data.order_id; uni.setStorageSync(&#39;orderId&#39;, res.data.order_id); jweixin.chooseWXPay({ timestamp: res.data.payParams.timeStamp, // 支付签名时间戳 nonceStr: res.data.payParams.nonceStr, // 支付签名随机串 package: res.data.payParams.package, // 接口返回的prepay_id参数 signType: res.data.payParams.signType, // 签名方式 paySign: res.data.payParams.paySign, // 支付签名 success: function(e) { alert("支付成功"); alert(JSON.stringify(e)); // 支付成功后的回调函数 } }); } }) }); jweixin.error(function(res) { // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 console.log("验证失败！") }); } }) }
Vue开发Html5微信公众号的步骤
10-17
主要介绍了Vue开发Html5微信公众号的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
uni-app无法调用定位函数，用微信jssdk定位解决方法
siennagesen的博客
08-05 1553
uni-app无法调用定位函数，用微信jssdk定位解决方法
h5集成到爱山东APP之附件上传
04-12 1270
h5集成到爱山东app中，进行附件上传
微信公众号H5 - 使用vue开发微信公众号网页
sunshime的博客
02-20 9026
  应项目需求，最近我开始了我的第一次微信公众号网页的开发，第一次接触到公众号网页的我是很懵逼的。通过了解并实现了需求的我下面来进行讲解一下，希望可以帮助到有需要的朋友。ps：我这里请的是使用vue来开发的哈，使用其他框架或者js也是可以的哟。 第一步：新建并打开项目   我们要先建立我们的项目，npm run dev运行项目,打开微信开发者工具 - > 打开公众号网页 - > 将编译好的地址复制到微信开发者工具回车即可，如下图所示 不过在此之前，你需要先有个公众号，并且将你设置为开发
uniapp 写H5页面的时候，实现公众号（服务号）订阅通知的消息推送，使用微信JS-SDK，中的wx-open-subscribe
TTianYe的博客
04-19 2450
uniapp 写H5页面的时候，实现公众号（服务号）订阅通知的消息推送，使用微信JS-SDK，中的wx-open-subscribe
VUE项目引入微信JSSDK 使用微信api
weixin_54397440的博客
05-29 2063
第一个接口 是初始化 ssdk的。第二个接口 是调用微信支付的。
基于微信公众号开发h5的前端流程
baidu_41899377的博客
06-14 2309
还有个txt文件，有弹框提示需要下载放在服务器上。1.首先公众号进行配置，必须要https域名。前端处理code的代码封装。
vue开发微信公众号
12-31
### 使用 Vue 开发微信公众号的最佳实践 #### 选择合适的框架和技术栈 为了更高效地开发微信公众号，建议采用基于 Vue.js 的框架，如 WeVue 或 Vant Weapp。这些框架专门为构建微信小程序和 H5 应用而设计，集成了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

疯狂的沙粒

您的鼓励是我创作最大的动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值