uniapp及微信小程序封装全局网络请求，弹框和hint提示

**UniApp 和 微信小程序 封装全局网络请求、弹框和 hint 提示**

在开发 UniApp 或 微信小程序 应用时，我们经常会遇到重复的网络请求逻辑和提示信息展示。为了提高开发效率和代码可维护性，我们可以封装一个全局的网络请求库，并且为弹框和 hint 提示提供统一的接口。

**1. 封装全局网络请求库**

首先，我们需要创建一个全局的网络请求库，负责处理所有的网络请求逻辑。我们使用 Vue.js 的 Axios 库来实现这个功能。

javascript// network/request.jsimport axios from 'axios';

const request = axios.create({
 baseURL: ' // API 地址 timeout:10000, // 超时时间（10 秒）
});

export default request;

**2. 封装弹框组件**

接下来，我们需要创建一个弹框组件，负责展示提示信息。我们使用 Vue.js 的 Dialog 组件来实现这个功能。

javascript// components/dialog.vue<template>
 <view class="dialog">
 <view class="content">{{ message }}</view>
 <view class="button-group">
 <button @click="confirm">确认</button>
 <button @click="cancel">取消</button>
 </view>
 </view>
</template>

<script>
export default {
 props: {
 message: String,
 },
 methods: {
 confirm() {
 this.$emit('confirm');
 },
 cancel() {
 this.$emit('cancel');
 },
 },
};
</script>

<style scoped>
.dialog {
 position: fixed;
 top:50%;
 left:50%;
 transform: translate(-50%, -50%);
 width:80vw;
 height:60vh;
 background-color: #fff;
 border-radius:10px;
 padding:20px;
}

.content {
 font-size:16px;
 color: #333;
 text-align: center;
}

.button-group {
 display: flex;
 justify-content: space-between;
 margin-top:20px;
}

button {
 width:40%;
 height:30px;
 background-color: #4cd964;
 color: #fff;
 border-radius:10px;
}
</style>

**3. 封装 hint 提示组件**

最后，我们需要创建一个 hint 提示组件，负责展示提示信息。我们使用 Vue.js 的 Toast 组件来实现这个功能。

javascript// components/hint.vue<template>
 <view class="hint">
 {{ message }}
 </view>
</template>

<script>
export default {
 props: {
 message: String,
 },
};
</script>

<style scoped>
.hint {
 position: fixed;
 top:50%;
 left:50%;
 transform: translate(-50%, -50%);
 width:80vw;
 height:30vh;
 background-color: #fff;
 border-radius:10px;
 padding:20px;
 font-size:16px;
 color: #333;
}
</style>

**4. 封装全局网络请求函数**

现在，我们需要封装一个全局的网络请求函数，负责处理所有的网络请求逻辑。我们使用 Axios 库来实现这个功能。

javascript// network/request.jsimport axios from 'axios';

const request = axios.create({
 baseURL: ' // API 地址 timeout:10000, // 超时时间（10 秒）
});

export default function requestApi(url, method = 'GET', data = {}) {
 return new Promise((resolve, reject) => {
 request({
 url,
 method,
 data,
 })
 .then((response) => {
 resolve(response.data);
 })
 .catch((error) => {
 reject(error);
 });
 });
}

**5. 使用全局网络请求函数**

现在，我们可以使用全局网络请求函数来发送网络请求。

javascript// pages/index.jsimport request from '../network/request';

Page({
 data: {},
 onLoad() {
 requestApi('/api/example', 'GET')
 .then((data) => {
 console.log(data);
 })
 .catch((error) => {
 console.error(error);
 });
 },
});

**6. 使用弹框组件**

现在，我们可以使用弹框组件来展示提示信息。

javascript// pages/index.jsimport Dialog from '../components/dialog';

Page({
 data: {},
 onLoad() {
 Dialog({
 message: '这是一个提示信息',
 confirm() {
 console.log('确认');
 },
 cancel() {
 console.log('取消');
 },
 });
 },
});

**7. 使用 hint 提示组件**

现在，我们可以使用 hint 提示组件来展示提示信息。

javascript// pages/index.jsimport Hint from '../components/hint';

Page({
 data: {},
 onLoad() {
 Hint({
 message: '这是一个提示信息',
 });
 },
});

通过以上步骤，我们已经完成了对 UniApp 和 微信小程序 的全局网络请求、弹框和 hint 提示的封装。