【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",
       }
   })

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值