【applet】封装uni-app路由

最近在自写一套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",
       }
   })

是不是很简单，
创作不易，之后将奉献更多内容，给个关注可好～