# KR-UNIAPP

**Repository Path**: kr-cli/kr-uniapp

## Basic Information

- **Project Name**: KR-UNIAPP
- **Description**: uniapp 基础项目包
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-23
- **Last Updated**: 2022-03-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uni_base

> uniapp基础项目包，适用于H5、小程序端快捷开发

## 适用人群

> 了解uni框架 | 了解scss语法 | 具有vue、小程序开发经验

## 项目基本使用

1. `外包引入`：npm i（npm install）
2. `项目运行`：
	- H5端：运行 -> H5本地
	- wx端：运行 -> wx本地
	- H5端代理：运行 -> 运行到浏览器
3. `项目打包`：
    - H5端：发行 -> 自定义发行 -> H5线上
    - wx端：发行 -> 自定义发行 -> wx线上

## 外部插件

1. `crypto`：数据加密 [crypto-js](https://www.npmjs.com/package/crypto-js)
2. `uni-simple-router`：是专为 [uni-app](https://uniapp.dcloud.io/) 打造的路由器
	> 备注：新建路由文件，路由配置方案
	> 
	> Ⅰpages文件夹右键新建 -> 点击新建页面 -> 输入文件名（如 custom）系统自动生成对应文件目录且在/pages.json配置路径 -> 手动配置路由，/router/modules/custom.js，js文件内容模拟personal.js
	> 
	> Ⅱ路由跳转传参：this.$Router.push({name: "*", params: {}})
	> 
	> Ⅲ 路由参数接收：this.$Route.query

## vuex|request封装

1. `request`：面向对象封装顺序化请求
2. `vuex`： 整合localStorage和sessionStorage进行解耦式数据缓存  

## 样式使用

1. `scss`：[scss](https://www.sass.hk/) 或 [常用编写](https://kora-kr.github.io/stylus/scss/scss.html)

## 备注
1. 无用目录开发时务必删除，对应删除/pages.json与router/modules/*.js文件
	- 分包Demo(packageDemo文件)
	- 路由测试Demo(personal文件)

2. 隐私配置
	- 跨域：manifest.json 修改 target参数
	- 小程序标识：manifest.json 修改 appid

## 目录结构  

┌─components            子组件文件夹
│ └─v-components        自定义子组件
│ │ └─navigation.vue    子组件
│ └─index.js            子组件暴露方法
├─pages                 路由页面
│  ├─home
│  │  └─home.vue        首页
├─router                路由（uni-simple-router）
│ ├─modules             路由模块
│ │  └─home.js          首页路由配置
│ │  └─index.js         路由模块整合方法
│ ├─index.js            路由配置汇总
│ ├─router.config.js    路由守卫
├─static                存放应用引用静态资源（如图片、公用方法、公用样式等）的目录（详细使用查看文件注释）
├─store          		全局数据
│ ├─modules             路由模块
│ │  └─userInfo.js      vuex用户数据(区域地图)
│ ├─index.js            vuex数据整合(世界地图)
├─main.js               主入口文件
├─App.vue               页面入口文件
├─manifest.json         uniapp多端配置
└─pages.json            配置页面路由、导航条、选项卡等页面类信息