【uni-app】框架基础笔记

文章目录
MVC与MVV思想
MVC模式
MVVM模式
项目结构与文件类型
标题与样式
全局标题与页面标题 全局样式与页面样式
生命周期
尺寸单位
数据绑定与事件(重要)
数据绑定
事件处理器
条件判断与for循环
多端兼容条件编译
MVC与MVV思想
MVC模式
1.M:model-模型层，数据的增删改查
2.V:view-视图层，前端页面（html/javascript/css）
3.C:controller-控制层，处理业务

图解:
View是我们的视图层, 也就是呈现的页面,页面中的事件触发之后, 要到达我们的后端, 后端会在我们配置的路由里接受到用户的请求, 具体是到达路由后，通过request进行请求的映射,映射到我们的控制器中,然后控制器负责进行请求相应的处理。

路由不会做额外的处理，只负责页面的导向作用

Model层是我们的数据交换层，配合控制层Contrioller

MVVM模式

MVVM模式解决了Model与View层直接耦合的问题 在它们中间接了一个核心调度者协调器，能够实现数据双向绑定

演示:

<!-- <template><script><style>这三个标签在每个页面都只能存在一个  -->
<!--template:View -->

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view>
            <text class="title">{{title}}</text>
            <input type="text" :value="title" @input="change">
        </view>
    </view>
</template>

<script>
    //VM：协调者调度器
    export default {
        //Model所有的数据
        data() {
            return {
                title: 'Hello uni-app'
            }
        },
        onLoad() {

        },
        methods: {
            change(e){
                var txtTitle = e.detail.value;  //获取值
                //debugger;  //断点
                this.title = txtTitle;
            }
        }
    }
</script>

<style>
    .content {
        text-align: center;
        height: 400upx;
    }

    .logo {
        height: 200upx;
        width: 200upx;
        margin-top: 200upx;
    }

    .title {
        font-size: 36upx;
        color: #8f8f94;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
启动微信开发者工具 在输入框输入任何值 上方的值都会同步改变;

数组与对象的演示：

<!-- <template><script><style>这三个标签在每个页面都只能存在一个  -->
<!--template:View -->

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view>
            <text class="title">{{title}}</text>
            <input type="text" :value="title" @input="change">
        </view>
        <view>
            I am {{student.age}} years old <br>
            I have skills such as: {{skill[0]}},{{skill[1]}},{{skill[2]}},{{skill[3]}},{{skill[4]}}
        </view>
    </view>
</template>

<script>
    //VM：协调者调度器
    export default {
        //Model所有的数据
        data() {
            return {
                title: 'Hello uni-app',
                student:{
                    age:18
                },
                skill:["Java","HTML","CSS","JavaScript","Python"],
                
            }
        },
        onLoad() {

        },
        methods: {
            change(e){
                var txtTitle = e.detail.value;  //获取值
                //debugger;  //断点
                this.title = txtTitle;
            }
        }
    }
</script>

<style>
    .content {
        text-align: center;
        height: 400upx;
    }

    .logo {
        height: 200upx;
        width: 200upx;
        margin-top: 200upx;
    }

    .title {
        font-size: 36upx;
        color: #8f8f94;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
结果：

项目结构与文件类型

pages.json : https://uniapp.dcloud.io/collocation/pages

新建一个页面操作：

目录变化：

联系小程序 很容易理解

通过改变它们的顺序 来调换初识页面的路由：

标题与样式
全局标题与页面标题 全局样式与页面样式

globalStyle是全局的配置
我们可以在style中进行页面标题的配置（当然包括颜色等）

static放静态资源

这部分 参考文档比较好
这部分 参考文档比较好
这部分 参考文档比较好

生命周期
https://uniapp.dcloud.io/frame?id=生命周期

尺寸单位
响应式像素 upx 类似于微信小程序的rpx

数据绑定与事件(重要)
数据绑定
{{}}里面可以有三元表达式和运算等等

当我们在标签内部使用数据绑定的时候,需要用到

v-bind: 组件的属性名

缩写:   :组件的属性名 
//注意是冒号后跟组件的属性名
1
2
3
4
示例:

    <navigator v-bind:url="url">
            <view>
                <button type="primary"> 点我 </button>
            </view>
        </navigator>
1
2
3
4
5
    data() {
            return {
                url:"../hello/hello"
            }
        },
1
2
3
4
5
事件处理器
https://uniapp.dcloud.io/use?id=事件处理器

事件是使用@符号展开的

手机端的tap事件和click都是可以被触发的
**tap事件(手指触摸)**偏向手机端
更加推荐使用tap事件

longtap被longpress替代了

<template>
    <view>
        <input type="text" :value="text" 
         style="background-color: #0081FF;height: 200upx;"
        @input="change"
        @focus="focus"
        @blur="blue"
        @confirm="confirm"
        @click="click"
        @tap="tap"    
        @longpress="longpress"
        @longtap="longtap"
        @touchstart="touchstart"
        @touchmove="touchmove"
        @touchcancel="touchcancel"
        @touchend="touchend"
        >
    </view>
</template>

<script>
    export default {
        data() {
            return {
                text:"点我!!!",
            }
        },
        methods: {
            focus(){
                console.log("获得焦点")
            },
            blue(){
                console.log("失去焦点")
            },
            confirm(){
                console.log("点击回车或者完成按钮")
            },
            click(){
                    console.log("组件单击事件")
            },
            tap(){
                console.log("组件被触摸事件")
            },
            longpress(){
                console.log("长时间按住")
            },
            longtap(){
                console.log("长时间触摸")
            },
            touchstart(){
                console.log("触摸开始")
            },
            touchcancel(){
                console.log("触摸被打断")
            },
            touchmove(){
                console.log("触摸滑动")
            },
            touchend(){
                console.log("触摸结束")
            }
        }
    }
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
条件判断与for循环
v-if v-show 的区别：
前者是否会在dom中被移除
后者 display:none

条件渲染:

<template>
    <view>
        <view v-if="isShow">
            Now you see me!
        </view>
        <view v-else>
            看不见我 看不见我
        </view>
        
        <view v-show="isShow">
            Now you see me!!
        </view>
        <!-- 三元运算 -->
        <view v-if="sex == 1?true:false">
            男性
        </view>
            <view v-if="sex2 == 1?true:false">
            男性
        </view>
        <!-- 正常的 -->
        <view v-if="sex == 1">
            男性2
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                isShow:true,
                sex:1,
                sex2:2
            }
        },
        methods: {
        
        }
    }
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

block循环不换行
view的循环换行

列表渲染;

<template>
    <view>
        <view v-for="stuObj in studentArray">
            <view>姓名: {{stuObj.name}} 年龄:{{stuObj.age}}</view>
            <view>
                爱吃:
                <!-- <view v-for="ft in stuObj.fruit">
                    {{ft}}
                </view> -->
                <block  v-for="ft in stuObj.fruit">
                    {{ft}}  
                </block>
                
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                studentArray:[
                    {
                        name:"java",
                        age:18,
                        fruit:['苹果','荔枝','香蕉']
                    },
                    {
                        name:"Python",
                        age:88,
                        fruit:['橘子','龙眼','香蕉']
                    },
                    {
                        name:"C",
                        age:15,
                        fruit:['荔枝','香蕉']
                    },
                    {
                        name:"C++",
                        age:6,
                        fruit:['苹果','香蕉']
                    },
                    {
                        name:"JavaScript",
                        age:15,
                        fruit:['荔枝','龙眼']
                    }
                ]
            }
        },
        methods: {
        
        }
    }
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
结果:

使用指令key实现for循环的组件的唯一性

<template>
    <view>
        <!-- key:保证组件和数据捆绑唯一 -->
        <view v-for="stu in studentArray" :key="stu.id">
            <checkbox :value="stu.name">
                {{stu.name}}
            </checkbox>
        </view>
        <button type="primary" @click="addStu">新增学生</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                studentArray:[
                    {
                        id:1,
                        name:"java",
                        age:18,
                        fruit:['苹果','荔枝','香蕉']
                    },
                    {
                        id:2,
                        name:"Python",
                        age:88,
                        fruit:['橘子','龙眼','香蕉']
                    },
                    {
                        id:3,
                        name:"C",
                        age:15,
                        fruit:['荔枝','香蕉']
                    },
                    {
                        id:4,
                        name:"C++",
                        age:6,
                        fruit:['苹果','香蕉']
                    },
                    {
                        id:5,
                        name:"JavaScript",
                        age:15,
                        fruit:['荔枝','龙眼']
                    }
                ]
            }
        },
        methods: {
            addStu(){
                var studentArray = this.studentArray;
                var newId = studentArray.length+1;
                var newStu = {
                    id:newId,
                    name:"新生"+newId,
                    age:18
                }
                studentArray.unshift(newStu);  //在数组的尾部进行添加
            }
        }
    }
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
结果:

如果没有key 对号会随着添加学生保持位置不变,不会随着java向下移动

嵌套循环的下标定义
注意注意 嵌套循环一定要指定下标不同 否则在手机端编译不通过

<template>
    <view>
        <!-- key:保证组件和数据捆绑唯一 -->
        <view v-for="(stu,stuIndex) in studentArray" :key="stu.id">
            <view>姓名:{{stu.name}} 年龄:{{stu.age}}</view>
            <block v-for="(ft,ftIndex) in stu.fruit">
                {{ft}}
            </block>
        </view>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                studentArray:[
                    {
                        id:1,
                        name:"java",
                        age:18,
                        fruit:['苹果','荔枝','香蕉']
                    },
                    {
                        id:2,
                        name:"Python",
                        age:88,
                        fruit:['橘子','龙眼','香蕉']
                    },
                    {
                        id:3,
                        name:"C",
                        age:15,
                        fruit:['荔枝','香蕉']
                    },
                    {
                        id:4,
                        name:"C++",
                        age:6,
                        fruit:['苹果','香蕉']
                    },
                    {
                        id:5,
                        name:"JavaScript",
                        age:15,
                        fruit:['荔枝','龙眼']
                    }
                ]
            }
        },
        methods: {
            addStu(){
                var studentArray = this.studentArray;
                var newId = studentArray.length+1;
                var newStu = {
                    id:newId,
                    name:"新生"+newId,
                    age:18
                }
                studentArray.unshift(newStu);  //在数组的尾部进行添加
            }
        }
    }
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
多端兼容条件编译
借鉴C语言中的条件编译
https://uniapp.dcloud.io/platform?id=条件编译

<template>
    <view>
        <!-- #ifdef H5 -->
            <view>只在H5编译</view>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
            <view>只在ios/安卓 编译</view>
        <!-- #endif -->
        <!-- #ifdef MP -->
            <view>只在小程序(微信 支付宝 百度)进行编译</view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
            <view>只在微信小程序编译</view>
        <!-- #endif -->
        
        <!-- #ifndef MP -->
            <view>不在小程序编译,只在ios/安卓/h5编译</view>
        <!-- #endif -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                studentArray:[
                    {
                        id:1,
                        name:"java",
                        age:18,
                        fruit:['苹果','荔枝','香蕉']
                    },
                    {
                        id:2,
                        name:"Python",
                        age:88,
                        fruit:['橘子','龙眼','香蕉']
                    },
                    {
                        id:3,
                        name:"C",
                        age:15,
                        fruit:['荔枝','香蕉']
                    },
                    {
                        id:4,
                        name:"C++",
                        age:6,
                        fruit:['苹果','香蕉']
                    },
                    {
                        id:5,
                        name:"JavaScript",
                        age:15,
                        fruit:['荔枝','龙眼']
                    }
                ]
            }
        },
        methods: {
            addStu(){
                var studentArray = this.studentArray;
                var newId = studentArray.length+1;
                var newStu = {
                    id:newId,
                    name:"新生"+newId,
                    age:18
                }
                studentArray.unshift(newStu);  //在数组的尾部进行添加
            }
        }
    }
</script>

<style>

</style>

---------------------