网站首页 > 技术文章正文

总舵主软件崔永亮手把手带你了解uniapp--基础语法

nanyue 2025-08-02 20:27:41 技术文章 21 ℃

样式和sass

# 同时支持小程序的rpx和h5的vw,vh长度单位
# 内置有sass的配置了,只需要安装对应依赖即可
npm install sass-loader node-sass
# 使用sass,在style标签中加入如下属性即可
<style lang='scss'>

</style>

rpx/vw/vh

<view class="content">
	<view class="rpx">rpx</view>
	<view class="vw">vw</view>
</view>
<style>
    /* 用rpx来设置宽高 */
    .rpx {
        /* 在小程序中,750rpx相当于屏幕的整体宽度 */
        width:750rpx;
        height: 100px;
        background-color: aqua;
    }
    
    /* 用vh,vw来设置宽高 */
    .vw {
		/* vw: h5的单位 100vw=屏幕的宽度 100vh=屏幕的高度 */
		width:50vw;
		height: 100px;
		background-color: pink;
	}
</style>

效果:

sass语法

<view class="content">
		<view class="sass">sass</view>
</view>
<!-- content是固定写法 -->
.content{
		.sass{  <!-- .class值 -->
			background-color: red;
		}
	}

效果:

数据展示

普通文本数据

<!-- 1. 在js的data中定义数据 -->
<script>
	export default {
		data() {
			return {
				title:"这是一个title值"
			};
		}
	}
</script>

<!-- 2. 在template页面通过 {{ 数据 }} 来展示数据 -->

<view class="data_title">
	{{title}}
</view>

将数据当做标签的属性值来使用

语法

:data-xxx="xxx"

示例

<!-- 1. 在js的data中定义数据 -->
<script>
	export default {
		data() {
			return {
				title:"这是一个title值",
                  color:"red"
			};
		}
	}
</script>

<!-- 将数据当做标签的属性值来使用,属性名为data-color -->
<view class="content">
	<view :data-color='color'>
		color
	</view>
</view>

效果展示:

数据循环

<!-- 定义数据 -->
<script>
	export default {
		data() {
			return {
				list:[
					{
						id:1,
						text:"苹果"
					},
					{
						id:2,
						text:"樱桃"
					},
					{
						id:3,
						text:"香蕉"
					},
					{
						id:4,
						text:"葡萄"
					}
				]
			};
		}
	}
</script>



<!-- 循环展示数据 -->
<view class="content">
		<!-- 通过view标签来显示 -->
		<view class="" v-for="(item,index) in list" :key="item.id">
			{{index}}---{{item.text}}
		</view>
</view>

条件判断

<!-- 
v-if          # 隐藏标签会删除标签
v-show        # 隐藏标签是通过加hidden属性来隐藏的
-->
<!--
如果标签很频繁的显示隐藏显示隐藏,就用v-show来判断,性能会比较好
-->

<view class="content">
    <!-- 通过isshow的true false 来控制标签显示 -->
	<view class="vif" v-if="isshow">
		v-if
	</view
	<view class="vshow" v-show="isshow">
		v-show
	</view>
    <view class="vshow" v-else>
		v-show
	</view>
</view>

计算属性

类似django模板语法中的自定义函数

<!-- 使用计算属性 -->
<template>
	<view class="content">
		<view>{{start_money}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:1000
			};
		},
		// 计算属性
		computed:{
			start_money(){
				return	"#34; + this.money
			},
             
		}
	}
</script>

只展示ID小于等于1的数据

<template>
	<view class="content">
		<view v-for="item in filter_list" :key="item.id">{{item.text}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:1000,
				list:[
					{
						id:1,
						text:"苹果"
					},
					{
						id:2,
						text:"樱桃"
					},
					{
						id:3,
						text:"香蕉"
					},
					{
						id:4,
						text:"葡萄"
					}
				]
			};
		},
		// 计算属性
		computed:{
			filter_list(){
                 // 这里的=>是指针
				return this.list.filter(v=>v.id<=1)
			}
		}
	}
</script>

数据循环+条件判断

这里建议使用computed计算属性来实现,用下面方法也可以实现

<template>
	<view class="content">
		<view>
			<view v-for="item in list" v-if="item.id<=3" :key="item.id">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:1000,
				list:[
					{
						id:1,
						text:"苹果"
					},
					{
						id:2,
						text:"樱桃"
					},
					{
						id:3,
						text:"香蕉"
					},
					{
						id:4,
						text:"葡萄"
					}
				]
			};
		},
		// 计算属性
		computed:{
		}
	}
</script>

<style lang="scss">
</style>

事件

# 注册事件的语法:
@click="函数名"

# 定义监听函数,在methods中定义
<script>
	export default {
		data() {
			return {
			};
		},
         # 注册事件函数
		methods:{
            
        }
	}
</script>

# 在事件中传参
<view @click="Add(number)">点击事件</view>
methods:{
    # 接收参数
	Add(number){
		this.number = number + 1
	}
}

绑定事件

<template>
	<view class="content">
		<view>{{ number }}</view>
		<view @click="Add()">点击事件</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number:0
			};
		},
		methods:{
			Add(){
				this.number += 1
			}
		}
		
	}
</script>

<style lang="scss">
</style>

事件中传参

<template>
	<view class="content">
		<view>{{ number }}</view>
		<view @click="Add(number)">点击此处,数字(+1)</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number:0
			};
		},
		methods:{
			Add(number){
				this.number = number + 1
			}
		}
		
	}
</script>

<style lang="scss">
</style>

获取标签中的自定义属性的值

<template>
	<view class="content">
		<view>{{ number }}</view>
		<view>{{number2}}</view>
         <!-- 将整个事件对象传入Add()函数中 -->
		<view data-number2="10"  @click="Add(number,$event)">点击此处,数字(+1)</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number:0,
				number2:""
			};
		},
		methods:{
			Add(number,event){
				this.number = number + 1
                  // 获取标签中的自定义数据(data-number2)
				this.number2 = event.currentTarget.dataset.number2
			}
		}
		
	}
</script>

<style lang="scss">
</style>

组件

基本使用流程

定义

1.在项目根目录下新建文件夹components来统一管理组件
2.在components目录下新建组件*.vue

示例代码

<template>
	<img class="head" src="../static/5799c80de4900.jpg" alt="">
</template>

<script>
	export default {
		name:"head-img",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.head{
         /* 椭圆形头像样式 */
		border-radius: 50%;
	}
</style>

引入

# 在页面中引入组件 
import 组件名 from 组件路径

代码示例:

<script>
     // 这里的名字必须是驼峰体
	import headImg from "../../components/head-img.vue"
</script>

1.在页面中的实例中,新增属性components
2.属性components是一个对象,把组件放进对象中注册
3.uniapp推荐组件表明名为 带 -符号的标签,但是导入和注册的时候必须是divRed这种驼峰体

代码示例:

<script>
	export default {
         // 注册组件
		components:{
			headImg
		}
		
	}
</script>

使用

# 创建 组件名 的标签,如:
<组件名></组件名>   # 即可使用该组件

代码示例:

<template>
	<view class="content">
         <!-- 使用组件,推荐使用 带`-`的组件标签名来使用,如divRed,可写成div-red,但是导入和注册的时候必须是divRed -->
		<head-img></head-img>
	</view>
</template>

组件传参

父向子传参,通过属性方式

父组件

<template>
	<view class="content">
         <!-- 同一个组件,根据传递的参数不同,显示不同的图片 -->
         <!-- 随意定义一个属性,并将此属性和data中的数据动态绑定 -->
		<head-img :mysrc="src1"></head-img>
		<head-img :mysrc="src2"></head-img>
	</view>
</template>

<script>
	import headImg from "../../components/head-img.vue"
	export default {
		data() {
			return {
                 // 声明变量,将来会通过:mysrc="src1"来显示src1的图片,:mysrc="src2"来显示src2的图片
				src1:"../static/5799c80de4900.jpg",
				src2:"../static/logo.png"
			};
		},
		components:{
			headImg
		}
		
	}
</script>

<style lang="scss">
</style>

子组件

<template>
     <!-- 将src属性,与父组件传递过来的属性动态绑定 -->
	<img class="head" :src="mysrc" alt="">
</template>
<script>
	export default {
		// 声明从父组件传递过来的属性
		props:{
             // 这个属性key必须和父组件传过来的属性key保持一致,并声明其类型
			mysrc:String
		},
		name:"head-img",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.head{
		border-radius: 50%;
	}
</style>

子向父传参,通过触发事件方式

# 子组件通过出发时间的方式向父组件传递数据
# 父组件通过监听事件的方式来接收数据

子组件代码

<template>
	<img @click="clickImg" class="head" :src="mysrc" alt="">
</template>
<script>
	export default {
		// 声明从父组件传递过来的属性
		props:{
			mysrc:String
		},
		name:"head-img",
		data() {
			return {
				
			};
		},
		methods:{
             // 绑定事件,将图片路径传递到父组件中
			clickImg(){
				// this.$emit("自定义的时间名称","要传递的参数")
				this.$emit("srcChange",this.mysrc)
			}
		}
	}
</script>

<style lang="scss">
	.head{
		border-radius: 50%;
	}
</style>

父组件代码

<template>
	<view class="content">
		<view class="">
			子组件传来的src路径参数为:{{src_image}}
		</view>
         <!-- @srcChange,为子组件定义的点击事件函数名 -->
		<head-img @srcChange=handlerSrcChange :mysrc="src1"></head-img>
		<head-img @srcChange=handlerSrcChange :mysrc="src2"></head-img>
	</view>
</template>

<script>
	import headImg from "../../components/head-img.vue"
	export default {
		data() {
			return {
				src_image:"",
				src1:"../static/5799c80de4900.jpg",
				src2:"../static/logo.png"
			};
		},
		components:{
			headImg
		},
		methods:{
             // 父组件通过监听handlerSrcChange,来得到子组件传递过来的参数
			handlerSrcChange(src_url){
				this.src_image = src_url
			}
		}
		
	}
</script>

<style lang="scss">
</style>

使用全局共享数据传递参数

1.通过挂载vue的原型上

<script>
    // 设置变量或函数
    // Vue.prototype是固定写法,.baseURL为设置的属性,Vue为全局对象,伴随vue的整个生命周期
    Vue.prototype.baseURL="http://www.baidu.com"
</script>

main.js

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
Vue.prototype.baseURL = "http://www.baiducom"

home.vue

<template>
	<view class="content">
		<view class="">
			{{src3}}
		</view>
	</view>
</template>

<script>
	import headImg from "../../components/head-img.vue"
	export default {
		data() {
			return {
				src3:""
			};
		},
         // onLoad中取值
		onLoad() {
			this.src3=this.baseURL
		}
		
	}
</script>

2.通过globalData的方式

app.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
         // 设置全局数据
		globalData:{
			basURL2:"http://www.taobao.com"
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

home.vue

<template>
	<view class="content">
			{{src4}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src4:""
			};
		},
        // 在onLoad中取值
		onLoad() {
             // golobaData取值
			this.src4 = getApp().globalData.baseURL2
		}
	}
</script>

<style lang="scss">
</style>

3.store

store/index.js

//引入Vue 和 Vuex 
import 'Vue' from 'vue'
import 'Vuex' from 'vuex'
// 使用Vuex
Vue.use(Vuex)

// 创建store 对象 
const store = new Vuex.Store({
    //state中是需要管理的全局变量
    state:{
        userName:'',
        hasLogin:false
    },
    //mutations 是操作state中变量的方法
    mutations:{
        login(state,name){  //登录成功修改 全局变量
            state.userName= name;
            state.hasLogin= true;
        },
        loginOut(state){     //退出登录修改 全局变量
            state.userName= '';
            state.hasLogin= false;
        }
    }

})

// 导出store
export default store

main.js

// 注册Vuex
import 'store' form './store'
Vue.prototype.$store = store

// 找到app对象,在app对象中挂载store
const app = new Vue({
    store,
    ...App
})

调用

this.$store.userName

组件插槽

标签也是数据中的一种,可以用组件插槽(slot),来实现父组件向子组件传递标签

通过 slot 来实现占位符

父组件

<template>
	<view class="content">
		<!-- 使用子组件 -->
		<head-img @srcChange=handlerSrcChange :mysrc="src1">
             <!-- 在子组件内,新增想要传递的标签 -->
			<view class="">
				账号: <input type="text">
			</view>
		</head-img>
	</view>
</template>

子组件

<template>
	<view class="">
		<img @click="clickImg" class="head" :src="mysrc" alt="">
         <!-- 添加slot占位符标签,渲染的时候会将父组件标签渲染在slot标签的位置 -->
		<slot></slot>
	</view>
</template>

生命周期

uniapp框架的生命周期是结合了vue和微信小程序的生命周期

全局APP的生命周期对象

onLaunch

应用启动时自动执行

onShow

应用第一次被看到时自动执行

onHide

应用后台运行时自动执行

页面的生命周期对象

onLoad

页面加载完毕后自动执行

onShow

页面被看到时自动执行

组件的生命周期对象

mounted

组件挂载完毕时自动执行

上一篇：【语法总结】新概念一Lesson 21-22
下一篇： Three.js + tensorflow.js构建实时人脸点云

网站首页 > 技术文章 正文

总舵主软件崔永亮手把手带你了解uniapp--基础语法

样式和sass

rpx/vw/vh

sass语法

数据展示

数据循环

条件判断

计算属性

数据循环+条件判断

事件

组件

基本使用流程

组件传参

父向子传参,通过属性方式

子向父传参,通过触发事件方式

使用全局共享数据传递参数

1.通过挂载vue的原型上

2.通过globalData的方式

3.store

组件插槽

生命周期

全局APP的生命周期对象

onLaunch

onShow

onHide

页面的生命周期对象

onLoad

onShow

组件的生命周期对象

mounted

猜你喜欢

网站首页 > 技术文章正文