Uni-app 是一个跨平台的应用开发框架,支持同时开发小程序、App 和 H5 等多个平台。而 Vue 3 的组合式 API 则是 Vue 3 新增的特性之一,它可以让我们更好地组织和复用组件逻辑。本文将结合 Vue 3 的组合式 API,来优化 Uni-app 中基础页面的功能实现。
1. 使用 ref 创建响应式数据
在 Vue 3 中,我们可以使用 ref
创建响应式数据。在 Uni-app 中,我们可以利用这一特性来管理页面中的状态和数据。比如,在基础页面中,我们经常需要管理页面数据、加载状态、分页信息等。我们可以这样来使用:
javascript
import { ref } from 'vue';
export default function usePage() {
const pageData = ref({});
const status = ref('more');
const totalPage = ref(0);
const total = ref(0);
// 其他逻辑...
return { pageData, status, totalPage, total };
}
2. 使用组合式 API 分离逻辑
将页面逻辑按功能拆分成不同的组合函数,可以使代码更加清晰和可维护。比如,我们可以将页面初始化逻辑、数据请求逻辑、加载更多数据逻辑等分别放在不同的函数中,然后在页面中组合使用。
javascript
const initData = async () => {
searchObject.value.no = 1
await getData();
uni.stopPullDownRefresh();
};
onPullDownRefresh(async () => {
await initData();
})
const checkMore = (res) => {
totalPage.value = res.totalPage;
total.value = res.total;
if (searchObject.value.no <= res.totalPage) {
status.value = "loading";
} else {
status.value = "noMore";
}
}
const getData = async () => {
let res = await post(functionMethod, searchObject.value);
if (res.code !== 200) {
uni.showModal({
content: res.msg,
showCancel: false
})
return;
}
pageData.value = res.data;
pageData1.value = JSON.parse(JSON.stringify(pageData.value))
checkMore(res)
if(functionMethod === '/saleOrder/search') {
pageData.value.forEach((e) => {
e.checked = false
})
}
};
const loadMore=async () => {
searchObject.value.no = searchObject.value.no + 1;
let res = await post(functionMethod, searchObject.value);
if (res.code !== 200) {
uni.showModal({
content: res.msg,
showCancel: false
})
return;
}
if (res.data) {
pageData.value = pageData.value.concat(res.data);
}
checkMore(res)
}
3. 页面生命周期的处理
在 Uni-app 中,页面的生命周期函数可以通过 onShow
、onLoad
等方式进行处理。我们可以在组合函数中使用这些生命周期函数,并结合上面的逻辑函数进行调用。
javascript
onPullDownRefresh(async () => {
await initData();
})
onReachBottom(async () => {
await loadMore();
});
onShow(async () => {
await getData()
})
4.完整代码
javascript
import {ref} from "vue";
import {post} from "/common/api.js"
import {
onShow,
onPullDownRefresh,
onReachBottom
} from "@dcloudio/uni-app";
export function usePage(functionMethod, searchObject) {
//集合
let pageData = ref({})
let pageData1 = ref({})
//加载的状态
const status = ref("more")
//总页数
const totalPage = ref(0)
//总条数
const total = ref(0)
const initData = async () => {
searchObject.value.no = 1
await getData();
uni.stopPullDownRefresh();
};
const checkMore = (res) => {
totalPage.value = res.totalPage;
total.value = res.total;
if (searchObject.value.no <= res.totalPage) {
status.value = "loading";
} else {
status.value = "noMore";
}
}
const getData = async () => {
let res = await post(functionMethod, searchObject.value);
if (res.code !== 200) {
uni.showModal({
content: res.msg,
showCancel: false
})
return;
}
pageData.value = res.data;
pageData1.value = JSON.parse(JSON.stringify(pageData.value))
checkMore(res)
if(functionMethod === '/saleOrder/search') {
pageData.value.forEach((e) => {
e.checked = false
})
}
};
const loadMore=async () => {
searchObject.value.no = searchObject.value.no + 1;
let res = await post(functionMethod, searchObject.value);
if (res.code !== 200) {
uni.showModal({
content: res.msg,
showCancel: false
})
return;
}
if (res.data) {
pageData.value = pageData.value.concat(res.data);
}
checkMore(res)
}
onPullDownRefresh(async () => {
await initData();
})
onReachBottom(async () => {
await loadMore();
});
onShow(async () => {
await getData()
})
return {pageData,pageData1, status, totalPage, initData, total,loadMore}
}
5.代码使用
javascript
const {
pageData,
status,
totalPage,
total,
initData
} = usePage("/saleOrderSummary/topByShop", searchObject);
通过以上的优化,我们可以更好地利用 Vue 3 的组合式 API 来优化 Uni-app 中基础页面的功能实现,使代码更加清晰、易读和可维护。