uniapp快速分享知识点，请求简单封装 登陆 ，支付 ， 分享 ， 短信，

第一部份requrety请求封装 

备注：关于环境配置 ui选择 插件安装在我的另一个帐号中前几天也经写了，这个博客就不用在写一遍了

另一博客地址：https://www.cnblogs.com/ZzwWan/p/18202502

module.exports = (vm) => {
  // 初始化请求配置
  uni.$u.http.setConfig((config) => {
    // config 为默认全局配置
    // config.baseURL = 'http://uat.banlu.xuexiluxian.cn'; // 根域名

// 设置跨域请求相关配置  以下如果不跨域可以不配以下二行，也可以在main.js 页去配置
    config.withCredentials = true; // 允许携带凭证（如 cookies）
    config.headers['Access-Control-Allow-Origin'] = '*'; // 允许任何域名访问


    return config;
  });

  // 请求拦截器
  uni.$u.http.interceptors.request.use(
    async (config) => {
      // 可以使用 async/await 进行异步操作
      return config;
    },
    (config) => {
      // 可以使用 async/await 进行异步操作
      return Promise.reject(config);
    }
  );

  // 响应拦截器
  uni.$u.http.interceptors.response.use(
    async (response) => {
      // 对响应成功做点什么，可以使用 async/await
      const data = response.data;
      return data;
    },
    (response) => {
      // 对响应错误做点什么（statusCode 1 == 200）
      return Promise.reject(response);
    }
  );
};

　　上面封装好以后就可以在main.js配置一下 

import Vue from 'vue';
import App from './App.vue';
import uHttp from 'uni-http';

Vue.config.productionTip = false;

// 初始化 uni.$u.http
Vue.prototype.$u.http = uHttp.create({
  baseURL: 'https://example.com', // 设置根域名
  withCredentials: true, // 允许携带凭证（如 cookies）
  headers: {
    'Access-Control-Allow-Origin': '*', // 允许任何域名访问
  },
});

new Vue({
  render: (h) => h(App),
}).$mount('#app');

　最后可以在页面中调用，

  <view>
   <button @click="fetchData">获取数据</button>
  </view>
</template><script>
export default {
  methods: {
    async fetchData() {
      try {
        const response = await this.$u.http.get('/api/data');
        console.log('获取到的数据：', response.data);
      } catch (error) {
        console.error('请求失败：', error);
      }
    },
  },
};
</script>

附彷vue3 语法  封装请求：

//封装vue3请求，非uniapp   // http.js
import { ref } from 'vue';

const baseUrl = 'https://your-api-endpoint.com'; // 你的API基础URL

// 请求拦截器
const requestInterceptor = (config) => {
  // 在发送请求之前做些什么
  const token = uni.getStorageSync('token'); // 假设token存储在本地
  if (token) {
    config.header.Authorization = `Bearer ${token}`; // 如果有token，则添加到请求头
  }
  return config;
};

// 响应拦截器
const responseInterceptor = (response) => {
  // 对响应数据做点什么
  if (response.statusCode >= 200 && response.statusCode < 300) {
    return response.data;
  } else {
    // 如果状态码不在 2xx 范围内，统一处理错误
    uni.showToast({
      title: response.data.message || '请求失败',
      icon: 'none'
    });
    return Promise.reject(response);
  }
};

// 创建请求方法
const http = (options) => {
  const { url, data, method = 'GET', header = {} } = options;
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseUrl + url,
      data,
      method,
      header,
      success(res) {
        resolve(responseInterceptor(res));
      },
      fail(err) {
        reject(err);
      }
    });
  });
};

// 导出HTTP实例
export default http;

实用示例，非uniapp 请可以忽略，这是传统vue3

// SomeComponent.vue<template>
  <!-- 组件模板 -->
</template><script setup>
import { ref } from 'vue';
import http from './http'; // 引入封装好的HTTP方法

const fetchData = async () => {
  try {
    const response = await http({
      url: '/some-endpoint',
      method: 'GET'
    });
    console.log(response);
  } catch (error) {
    console.error('请求失败:', error);
  }
};

fetchData(); // 在组件加载时获取数据
</script>

　登陆示例：

先调取加载用户的系统自带方法，获取用户信息，然后调用微信登陆拿到code  这个时候微信登陆了，但是还没有登我们的系统，我们再将前二步获取的信息在我们的服务器陆就好

整体流程代码为：

wxLogin() {
  // 调用uni.getUserInfo方法获取用户信息
  uni.getUserInfo({
    desc: '登录的数据', // 描述信息
    success(ures) { // 获取用户信息成功后的回调函数
      console.log(ures, '返回的用户信息'); // 打印用户信息

      // 调用uni.login方法进行微信登录
      uni.login({
        success(lres) { // 登录成功后的回调函数
          console.log(lres, '请求微信登录返回的数据'); // 打印登录返回的数据

          // 创建一个参数对象，包含code字段
          let params = {
            code: lres.code
          };

          // 调用loginByWechat方法进行微信一键登录
          methods: {
            loginByWechat(params).then(res => {
              console.log(res, '微信一键登录返回的数据'); // 打印一键登录返回的数据
            })
          }
        }
      });
    }
  });
}

　　登陆我们自己的服务器方法要自己写，以下只是参考：实际逻辑可以判 断用户openid 存不存在，或我们的系统id ，做依据，这个随意，

uni.login({
  provider: 'weixin',
  success: function (res) {
    console.log('登录成功，code：' + res.code);
    // 调用自定义函数，使用 code 码换取用户信息
    loginByWechat({ code: res.code }).then(res => {
      console.log(res, '微信一键登录返回的数据');
    });
  },
  fail: function (err) {
    console.log('登录失败：' + JSON.stringify(err));
  }
});

function loginByWechat(params) {
  return new Promise((resolve, reject) => {
    // 调用你自己的后端接口，使用 code 码换取用户信息
    wx.request({
      url: 'https://your_server_url/loginByWechat', // 你自己的后端接口地址
      data: params,
      success: function (res) {
        console.log('获取用户信息成功：' + JSON.stringify(res));
        resolve(res);
      },
      fail: function (err) {
        console.log('获取用户信息失败：' + JSON.stringify(err));
        reject(err);
      }
    });
  });
}