在uni-app+Vue3中使用JSSDK时，如何调用微信提供的原生接口？

于 2025-06-06 10:50:19 发布
阅读量493 收藏 6
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 默认专栏(前端) 文章标签： uni-app 微信 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huang3513/article/details/148470363

在 uni-app + Vue3 中调用微信 JSSDK 原生接口的详细方法

一、前置条件

  1. 环境准备

    • uni-app 版本 ≥ 3.0
    • Vue 版本 ≥ 3.2
    • 已引入微信 JSSDK（在 index.html 中）
    • 已完成微信公众号配置（AppID、安全域名）

  2. JSSDK 初始化

    • 确保在调用接口前已完成 JSSDK 配置
    • 配置中需包含要使用的接口名称（jsApiList）
二、调用微信原生接口的通用步骤
  1. 初始化 JSSDK
  2. 在 wx.ready 回调中调用接口
  3. 处理成功/失败回调
// 1. 初始化 JSSDK
wx.config({
  debug: false, // 生产环境关闭调试
  appId: 'YOUR_APPID',
  timestamp: 123456789, // 时间戳
  nonceStr: 'abcdefg', // 随机字符串
  signature: '...', // 签名
  jsApiList: [
    'getLocation', // 地理位置
    'scanQRCode', // 扫一扫
    'chooseImage', // 选择图片
    'updateAppMessageShareData', // 分享给朋友
    // 其他需要使用的接口
  ]
});

// 2. 在 ready 回调中调用接口
wx.ready(() => {
  // 调用具体接口
  wx.getLocation({
    type: 'wgs84',
    success: (res) => {
      // 3. 处理成功回调
      console.log('地理位置:', res);
    },
    fail: (err) => {
      // 处理失败回调
      console.error('获取位置失败:', err);
    }
  });
});
三、在 Vue3 中封装 JSSDK 服务

推荐创建一个可复用的服务模块：

// services/wx.js
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';

// 缓存配置状态
const isConfigured = ref(false);
let readyCallback = null;

// 获取签名配置
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(jsApiList = []) {
  // 避免重复初始化
  if (isConfigured.value) return true;

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

  return new Promise((resolve, reject) => {
    wx.config({
      debug: false,
      appId: config.appId,
      timestamp: config.timestamp,
      nonceStr: config.nonceStr,
      signature: config.signature,
      jsApiList: [
        'checkJsApi', // 检查接口可用性
        ...jsApiList // 用户自定义接口
      ]
    });

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

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

// 检查接口可用性
function checkJsApi(apiList) {
  return new Promise((resolve, reject) => {
    wx.checkJsApi({
      jsApiList: apiList,
      success: (res) => {
        resolve(res.checkResult);
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
}

// 组合式函数：在组件中使用
function useWxApi(jsApiList = []) {
  // 初始化 JSSDK
  onMounted(async () => {
    try {
      await initJssdk(jsApiList);
    } catch (error) {
      console.error('初始化微信 JSSDK 失败:', error);
    }
  });

  // 调用接口的通用方法
  const callWxApi = (apiName, options = {}) => {
    return new Promise((resolve, reject) => {
      if (!isConfigured.value) {
        reject(new Error('JSSDK 未初始化'));
        return;
      }

      wx[apiName]({
        ...options,
        success: (res) => resolve(res),
        fail: (err) => reject(err)
      });
    });
  };

  return {
    isConfigured,
    callWxApi,
    checkJsApi
  };
}

export default {
  initJssdk,
  checkJsApi,
  useWxApi
};
四、常用接口调用示例
1. 获取地理位置
<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';

// 注入 JSSDK 服务，指定需要的接口
const { callWxApi } = wxService.useWxApi(['getLocation']);
const location = ref(null);
const error = ref(null);

const getLocation = async () => {
  try {
    const res = await callWxApi('getLocation', {
      type: 'wgs84', // 默认为wgs84的gps坐标，可改为'gcj02'
      success: (res) => {
        location.value = {
          latitude: res.latitude,
          longitude: res.longitude,
          speed: res.speed,
          accuracy: res.accuracy
        };
      }
    });
    console.log('位置信息:', res);
  } catch (err) {
    error.value = err;
    console.error('获取位置失败:', err);
  }
};
</script>
2. 扫一扫功能
<template>
  <view>
    <button @click="scanCode">扫一扫</button>
    <text v-if="scanResult">扫描结果: {{ scanResult }}</text>
  </view>
</template>

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

const { callWxApi } = wxService.useWxApi(['scanQRCode']);
const scanResult = ref('');

const scanCode = async () => {
  try {
    const res = await callWxApi('scanQRCode', {
      needResult: 1, // 1: 返回结果，0: 微信处理结果
      scanType: ['qrCode', 'barCode'], // 二维码或条形码
    });
    scanResult.value = res.resultStr;
  } catch (err) {
    console.error('扫描失败:', err);
  }
};
</script>
3. 拍照/选择图片
<template>
  <view>
    <button @click="chooseImage">选择图片</button>
    <view v-for="(img, index) in images" :key="index">
      <image :src="img" mode="aspectFit" />
    </view>
  </view>
</template>

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

const { callWxApi } = wxService.useWxApi(['chooseImage']);
const images = ref([]);

const chooseImage = async () => {
  try {
    const res = await callWxApi('chooseImage', {
      count: 9, // 最多选择9张
      sizeType: ['original', 'compressed'], // 原图或压缩图
      sourceType: ['album', 'camera'], // 相册或相机
    });
    
    images.value = res.localIds; // 本地图片ID
    
    // 上传图片到微信服务器（可选）
    for (const localId of res.localIds) {
      try {
        const uploadRes = await callWxApi('uploadImage', {
          localId,
          isShowProgressTips: 1
        });
        console.log('上传成功，serverId:', uploadRes.serverId);
        // 可将 serverId 发送到自己的服务器
      } catch (uploadErr) {
        console.error('上传失败:', uploadErr);
      }
    }
  } catch (err) {
    console.error('选择图片失败:', err);
  }
};
</script>
4. 分享功能
<template>
  <view>
    <button @click="setShareConfig">设置分享</button>
  </view>
</template>

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

const { callWxApi } = wxService.useWxApi([
  'updateAppMessageShareData', // 分享给朋友
  'updateTimelineShareData'    // 分享到朋友圈
]);

const setShareConfig = async () => {
  try {
    // 设置分享给朋友
    await callWxApi('updateAppMessageShareData', {
      title: '分享标题',
      desc: '分享描述',
      link: 'https://yourdomain.com/share',
      imgUrl: 'https://yourdomain.com/logo.png',
      success: () => {
        console.log('设置好友分享成功');
      }
    });
    
    // 设置分享到朋友圈
    await callWxApi('updateTimelineShareData', {
      title: '分享标题',
      link: 'https://yourdomain.com/share',
      imgUrl: 'https://yourdomain.com/logo.png',
      success: () => {
        console.log('设置朋友圈分享成功');
      }
    });
  } catch (err) {
    console.error('设置分享失败:', err);
  }
};
</script>
五、高级用法
1. 批量检查接口可用性
const checkApiAvailability = async () => {
  try {
    const result = await wxService.checkJsApi([
      'getLocation',
      'scanQRCode',
      'chooseImage'
    ]);
    
    console.log('接口可用性:', result);
    // result 格式: { getLocation: true, scanQRCode: true, ... }
  } catch (err) {
    console.error('检查接口失败:', err);
  }
};
2. 自定义组合式函数
// composables/useWxLocation.js
import { ref, onMounted } from 'vue';
import wxService from '@/services/wx';

export function useWxLocation() {
  const location = ref(null);
  const isLoading = ref(false);
  const error = ref(null);
  
  const { callWxApi } = wxService.useWxApi(['getLocation']);
  
  const getLocation = async (options = {}) => {
    isLoading.value = true;
    error.value = null;
    
    try {
      const res = await callWxApi('getLocation', {
        type: 'wgs84',
        ...options
      });
      
      location.value = {
        latitude: res.latitude,
        longitude: res.longitude,
        speed: res.speed,
        accuracy: res.accuracy
      };
    } catch (err) {
      error.value = err;
    } finally {
      isLoading.value = false;
    }
  };
  
  // 组件挂载时自动获取位置（可选）
  onMounted(() => {
    getLocation();
  });
  
  return {
    location,
    isLoading,
    error,
    getLocation
  };
}

在组件中使用：

<template>
  <view>
    <button @click="getLocation">刷新位置</button>
    <view v-if="isLoading">加载中...</view>
    <view v-else-if="error">错误: {{ error.errMsg }}</view>
    <view v-else-if="location">
      纬度: {{ location.latitude }}, 经度: {{ location.longitude }}
    </view>
  </view>
</template>

<script setup>
import { useWxLocation } from '@/composables/useWxLocation';

const { location, isLoading, error, getLocation } = useWxLocation();
</script>
六、注意事项

  1. URL 一致性

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

  2. 错误处理

    • 使用 try/catch 捕获接口调用错误
    • 常见错误：签名错误、权限不足、接口未配置

  3. 接口限制

    • 部分接口需要用户授权（如地理位置）
    • 某些接口有调用频率限制（如上传图片）

  4. 版本兼容

    • 检查微信客户端版本是否支持所需接口
    • 使用 checkJsApi 验证接口可用性

  5. 生产环境优化

    • 关闭 debug: true
    • 缓存签名配置（有效期 7200 秒）
    • 错误日志上报

通过以上方法，您可以在 uni-app + Vue3 项目中优雅地调用微信 JSSDK 提供的各种原生接口，实现丰富的微信生态功能。

Vue2 - 最新详解实现网站接入微信支付功能，调起微信支付页面或微信扫码支付效果详细教程，手机移动端H5或电脑PC网页 “微信环境内支付“与“脱离微信环境外部浏览器支付“ 示例代码，支持微信公众号！
王二红
06-22 3234
vue2，nuxt2，微信支付，vue微信支付，vue2如何使用微信支付，脱离浏览器怎么用微信支付，redirect_uri参数错误，回调地址错误，h5生成微信支付二维码，H5微信支付，PC端微信支付，前端支付，拉起微信支付，pc扫码支付，新手小白详细教程示例，SDK，vue对接微信支付，拉不起来微信支付，微信公众号，h5支付，jssdk，JSAPI，公众号网页支付，pc网站，微信支付二维码，生成支付二维码，扫码支付，扫码支付，uni-app，详解微信支付，支付回调报错，微信支付报错，无法支付，无法唤起支付
Vue3 - 最新详解实现网站接入微信支付功能，调起微信支付页面或微信扫码支付效果详细教程，手机移动端H5或电脑PC网页 “微信环境内支付“与“脱离微信环境外部浏览器支付“ 示例代码，支持微信公众号！
热门推荐
王二红
06-22 1万+
vue3，nuxt3，微信支付，vue微信支付，微信公众号，h5支付，jssdk，JSAPI，公众号网页支付，pc网站，微信支付二维码，生成支付二维码，扫码支付，扫码支付，uni-app，详解微信支付，支付回调报错，微信支付报错，无法支付，无法唤起支付窗口，vue3如何使用微信支付，脱离浏览器怎么用微信支付，redirect_uri参数错误，回调地址错误，h5生成微信支付二维码，H5微信支付，PC端微信支付，前端支付，拉起微信支付，pc扫码支付，新手小白详细教程示例，SDK，vue对接微信支付，拉不起来微信
uni-app在vue3中对接微信JSSDK
meng_xiaoxiao的博客
10-19 5579
import wx from "weixin-js-sdk"，挂载到全局app.config.globalProperties.$wx=wx;第三步：获取JSSDK在网页中的授权信息及初始化JSSDK，授权信息是后台发返回的。在项目的终运行命令：npm i weixin-js-sdk 如下图。在APP.vue里面调用getWxSignature。第二步，在项目人口文件导入微信jssdk。第一步：引入jssdk。
uniapp微信授权+接入JS SDK
m0_55452200的博客
05-12 944
uniapp集成了wx实例，引入<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>就不能再使用wx.config配置，可以使用jWeixin.config。微信官网授权文档： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html。回跳地址的域名需和微信后台配置的域名一致，否则会报错。
vue3引入JS-SDK实现h5分享小卡片、跳转微信小程序功能
子期
05-13 9826
vue3引入JS-SDK实现h5分享小卡片、跳转微信小程序功能
uniapp使用微信jssdk自定义分享
weixin_43832950的博客
05-22 3637
本文记录的是使用uniapp开发的H5+APP项目，H5端使用微信自定义分享功能，文中有关APP的兼容，如果不需要兼容APP的可以忽略
uniapp开发的公众号项目，使用微信JSSDK完成微信支付
m0_72929120的博客
07-04 3004
【代码】uniapp开发的公众号项目，使用微信JSSDK完成微信支付。
微信网页开发，JSSDK配置，uniapp开发h5 调用微信sdk 全网最全指南！！！！ 血泪史！！!
Weiyang627的博客
03-02 2821
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js。
微信公众号开发:Vue3+Pinia
琼楼玉宇
09-06 1206
前端获取到这些数据后，填写进config里，注意这里传的url,不能含#后面的，当然参考了微信文档里的签名。先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。后端写好后，访问后端的结果应该是这个样的。最终成功安装了wx.config。
uni-app：Vue.js驱动的全能跨平台开发框架
4. 丰富的开发生态：uni-app支持npm安装第三方包，兼容微信小程序自定义组件和JSSDK，还可以无缝整合mpvue组件和项目，甚至支持App端的原生混合编码，且DCloud会持续发布丰富的插件供开发者使用。 5. 工程流程简化...
混合式App开发：uni-app入门与打包解析
混合式App开发通过uni-app这样的框架，为开发者提供了高效、跨平台的解决方案，降低了开发成本，同时能够提供接近原生App的用户体验。通过遵循一定的开发规范和利用框架提供的API，开发者可以构建功能丰富的多端应用...
uni-app：一站式的跨平台前端框架
"uni-app是一个基于Vue.js的跨平台前端框架，旨在解决多端开发问题，提供一套代码在Android、iOS、H5、小程序等多个平台的编译能力。它具有良好的用户体验，丰富的生态，较低的学习和开发成本。uni-app的特点包括...
uniApp H5使用JSSDK对接微信公众号问题
u013432938的博客
01-19 2157
Uniapp H5使用jssdk对接微信公众号的时候，遇到了一大推问题。在此整理一下解决办法；
uniapp开发微信公众号网页-微信JSSDK使用
qq_38746300的博客
04-07 4253
uniapp开发微信公众号网页-微信JSSDK使用一. 安装jweixin-module二. 新建js文件,把jssdk的接口简单封装,然后挂载到vue实例1. 在js公共文件夹下创建wechat.js2. 在 main.js 引入 wechat.js3. 使用微信 jssdk 接口4. 其他 JS-SDK说明文档-微信开放文档 一. 安装jweixin-module 使用 npm 安装微信 jssdk npm install jweixin-module --save 二. 新建js文件,把jssdk的
VUE项目引入微信JSSDK 使用微信api
weixin_54397440的博客
05-29 1993
第一个接口 是初始化 ssdk的。第二个接口 是调用微信支付的。
UniApp中实现微信分享功能：步骤详解与最佳实践
大白菜代码的博客
02-22 1万+
通过获取签名信息、配置微信JSSDK、设置分享数据和测试分享功能等步骤，您可以轻松地将链接分享到微信好友，并显示标题和缩略图。特别是在中国，微信作为最大的社交平台，其分享功能对于应用的推广和用户互动至关重要。在H5页面中触发分享操作，观察微信是否弹出分享界面，并检查分享的标题、链接和缩略图是否正确显示。需要注意的是，由于微信分享的签名信息有一定的有效期（通常为2小时），因此在设置分享之前需要检查签名是否过期。函数中，使用获取到的签名信息配置微信JSSDK，并设置分享的标题、链接、缩略图等内容。
uniapp + Vue3 开发微信公众号、H5时，jssdk 的使用方式详细介绍？
最新发布
向着太阳迎着光
06-06 488
摘要 本文详细介绍了在uni-app + Vue3项目中集成微信JSSDK的开发流程，包括：1) 前期准备工作，如微信公众号注册与域名配置；2) 前端集成步骤，包含JSSDK引入、初始化服务封装及后端签名接口实现(Node.js示例)；3) 常用功能如微信分享的实现方法。重点讲解了如何通过Promise封装初始化逻辑，确保JSSDK配置完成后执行后续操作，并提供了完整的代码示例。该方案适用于微信公众号/H5开发场景，可快速实现微信原生能力调用。
uniapp中如何使用微信SDK
pgzero的博客
05-31 4315
一、 需要去微信公众号后台配置js接口安全域名 二、安装jweixin-module npm i jweixin-module 三，在需要分享的页面引入 <script> // #ifdef H5 let jweixin = require('jweixin-module') // #endif ..... </script> 四、请求后台接口获取配置项并处理分享 distributrShare() { this.$http({ apiN
uniapp 开发实操二：uniapp 调用 微信小程序自定义组件
qq_40263927的博客
01-03 5778
用uniapp 开发手机app，有些功能需要结合原生代码进行开发.主流原生有android,ios,微信小程序等。下面先来看下微信小程序是如何自定义的。 1.微信页面 页面源码： <view class="container"> <movie></movie> <movie></movie> <movie></movie> </view> 样式： .container{ padding:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

疯狂的沙粒

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

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

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

打赏作者

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

抵扣说明：

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

余额充值