小小林熬夜学编程

这个屌丝很懒，什么也没留下！

热门标签

uniapp从0到项目实战_uni-app 项目实战

作者：小小林熬夜学编程 | 2024-03-26 11:00:03

踩

uni-app 项目实战

uniapp从0到项目实战

一.页面样式和布局

用flex布局
app.vue可以写公共样式
1
2

二.pages.json

pages数组里面的第一个对象表示启动页

globalstyle顶部导航栏样式的设置【背景，标题颜色，标题内容】
{
 path：每个页面的路劲创建页面的时候回自动生成
 style：每个页面的样式可以自己进行配置  {标题内容，背景颜色，}   
 }
 
 tabBar底部导航栏【未选中是的颜色，选中时的颜色，背景色，行高等等
                                list：[{支持二道五项【路径，文字，未选中时的图片，选中时的图片，】}]    
                              】
1
2
3
4
5
6
7
8
9

三.uniapp的生命周期

应用生命周期【打开应用关闭应用】

    onLaunch                        uniapp初始化完成是出发（全局只触发一次）
    onShow                           uniapp启动，从后台进入前台
    onHide                            uniapp从前台进入后台
    onUniNViewMessage      
1
2
3
4

页面生命周期【打开页面关闭页面】

    onLoad       监听页面加载。其参数为上个页面传递的数据，参数类型为Object(用于页面传参)
    onShow       监听页面显示，页面每次出现在屏幕上都出发，包括从下级页面点击返回露出当前页面
    onHide
     。。。
1
2
3
4

四.模板语法

v-text=={{}}
v-html对data里面的dom元素的内容进行展示 ‘

helloworld

’

五.样式绑定

  style/class

        <view   :class="text1"  :style="style1">hello world</view>
         data(){
             return{ 
              style1:"color:red" 
              text1:"content"
                        }
               }
1
2
3
4
5
6
7
8
9

六.事件绑定

  <view  :class="text"  :style="style1"   @click="click">hello world</view>
             data(){
             return{  
                         style1:"color:red" 
                          text:"content"
                       }
               },
              methods:{
               click(){
                       this.style1="color:blue" 
                       this.text:'' 
                          }
                   }


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

七.条件渲染

  <view class="">
		<view :class="text" :style="style1" v-if="show">
			hello world
		</view>
		<button @click="click" type="default">按钮</button>
	</view>

                data() {
			return {
				style:"font-size:30rpx;color:#FFFFFF",
				text:"content",
				show:true
			}
		},
		methods: {
			 click(){
				 console.log("123")
				 
			（1）	 if(this.show===true){
					 this.show=false
				 }else{
					 this.show=true
				 }
				 
				 
			（2）	 this.show=this.show===true?false:true
			 },
		}
	}
          v-if   v-else平级中间也不能间杂其他元素
          v-if和v-show的区别
          v-if是将dom里面的元素删除创建 （消耗性能）
          v-show是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

八.列表渲染

 <view class="">
		<view class="" v-for="(item,index) in list" :key="index" >
			hello world
		</view>
 </view>
         
         data() {
	return{
	list:[1,2,3,4,5,6,7,8,9,10]
                            }
			
	},

1
2
3
4
5
6
7
8
9
10
11
12
13

九.v-model的使用

   <view class="">
		<input type="text" value="" v-model="text" />
		<button type="default" @click="click">提交</button>
		<view class="">
		      <view class="" v-for="(item,index) in list" :key="index">
				{{item}}
		      </view>
		      <view class="">
				world
		     </view>
		</view>
	</view>
                 

      data() {
			return{
				text:'',
				list:["hello","world"]
			           }
			
		},
		methods: {
			click(){
				this.list.push(this.text)
                                                                    this.text=''
			},
		}

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

十. vue实例生命周期

<view>
<button @clisk='click'>改变</button>
<view>{{text}}</view>
</view>
return{
 text:'hello'
}
methods：{
click(){
 this.text='你好'
 }
},
//创建实例之前
beforeCreate(){
console.log(this.text)  //undefined
},
//创建实例之后
created(){
console.log(this.text)  //hello
}
//挂载之前实例和组件会进行渲染
beforeMount(){
console.log(1)  //1
},
//挂载完成
mounted(){
console.log(2)  //2
},
beforeUpdata(){
console.log('updata')  //未打印点击改变会打印
},
updated(){
console.log('updated')  //updated
},
beforeRestory(){},
restoryed(){},
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

十一.计算属性

computed (只有当计算属性中需求的元素发生改变时才会执行)

有计算的话推荐使用计算属性，性能会降低。如果用普通的方法就算不会牵扯到计算也会执行一次）

(1)

<view class="">
		
			<view class="" v-for="(item,index) in list" :key="index">
				{{firstText+''+lastText}}   //hello world
			</view>
</view>
1
2
3
4
5
6

(1)

data() {
			return{
				firstText:'hello',
				lastText:'world'
			}
			
		},
1
2
3
4
5
6
7

(2)

<view class="">
		
		<view class="" v-for="(item,index) in list" :key="index">
				  {{fullText}}   //hello world
		</view>
</view>
1
2
3
4
5
6

(2)

data() {
			return{
				firstText:'hello',
				lastText:'world'
			}
			
		},
		methods: {
			
		},
		computed:{
			fullText(){
				return this.firstText+''+this.lastText
			},
		//监听【监听的对象发生改变时才会执行】
		watch:{
              
              },
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

watch(监听的是一个变量或者数据当监听的对象发生改变时才会执行,必须要定义初始值)

<view class="">
		
			<view class="" v-for="(item,index) in list" :key="index">
				{{fullText}}
			</view>
		
</view>
1
2
3
4
5
6
7

data() {
			return{
				firstText:'hello',
				lastText:'world',
				fullText:'hello world' //初始值
			}
			
		},
		methods: {
			
		},
		watch:{
			firstText(){
				this.fullText= this.firstText+''+this.lastText
			},
			lastText(){
				this.fullText= this.firstText+''+this.lastText
			}
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

父子组件传值

在跟目录下创建components，在components里面选择新建组件，在子组件里面写内容

<template> <view> 我是子组件 </view> </template>

在父组件内引入子组件{不能使用大写大写要写成a-b aB}

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="title">
		<child></child>  //插入组件
			
		</view>
	</view>
</template>

<script>
	import child from '../../components/child.vue'  //引入
	export default {
		components:{
			child   //定义组件名称
		}
		data() {
			return {
				title: 'Hello'
			}
		},
	
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

父组件向子组件传值props

//父组件的内容绑定在子组件上面-----父组件
<view class="content">
		<text class="title">{{title}}</text>
		<child :text="text"></child> //
</view>
<script>
    import child from '../../components/child.vue'
	export default {
		components:{
			child
		},
		data() {
			return {
				
				text:'我是父组件'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>
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

//子组件通过props接收父组件循环过来的内容
<script>
	export default {
		props:['text'],
		name:"child",
		data() {
			return {
				
			};
		}
		
	}
</script>
//把接收到的内容通过v-model展示
<template>
	<view>
		{{text}}
	</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

子组件向父组件传值$emit

//子组件写内容在触发的方法里面写this.$emit('change'(方法),this.title(传给子组件的参数))
<template>
	<view>
		{{text}}
	</view>
	<button type="default" @click="click"> 传值</button>
</template>

<script>
	export default {
		props:['text'],
		name:"child",
		data() {
			return {
				title:'我是子组件'
			};
		},
		methods:{
			click(){
				this.$emit('change',this.title)
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

组件的参数校验

<template>
	<view>
			
		{{text}} //0
	</view>
	<view class="" @click="click">
		传值
	</view>
</template>

<script>
	export default {
		// props:['text'],
		//父组件传过来的值是字符串,子组件接收用数值默认为0 
	（1）	props:{  
			text:Number   //{{text}} 0
			text:String  //{{text}} 我是父组件
			text:Array   //{{text}} 不显示
 		}

      （2）   props:{  
                 text：{
                       type:Number
                       type:String
                       type:Number
                       default:3  //如果不显示可以给默认值
                       }
			
 		}
		name:"child",
		data() {
			return {
				titlt:'我是子组件'
			};
		},
		methods:{
			click(){
				this.$emit('change',this.title)
			},
		}
	}
</script>
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

Uiapp 基础组件

<template>
	<!-- 
	hover-class点击样式发生改变默认为none
	hover-start-time按住多久出现点击状态的样式
	hover-stay-time手指松开多久样式恢复原样
	 -->
	<view hover-class="hover" hover-start-time="1000" hover-stay-time="1000">
	试图容器类似于div		
	</view>


	<!-- 
	 scroll-y纵向滚动
	 height滚动区域的高度
	 -->
	<scroll-view scroll-y="true" style="height: 40rpx;">
	<view class="">
	滚动
	</view>
	</scroll-view>
	

	<!-- 
	 轮播图每一项是一个页面来滑动
	 autoplay是否进行自动滚动默认为true
	 
	 -->
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000"         :duration="1000">
		<swiper-item>
			<view class="">
				1
			</view>
		</swiper-item>
		<swiper-item>
			<view class="">
				1
			</view>
		</swiper-item>
	</swiper>
</template>
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

uniapp表单组件讲解

uniapp导航与页面传参

open-type： navigate redirect switchTab relaunch navigateBack

navigate：
switchTab：跳转到tabbar页面
navigateBack delta=1 返回上一页
tabbar无法接收到传递的参数

<navigator open-type="navigate" url="../App?id=1"></navigator>
接收
prop:['id']
1
2
3

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/316714