weixin-js-sdk 如何在 vue3 + ts 项目中引入和使用

在Vue3 + TypeScript项目中使用weixin-js-sdk，你需要执行以下步骤：

1. 安装weixin-js-sdk

   npm install weixin-js-sdk

2. 在组件中引入weixin-js-sdk

   import wx from 'weixin-js-sdk';

3. 在组件mounted钩子函数中初始化JS-SDK

   mounted() {
     this.initJSSDK();
   }

4. 编写初始化JS-SDK的方法

   async initJSSDK() {
     const res = await this.$http.get('/api/signature');
     wx.config({
       debug: false,
       appId: res.data.appId,
       timestamp: res.data.timestamp,
       nonceStr: res.data.nonceStr,
       signature: res.data.signature,
       jsApiList: ['chooseImage', 'uploadImage']
     });
   }

上面的代码中，我们从后端获取了一个签名，然后使用wx.config方法进行JS-SDK的初始化。其中，debug表示是否开启调试模式，appId、timestamp、nonceStr、signature是签名相关的参数，jsApiList是需要使用的微信JS接口列表。

5. 在需要使用微信JS接口的地方调用相应的方法

   async chooseImage() {
     const res = await this.$http.get('/api/upload');
     wx.chooseImage({
       count: 1,
       sizeType: ['original', 'compressed'],
       sourceType: ['album', 'camera'],
       success (res) {
         const localIds = res.localIds;
         // 上传到服务器
         wx.uploadImage({
           localId: localIds[0],
           isShowProgressTips: 1,
           success: function (res) {
             const serverId = res.serverId; // 返回图片的服务器端ID
             // 将serverId发送到服务器进行保存等操作
           }
         });
       }
     });
   }

上面的代码中，我们在chooseImage的成功回调函数中，获取到了选择的图片的本地ID，然后使用wx.uploadImage方法将图片上传到服务器。在上传成功的回调函数中，我们可以获取到图片的serverId，然后将serverId发送到服务器进行保存等操作。

以上就是在Vue3 + TypeScript项目中使用weixin-js-sdk的步骤。需要注意的是，我们需要从后端获取签名等参数才能进行JS-SDK的初始化，因此需要与后端进行配合。