# uni_book_shop

**Repository Path**: dodocs/uni_book_shop

## Basic Information

- **Project Name**: uni_book_shop
- **Description**: 学习uni-app的图书商城
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-10-08
- **Last Updated**: 2022-03-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一、目录结构

pages 页面存放目录

static 静态文件资源目录

App.vue 应用入口文件，和小程序app.js类似

main。js 应用入口文件，注册Vue等

manifest.json 项目配置

pages.jsn 页面配置

uni.scss 全局样式

common 目录，存放公共文件

components 自定义组件

storer vuex目录

unpackage 编译后文件存放目录

# 二、模板语法

v-bind 组件属性，使用data中定义的数据变量，或者组属性要使用表达式，使用v-bind指定。可以简写为：“：”

v-on 绑定事件。可以简写为：“@”

# 三、数据绑定

        <script>
            export default{
                // 初始化数据
                // 不推荐，数据不会发生变化
                // data:{
                //}
            data(){
                return {
                    msg:'Hello'
                }
            },
            onLoad(){
            },
            methods:{
                show(){
                    console.log('点击了按钮')；
                }
            }
        }
    </script>

v-mode 双向数据绑定


# 四、条件判断

    v-if 条件判断，决定某个内容或者区块是否(挂载)

    v-else-if

    v-else

    v-show 条件判断，是否显示

    <block> 空标签

# 五、列表渲染

    v-for 列表渲染

# 六、事件绑定

    v-on 简写：@

使用.stop可以阻止事件穿透

    <view @click="c1">
        我的父级
        <view @click.stop="c2">我的子级</view>
    </view

# 七、基础组件

    <view></view>

    <text></text>

注意组件的作用、属性和事件

# 八、自定义组件

使用easycom规范（在components目录下创建组件目录，组件名同组件目录名），可以直接使用组件

父组件向子组件传递数据可以通过：props

子组件向父组件传递数据可以通过自定义事件，父组件自定义事件，子组件触发父组件自定义事件，并传递数据

子组件 可以定义插槽slot，让父组件自定义要显示的内容。

# 九、常用API

    uni.

# 十、条件编译

用特殊的注释作为标记

        #ifdef

        #!ifdef

# 十一、页面布局

        <view></view>

**只能有一个根元素**

推荐使用rpx。750宽度下，2rpx = 1px

推荐使用 flex

# 十二、生命周期

## 1、应用

    onLaunch： 应用初始化完成执行，全局只执行一次

                登录相关处理及全局变量等

    onShow： 应用显示的时候执行，或者从后台进入前台

    onHide： 应用隐藏的时候执行，或者从前台进入后台

## 2、页面

    onLoad: 页面加载的时候触发

    onReady: 页面初次渲染完成触发

    onShow: 页面显示的时候触发

    onHide: 页面隐藏的时候触发

    onUnload: 页面卸载的时候触发

## 3、组件

    beforeCreate:

    created:

    mounted:

    destroyed:

# 十三、底部tabbar配置



# 十四、实战项目文档
实战项目名称：融职商城Api
https://www.showdoc.com.cn/1207745568269674/6094279351627422
#### 请求域名

[https://api.shop.eduwork.cn/](https://api.shop.eduwork.cn/)

> 域名已开启强制HTTPS，请务必使用HTTPS，否则可能会导致部分行为，如POST， PUT请求失败

#### 用户认证

使用 JWT 认证， 需要认证的 Api， 需要添加请求头：

```
Authorization: Bearer Token
```

> Token 为认证（登录）成功之后， 服务器返回的 Token

#### 默认用户

系统提供了默认用户， 当然， 您也可以自己注册

**普通用户：**

账号：test@a.com
密码：123123

**超级管理员：**

账号：super@a.com
密码：123123

# 十五、引入uView UI
UI组件库

## 安装
使用脚手架空白工程

## 内置样式
flex布局
主题色