# Uniapp模版

**Repository Path**: liusi/uniapp-template

## Basic Information

- **Project Name**: Uniapp模版
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-15
- **Last Updated**: 2024-12-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目配置

## 项目ui

> 使用 uview-ui 实现项目ui

  - 安装依赖：
    ```bash
    npm install uview-ui
    # 或
    yarn add uview-ui
    ``` 

  - 在 main.js 中引入：
    ```js
    import uView from 'uview-ui'
    Vue.use(uView)
    ```     

## 数据持久化

>使用 vuex-persistedstate 实现 Vuex 状态持久化

  - 安装依赖：
    ```bash
    npm install vuex-persistedstate
    # 或
    yarn add vuex-persistedstate
    ```
  
  - 在 Vuex store 中配置：
    ```js
    import createPersistedState from 'vuex-persistedstate'

    export default new Vuex.Store({
      // ...
      plugins: [
        createPersistedState({
          // 存储方式：localStorage、sessionStorage、cookies
          storage: window.localStorage,
          
          // 存储的 key 的key值
          key: 'vuex_store',
          
          // 需要存储的模块
         render(state) {
                // 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
                return { ...state }
            }
        })
      ]
    })
    ```

  - 主要特性：
    - 页面刷新后数据不丢失
    - 可以选择性持久化部分状态
    - 支持 localStorage、sessionStorage 和 cookies 多种存储方式
    - 可自定义序列化和反序列化方法

  - 注意事项：
    - 建议只持久化必要的状态，避免存储过多数据
    - 敏感信息建议使用 sessionStorage 存储
    - 在移动端使用时需注意存储大小限制
    
## 路由守卫

> 使用 uni-simple-router 实现路由守卫

  - 安装依赖：
    ```bash
    npm install uni-simple-router
    # 或
    yarn add uni-simple-router
    ```
  
  - 基础配置：
    ```js
    // router/index.js
    import { RouterMount, createRouter } from 'uni-simple-router'

    const router = createRouter({
      platform: process.env.VUE_APP_PLATFORM,  // 路由平台
      routes: [...ROUTES],  // 路由表配置
      
      // 路由模式配置
      mode: 'hash',
      base: '/'
    })

    // 全局前置守卫
    router.beforeEach((to, from, next) => {
      // 获取token
      const token = uni.getStorageSync('token')
      
      // 白名单页面
      const whiteList = ['/pages/login/index', '/pages/register/index']
      
      if (token) {
        // 已登录状态
        if (to.path === '/pages/login/index') {
          next({ path: '/pages/index/index' })
        } else {
          next()
        }
      } else {
        // 未登录状态
        if (whiteList.includes(to.path)) {
          next()
        } else {
          next({ path: '/pages/login/index' })
        }
      }
    })

    // 全局后置守卫
    router.afterEach((to, from) => {
      // 路由切换后的处理
    })
    ```

  - 主要功能：
    - 路由配置与 vue-router 语法类似
    - 支持路由守卫（beforeEach、afterEach）
    - 支持路由元信息（meta）
    - 支持动态路由
    - 支持路由传参
    - 跨平台兼容（H5、App、小程序）

  - 路由跳转方式：
    ```js
    // 普通跳转
    router.push('/pages/index/index')
    
    // 带参数跳转
    router.push({
      path: '/pages/detail/index',
      query: { id: 1 }
    })
    
    // 替换当前页面
    router.replace('/pages/index/index')
    
    // 返回上一页
    router.back()
    ```

  - 注意事项：
    - 需要在 main.js 中挂载路由
    - 小程序端建议使用 query 传参
    - H5 端支持 history 和 hash 两种模式
    - 建议统一使用 router 对象进行路由操作，避免使用 uni.navigateTo 等原生方法

## 图表

> 使用 @qiun/ucharts 实现图表