最近在自写一套mpaas平台,在原生部分调研了taro、rn、ionic、uni-app和flutter,
最后虽然因为看不到ios、android源码没用uni-app,
但是还是将uni的路由稍微封装了一下,这里放出来,因为害怕一些兼容问题,所以当初没有考虑使用三方框架,所以在uni原有的基础上封装了下
这里uni-app的使用基于vue3+vite
/**
* 因为uni对vue3的支持一般
* 为了不出现兼容性问题
* 我们不使用三方工具,直接在uni原本的接口上封装东西
* 以便后期使用
*/
//直接通过import拿到json数据
import { readonly} from 'vue'
import data from "@/pages.json"
const pages = data.pages || [];
const routeStore = {}
function getRouteParams(
page
){
const path = getPath(page);
if(path.length === 0) return;
const p = routeStore[path];
return readonly(p)
}
//get path by key
const getPath = (page)=>{
const arr = pages.filter(item=>{
return item?.name === page || item?.path == page;
})
if(arr.length > 0)return arr[0]?.path || "";
if(arr.length == 0) return "";
}
// let navigateLock = false;
function push(
page,
params = {}
){
// if (navigateLock) return
//navigateLock = true
const eventName = Math.floor(Math.random() * 1000) + new Date().getTime() + ""// 生成唯一事件名
//routeStore就是用来存参数的
const path = getPath(page);
if(path.length === 0) return;
routeStore[path] = params;
routeStore[path].eventName = eventName;
uni.navigateTo({
url: `/${path}`,
complete() {
// navigateLock = false
},
})
return new Promise(
(resolve, reject) => (
uni.$once(eventName, resolve), uni.$once(eventName, reject)
),
)
}
function back({ delta, data } = { delta: 1, data: null }) {
const currentRoute = getCurrentPages().pop()
const path = currentRoute.route;
//获取eventName
const eventName = routeStore[path]?.eventName;
if(eventName) {
uni.$emit(eventName, data);
}
//删除多余条目,防止最后内存溢出
delete routeStore[path];
uni.navigateBack({
delta,
});
}
function redirect(page, params) {
const path = getPath(page);
if(path.length === 0) return;
routeStore[path] = params
uni.redirectTo({ url: "/"+path })
}
function reLaunch(page, params) {
const path = getPath(page);
if(path.length === 0) return;
uni.reLaunch({ url: "/" + path})
}
function switchTab(page, params) {
const path = getPath(page);
if(path.length === 0) return;
routeStore[path] = params
uni.switchTab({ url: "/" +path})
}
const router = {
push,
back,
redirect,
reLaunch,
switchTab,
getRouteParams
}
export default router
使用也比较简单
首先路由还是正常在page.json中写,尽量不改变原生的东西
{
"pages": [
{
"name": "home",
"path": "pages/home/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"name": "about",
"path": "pages/about/index",
"style":{
"navigationBarTitleText": "关于"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
然后是跳转传值:
router.push("about",{id:"123"}).then(data=>{
//拿到回调数据
console.log("cb data",data);
})
以及返回带值
router.back({
data: {
msg:"test",
}
})
是不是很简单,
创作不易,之后将奉献更多内容,给个关注可好~