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);
}
});
});
}
在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);
}
});
}
}
