uniapp 三端(小程序、H5、App)开发练习03

uni.addInterceptor是uni-app官网提供的拦截器， 是用于拦截 uni 的api的方法，一般用于给api添加全局的属性，或者全局处理事件。可以利用它来实现登录拦截器，用户在没有登录时是无法进行其他操作的。拦截器的适用场景非常多，比如路由拦截，权限引导等；

路由拦截

• routes.ts

/*
 * @Author: vhen
 * @Date: 2024-07-27 06:26:06
 * @LastEditTime: 2024-07-27 22:23:42
 * @Description: 现在的努力是为了小时候吹过的牛逼！
 * @FilePath: \fs-uniapp\src\router\routes.ts
 */

import { pages, subPackages } from '@/pages.json'

/**
 * 获取/pages.json数据
 * @param key 标识
 * @returns
 */
export const getAllPages = (key = 'needLogin') => {
  // 处理主包
  const mainPages = pages
    .filter((page: any) => !key || page[key])
    .map((page) => ({
      ...page,
      path: `/${page.path}`,
    }))

  // 分包处理
  let subPages: any[] = []
  if (subPackages.length) {
    // 处理分包
    subPages = subPackages
      .map((subPackage: any) => {
        return subPackage.pages.map((page: any) => ({
          ...page,
          path: `/${subPackage.root}/${page.path}`,
        }))
      })
      .flat()
      .filter((page: any) => !key || page[key])
  }

  return [...mainPages, ...subPages]
}

• 创建登录权限守卫

/*
 * @Author: vhen
 * @Date: 2024-07-27 20:14:29
 * @LastEditTime: 2024-07-28 00:13:45
 * @Description: 现在的努力是为了小时候吹过的牛逼！
 * @FilePath: \fs-uniapp\src\router\guards\login.ts
 *
 */

import { getAllPages } from '../routes'

export const needLoginPages: string[] = getAllPages('needLogin').map((page: any) => page.path)
/**
 * 创建登录守卫
 * @param url 登录后跳转的url
 * @returns
 */
export const CreateLoginGuard = (url: string) => {
  // const loginRoute = '/pages/login/index'
  const path = url.split('?')[0]
  if (needLoginPages.includes(path)) {
    // 登录校验
    return true
  }

  // const redirectRoute = `${loginRoute}?redirect=${encodeURIComponent(url)}`
  // uni.navigateTo({ url: redirectRoute })

  return true
}

• 路由拦截

import { CreateLoginGuard } from './guards/login'
/**
 * 路由拦截器
 */
const routeInterceptor = {
  invoke({ url }: { url: string }) {
    // 登录守卫
    CreateLoginGuard(url)
  },
}

export default {
  install() {
    uni.addInterceptor('navigateTo', routeInterceptor)
    uni.addInterceptor('reLaunch', routeInterceptor)
    uni.addInterceptor('redirectTo', routeInterceptor)
  },
}

• main.ts入口注入

import { createSSRApp } from 'vue'
import App from './App.vue'
import router from './router'
export function createApp() {
  const app = createSSRApp(App)
  app.use(router)
  return {
    app,
  }
}

uview-plus

uview-plus，是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序，其它小程序平台的兼容可能存在一些问题，后续会针对这方面持续优化

• 安装依赖

npm install uview-plus

• 引入uview-plus组件库

import uviewPlus from 'uview-plus'
import 'uview-plus/index.scss'
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app,
  }
}

• uni.scss中引入主题

@import 'uview-plus/theme.scss';

项目地址

fs-uniapp