uni-app

1.基础语法

1.1数据绑定

<template>
	<view class="content">
		hello uni-app!
		<!-- 页面结构中，使用小程序标签结构 -->
		<view>姓名：{
  { name  }}</view>
		<view>年龄：{
  { age.toFixed(2) }}</view>
		<view>性别：{
  { gender }}</view>
		<view>函数：{
  { introduction() }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '大牧',
				age: 22,
				gender: '男'
			}
		},
		methods: {
			introduction() {
				return `姓名：${this.name}, 年龄：${this.age}`
			}
		},
		onLoad() {

		},
		onPullDownRefresh() {
			// 页面被下拉刷新了
			setTimeout(() => {
				// 手工收回刷新效果
				uni.stopPullDownRefresh()
			}, 2000)
		}
	}
</script>

<style>
	.content {
		color: red;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		font-weight: bolder;
	}

</style>

 1.2全局样式

<!-- 注意：默认情况下HBuilder工具不支持scss语法，需要到插件市场下载并安装插件 -->
<!-- 比较友好的是，目前HBuilder工具会自定识别代码语法，自动下载对应的插件 -->
<style lang="scss">
	.content {
		color: red;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		font-weight: bolder;
	}
	.intro1, .intro2, .intro3, .intro4{
		font-size: 16px;
		text-align: left;
		width: 100%;
	}
	
	.intro1{
		/* color: #555; */
		color: $uni-text-mycolor;
	}
	.intro2{
		/* color: #555;*/
		color: $uni-text-mycolor;
	}
	.intro3{
		/* color: #555;*/
		color: $uni-text-mycolor;
	}
	.intro4{
		/* color: #555;*/
		color: $uni-text-mycolor;
	}

</style>

 注意：关于页面中的统一样式