# wb-uni-template

**Repository Path**: jefferic/wb-uni-template

## Basic Information

- **Project Name**: wb-uni-template
- **Description**: wb-uni-template
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-03-26
- **Last Updated**: 2022-12-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uni-app 项目脚手架模板

---

## 项目结构

```
wb-uni-template
├─App.vue           // 主组件，所有页面都是在App.vue下进行切换的，是页面入口文件
├─main.js           // 入口文件，初始化vue实例、定义全局组件、使用需要的插件
├─manifest.json     // 是应用的配置文件，用于指定应用的名称、图标、权限等。
├─package.json      // 项目依赖的包配置文件，在uni-app中可以自定义条件编译平台
├─pages.json        // 用来对 uni-app 进行全局配置，决定页面文件等
├─readme.md         // 项目说明文档
├─template.h5.html  // 模板文件，可以自定义
├─uni.scss          // 是为了方便整体控制应用的风格。文件里预置了一批scss变量预置。
├─vue.config.js     // 一般用于配置 webpack 等编译选项
├─uni_modules       // uni-app的插件模块的根目录
├─node_modules      // 三方依赖安装目录
├─store             // vue store 目录
├─static            // 静态资源目录，图片、字体样式等等
|   ├─iconfont.css  // 扩展字体文件
|   ├─tabbar        // 底部导航栏的图片文件夹
|   ├─img           // 项目的图片目录
|   ├─demo          // Demo演示的图片目录
|   ├─com           // 组件的图片目录
|   |  ├─update     // app更新组件的图片目录
|   |  ├─pading     // z-pading组件的图片目录
|   |  ├─empty      // 为空组件的图片目录
├─pages             // 页面根目录
|   ├─index         // 首页
|   ├─components    // 组件目录，给特殊组件用的，比如 jj-messagebox
|   ├─demo          // 演示项目的路径
├─locales           // 多语言目录
├─components        // 项目中的组件目录
├─common            // 通用的JS、辅助工具
├─api               // api设置
```

[全局文件-详细文档](https://uniapp.dcloud.net.cn/collocation/pages.html)

## UI 库

> 官方的扩展组件

- [uni-ui 文档](https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html)
- [uni-ui 演示](https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge)

> 第三方UI库

- [uView 1.8.6 文档](https://v1.uviewui.com/components/intro.html)
- [uView 演示](https://h5.uviewui.com/)
- [cool-uni 1.8.20 文档](https://docs.cool-js.com/uni/)
- [cool-uni 演示](https://uni-demo.cool-js.com/?r=0.19085292576901525/)

> 本项目扩展的UI库

- wb-ui 示例都在本项目中 `uni_modules\wb-uni`

## 特殊 UI 组件

### ***必须使用的***

#### wb-page 组件

> 页面根元素组件，每个页面必须使用 **`wb-page`**
>
> 组件的路径 `uni_modules\wb-uni\components\wb-page\wb-page.vue`

1. wb-page 组件不要使用 `class` 属性，要使用 `_class` 属性来替代，`_class`属性可以将 className 准确传递给组件内部，而不是组件的父元素，`class` 属性是传递给父组件
2. wb-page 组件的 page-style 属性，类似之前样式中的 page，是 page 节点（uni-page-body）的 style 属性

```html
template>
  <wb-page _class="u-p-20 content" page-style="background:red;" :customStyle="customStyle">随便看看</wb-page>
</template>
<script>
  export default {
    data() {
      return {
        // customStyle 与 _class 类似，只不过一个是作用到 class，一个作用到 style
        customStyle: {
          fontSize: '18px'
        }
      }
    },
    // 页面周期函数--监听页面加载
    onLoad(options) {}
  }
</script>
<style>
  /* page 与 page-style 差不多，只不过 page-style是作用于style的，优先级更高 */
  page {
    /* page-style 的优先级更高，所以 uni-page-body 节点的背景色是 red */
    background: #ffffff;
  }

  /* u-p-20 样式不用深度选择器的原因是因为，该样式是全局的样式 */
  /* content 不是全局样式，所以想在 wb-page 组件中样式生效，需要使用 ::v-deep 深度选择器 */
  ::v-deep .content {
    margin: 60rpx;
  }
</style>
```

### ***专用常用组件***

#### nav-bar 组件

顶部导航组件 [查看文档](https://ext.dcloud.net.cn/plugin?id=813)

#### jj-uni-messagebox

兼容各平台弹窗提示框(alert,loading,toast,popup,dialog)顶部导航组 [查看文档](https://ext.dcloud.net.cn/plugin?id=6644)

#### XSS 组件

> 根据白名单过滤 HTML(防止 XSS 攻击)，下面是最基本的使用示例，更详细的可以查看 [文档](https://github.com/leizongmin/js-xss/blob/master/README.zh.md)

```html
<view v-html="$xss(html)"></view>
```
#### z-paging 组件

> 一个uni-app (opens new window)分页组件。
> 全平台兼容，支持自定义下拉刷新、上拉加载更多，支持虚拟列表，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持展示最后更新时间，支持国际化等等。

[文档](https://z-paging.zxlee.cn/)
[演示](https://demo.z-paging.zxlee.cn/)


### ***UI库的扩展样式+JS***

#### uni-ui

##### 1. [内置辅助样式](https://uniapp.dcloud.net.cn/component/uniui/uni-sass.html)

#### uView1.x

##### 1. [[重要]内置样式](https://v1.uviewui.com/components/common.html)

##### 2. [内置 JS](https://v1.uviewui.com/js/intro.html)

#### wb-ui 的扩展样式

> 在 uview-ui 的基础上，扩展了样式

1. 布局样式 `.u-flex-col`、`.u-full`
2. 边框杨样式 `.wb-b`、`.wb-b-b`、`.wb-l`、`.wb-b-r`、`.wb-b-t`、`.wb-tb`、`.wb-b-no`，边框颜色 `$wb-bc-base`
3. 阴影样式 `.wb-shadow-box`、`.wb-shadow`