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;

View Code

实用示例，非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>

View Code

　登陆示例：

先调取加载用户的系统自带方法，获取用户信息，然后调用微信登陆拿到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);
      }
    });
  });
}

在uniapp开发中，如果用户没有在您的服务器上注册，您可以通过微信登录流程来获取用户信息，并在服务器上进行注册。以下是一个简化的流程，用于说明如何使用微信登录并注册用户：

用户点击微信登录：用户在您的应用中选择使用微信登录。
获取微信授权码：您的应用调用微信登录API，获取授权码（code）。
请求服务器：将获取到的授权码发送到您的服务器。
服务器获取用户信息：服务器使用授权码向微信服务器请求用户信息，包括unionId、openid等。
服务器判断用户是否已注册：
- 如果用户已注册，服务器返回用户信息，客户端可以直接登录。
- 如果用户未注册，服务器生成一个注册所需的数据包，包括签名、原始数据等。
客户端注册：客户端使用服务器返回的数据包，调用您的注册接口进行注册。

以下是一段可能的代码示例，用于说明上述流程：

// 假设这是您的微信登录函数
function loginByWechat() {
  // 调用微信登录API，获取code
  // 这里需要您根据微信官方文档进行实现
}

// 微信登录成功后的回调
loginByWechat().then(res => {
  console.log(res, '微信一键登录返回的数据');
  
  // 判断用户是否已注册
  if (res.code === '60003') {
    // 用户未注册，准备注册数据
    const registerData = {
      unionId: res.data.unionId || res.data.openid, // 根据实际返回的数据结构调整
      sessionKey: res.data.sessionKey,
      signature: res.signature,
      rawData: res.rawData,
      encryptedData: res.encryptedData,
      iv: res.iv
    };
    
    // 调用注册接口
    register(registerData).then(registerRes => {
      // 注册成功后的处理
    }).catch(err => {
      // 注册失败的处理
    });
  }
});

// 注册函数
function register(data) {
  // 发送注册请求到服务器
  // 这里需要您根据实际的服务器API进行实现
}

　　总结：

methods:{
        wxLogin(){
            uni.getUserInfo({       uniapp  自带方法获取用户信息
                desc:'登陆数据',
                success(ures){
                    console.log(ures,"这是我获取的信息")
                    uni.login({            uniapp 自带方法获取这个用户的code
                        success(lres){
                            console.log(lres,"dddddddddddddddddddddddd")
                            let params = {
                                code: lres.code
                            }
                            loginByWechat(params).then(res => {  这些就是自己服务器的逻辑可以乱写了
                                console.log(res,"微信一健登陆")
                            })
                            
                        }
                    })
                }

登陆成功，会返回一个token 保存到本地就好。以下只是假代码，理解思路用。

function handleLoginResponse(data) {
  // 检查返回的 code 是否为 200
  if (data.code === 200) {
    // 保存用户 token
    uni.setStorageSync('token', data.token);

    // 判断用户是否绑定了手机号
    if (!data.member.mobile) {
      // 如果没有绑定手机号，跳转到绑定手机号的页面
      this.xxx();
    } else {
      // 如果已绑定手机号，跳转到我的页面
      uni.switchTab({
        url: '/pages/tabs/me'
      });
    }
  } else {
    // 如果返回的 code 不是 200，可以在这里处理错误情况
    console.error('登录失败，错误代码：', data.code);
  }
}

　　弹窗 uni.showModal(OBJECT)

发送短信，是由后端完成的，我们只要发手机号和类型，以下是参数示例，

发送手机短信功能，通常需要使用第三方短信服务提供商，如阿里云、腾讯云等。以下是一个使用阿里云短信服务实现发送手机短信的示例：

首先，您需要在阿里云官网注册一个账号，并创建一个短信签名和短信模板。具体操作步骤请参考阿里云短信服务官方文档：https://help.aliyun.com/document_detail/101414.html
安装阿里云 SDK：在 uni-app 项目的根目录下运行以下命令安装阿里云 SDK：

const SMSClient = require('@alicloud/sms-sdk');

// 替换为您的阿里云 AccessKey ID 和 AccessKey Secret
const accessKeyId = 'your_access_key_id';
const accessSecret = 'your_access_secret';

// 替换为您的短信签名和短信模板
const signName = 'your_sign_name';
const templateCode = 'your_template_code';

const smsClient = new SMSClient({ accessKeyId, accessSecret });

exports.main = async (event, context) => {
  const { phoneNumber, code } = event;

  try {
    const result = await smsClient.sendSMS({
      PhoneNumbers: phoneNumber,
      SignName: signName,
      TemplateCode: templateCode,
      TemplateParam: JSON.stringify({ code }),
    });

    return {
      success: true,
      message: '短信发送成功',
      data: result,
    };
  } catch (error) {
    return {
      success: false,
      message: '短信发送失败',
      error,
    };
  }
};

　　前端处理的部份就是一个表单获取发送手机而己，我这儿附了一参考代码，主要是练习熟悉别人的语法，技术点几乎没有，下面有一个方叫叫

Encrypt 是一个加密的方法，我们可以自己写或用啥 啥 内库存工具，

methods: {
  // 获取验证码
  sendCode() {
    // MODIFY MOBILE
    let key = 'MODIFY MOBILE';
    sendMessage({
      mobile: Encrypt(this.phone), // ES21SE2S1E21S2E10
      key: key
    }).then(res => {
      console.log('短信是否发送成功?', res);
    }).catch(error => {
      console.error('发送验证码失败', error);
    });
  },
  // 绑定手机号
  bindTap() {
    updateMobile({
      mobile: Encrypt(this.phone),
      captcha: this.code
    }).then(res => {
      console.log(res, '绑定手机号?');
    }).catch(error => {
      console.error('绑定手机号失败', error);
    });
  }
}

　　关于加密参考：

const CryptoJS = require('crypto-js');

// 加密
const encrypted = CryptoJS.AES.encrypt('Hello, World!', 'Secret Passphrase').toString();
console.log('加密后的文本:', encrypted);

// 解密
const decrypted = CryptoJS.AES.decrypt(encrypted, 'Secret Passphrase');
const decryptedText = decrypted.toString(CryptoJS.enc.Utf8);
console.log('解密后的文本:', decryptedText);

　　如保储存数据，这儿有好多种方法比如大波罗和vuex 当然这只能是数据状态如果还想有持久化vuex 也一个插件可以解决，以下是vuex 的使用方法

持久化储全局中，uniapp 中不能使用localStorage、sessionStorage 需要使用uniapp自带的本地储存。

在 UniApp 中，虽然你可以使用 localStorage 和 sessionStorage，但是这些 Web API 在非 H5 平台上可能并不可用或者表现不一致。

因此，为了确保跨平台的一致性和兼容性，UniApp 提供了自己的本地存储 API，即 uni.setStorage、uni.getStorage、uni.removeStorage 和 uni.clearStorage 等方法。

对于持久化的话还需要借助其它插件

第一步安装 npm install vuex-persistedstate

第二步： store.js 文件中，引入 vuex-persistedstate 并将其添加到 Vuex 存储中：

import { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate';

export default createStore({
  // ...您的 Vuex 配置
  plugins: [
    createPersistedState({
      storage: {
        getItem: (key) => {
          const value = uni.getStorageSync(key);
          return value === '' ? null : value;
        },
        setItem: (key, value) => {
          uni.setStorageSync(key, value);
        },
        removeItem: (key) => {
          uni.removeStorageSync(key);
        }
      },
      key: 'store',
      reducer(state) {
        // 只存储 state 中的某些数据
        return { ...state };
      }
    })
  ]
});

　　以下是小路线的视频荼抓图参考：

附：   新语法：

在 JavaScript 中，如果您想要根据 store?.state?.user?.token 是否存在来动态设置 config.header，您可以使用以下代码：


let config = {
  // ...其他配置项
  headers: {
    'Content-Type': 'application/json',
  },
};

if (store?.state?.user?.token) {
  config.headers.Authorization = store.state.user.token;
}



第三步，就可以使用了，其它的用方就和传统的vuex 一样使用了

如果需要更多的分享功能，可以考虑使用原生插件来实现。例如在微信小程序中，可以使用微信官方提供的wx.shareAppMessage和wx.onShareTimeline方法来实现分享功能。在App端，可以使用plus.share模块来实现分享功能。

需要注意的是，使用原生插件时需要在manifest.json文件中配置相应的权限和功能。

最后微信支付

微信支付流程是这样的，代码我就不写了，用户提交订单，后端先将这个定单保存在数据库，然后向微信发起支付统一下单请求，微信返回的数据后端处理过后发给前端，发给

前端的参数包括用于支付的key openid 啥的，用户将这些参数发起支付请求就可以完成支付，在支付成功后回调中可以增加自己的其它逻辑，

支付请求通常是由前端发起的。在前端，用户通过点击支付按钮等方式触发支付操作，前端应用程序随后向后端发送请求以获取支付参数（如订单信息、支付金额等）。后端服务器根据这些参数生成支付请求，并将支付参数返回给前端。最后，前端使用这些支付参数调用支付平台（如微信支付、支付宝等）的API发起支付请求。

以下是一个简化的流程图，描述了支付请求的发起过程：

用户在前端界面点击支付按钮。
前端应用程序向后端发送请求，携带订单信息、支付金额等参数。
后端服务器根据请求参数生成支付请求，并返回支付参数给前端。
前端使用返回的支付参数调用支付平台的API发起支付请求。
支付平台处理支付请求，并向用户展示支付界面。
用户完成支付操作。
支付平台将支付结果通知给后端服务器。
后端服务器更新订单状态，并将支付结果返回给前端。
前端根据支付结果更新界面并通知用户。

在这个过程中，前端主要负责与用户交互和发起支付请求，而后端则负责处理业务逻辑、生成支付参数以及与支付平台进行交互。这种前后端分离的设计有助于提高系统的可维护性和可扩展性。

后端示例：

const express = require('express');
const app = express();
const wxpay = require('wechat-pay').middleware;

// 初始化微信支付配置
const config = {
  appId: 'wx1234567890', // 微信公众号/小程序的唯一标识
  mchId: '1234567890', // 微信支付商户号
  apiKey: 'your_api_key', // 微信支付API密钥
  pfx: fs.readFileSync('path/to/your/apiclient_cert.pem'), // 微信支付商户证书
};

app.use(wxpay(config).callback);

app.post('/api/pay', async (req, res) => {
  // 假设从前端获取订单信息
  const orderInfo = req.body;

  // 计算支付金额（以分为单位）
  const totalFee = parseInt(orderInfo.amount * 100);

  // 生成预支付订单
  const result = await wxpay(config).unifiedOrder({
    out_trade_no: orderInfo.orderId, // 商户订单号
    body: orderInfo.description, // 商品描述
    total_fee: totalFee, // 支付金额（以分为单位）
    openid: orderInfo.openid, // 用户唯一标识（仅限微信公众号支付）
    trade_type: 'JSAPI', // 交易类型（仅限微信小程序支付）
  });

  // 返回支付参数给前端
  res.json({
    appId: config.appId,
    timeStamp: Math.floor(Date.now() / 1000).toString(), // 时间戳
    nonceStr: result.nonce_str, // 随机字符串
    package: 'prepay_id=' + result.prepay_id, // 预支付交易会话标识
    signType: 'MD5', // 签名类型
    paySign: result.sign, // 签名
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

　前端发起请求：

methods: {
  async payment() {
    // 假设从后端获取订单信息
    const orderInfo = {
      orderId: '1234567890',
      description: '购买商品',
      amount: 100, // 支付金额（以元为单位）
      openid: 'user_openid', // 用户唯一标识（仅限微信公众号支付）
    };

    // 请求后端接口获取支付参数
    const res = await this.$http.post('/api/pay', orderInfo);
    const payParams = res.data;

    // 发起支付请求
    uni.requestPayment({
      appId: payParams.appId,
      timeStamp: payParams.timeStamp,
      nonceStr: payParams.nonceStr,
      package: payParams.package,
      signType: payParams.signType,
      paySign: payParams.paySign,
      success(e) {
        // 支付成功的处理
        console.log('支付成功', e);
      },
      fail(err) {
        // 支付失败的处理
        console.log('支付失败', err);
      }
    });
  }
}

posted @ 2024-05-25 08:38 稷下元歌阅读(751) 评论(0) 收藏举报

刷新页面返回顶部

法师-谢双元

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

公告

法师-谢双元

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

公告

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