【Vite+ts+Vue3】公众号jssdk引用方法

这篇文章距离上次修改已过266天，其中的内容可能已经有所变动。

在Vite+ts+Vue3项目中引入微信公众号jssdk，首先需要确保项目能够正确地引入微信jssdk。以下是一个简单的例子：

安装微信jssdk，通常是通过npm或yarn安装微信官方提供的JavaScript SDK。

npm install weixin-js-sdk --save
# 或者
yarn add weixin-js-sdk

在Vue组件中引入并使用微信jssdk。

// 引入微信jssdk
import wx from 'weixin-js-sdk';

export default {
  mounted() {
    // 需要在服务端获取配置信息并传递给前端
    const getConfig = async () => {
      try {
        const { data } = await axios.get('/api/get-wx-config'); // 假设有一个API可以获取配置信息
        wx.config({
          debug: false, // 开启调试模式
          appId: data.appId, // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名
          jsApiList: ['chooseImage', 'uploadImage', 'downloadImage'] // 必填，需要使用的JS接口列表
        });
        wx.ready(function() {
          // 配置成功后的回调函数
          console.log('微信jssdk配置成功');
        });
        wx.error(function(res) {
          // 配置失败的回调函数
          console.log('微信jssdk配置失败', res);
        });
      } catch (error) {
        console.error('获取微信配置信息失败', error);
      }
    };
    getConfig();
  },
  methods: {
    chooseImage() {
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          console.log(res);
        }
      });
    }
  }
};

在上述代码中，我们首先引入了微信jssdk，然后在组件的mounted生命周期中，我们通过异步请求获取了微信公众号的配置信息，并使用这些信息初始化了微信jssdk。一旦初始化成功，我们就可以在组件的方法中使用微信提供的各种API，例如chooseImage方法，用于让用户选择图片。

请注意，上述代码中的/api/get-wx-config是一个假设的API接口，你需要替换为实际用来获取微信配置信息的服务端接口。同时，axios.get是使用axios来发送HTTP GET请求，你可以根据项目中使用的HTTP客户端库进行相应的调整。

【Vite+ts+Vue3】公众号jssdk引用方法

评论已关闭

推荐阅读