uniapp，vue3，ts，接口封装、小程序登录

在uniapp中使用Vue3和TypeScript进行小程序登录接口的封装，可以通过以下步骤实现：

1. 定义登录接口的TypeScript接口。
2. 封装登录请求函数，使用uni.request进行网络请求。
3. 在Vue组件中调用封装好的登录请求函数。

以下是具体实现的示例代码：

// api.ts
interface LoginParams {
  username: string;
  password: string;
}
 
interface LoginResponse {
  // 假设登录成功后服务器返回的数据格式
  token: string;
}
 
function login(params: LoginParams): Promise<LoginResponse> {
  return new Promise((resolve, reject) => {
    uni.request({
      url: 'https://your-api-domain.com/login', // 你的登录接口URL
      method: 'POST',
      data: params,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error('登录失败'));
        }
      },
      fail: (error) => {
        reject(error);
      }
    });
  });
}
 
export { login };

// YourComponent.vue
<template>
  <view>
    <button @click="login">登录</button>
  </view>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import { login } from './api';
 
export default defineComponent({
  setup() {
    const loginAction = async () => {
      try {
        const loginParams = {
          username: 'your-username',
          password: 'your-password'
        };
        const loginResult = await login(loginParams);
        // 处理登录成功的结果，例如保存token
        uni.setStorage({
          key: 'userToken',
          data: loginResult.token
        });
      } catch (error) {
        // 处理登录失败的情况
        console.error('登录失败:', error);
      }
    };
 
    return {
      login: loginAction
    };
  }
});
</script>

在这个例子中，我们定义了login函数来封装登录请求。在Vue组件中，我们通过点击事件调用该函数，并在成功获取数据后保存token到本地存储。这样就实现了登录接口的封装和在小程序中的使用。