uni-app–》uni-app语法书写的相关规范及注意点

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、

🛺系列专栏：uni-app

🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。

👀引言

⚓经过web前端的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了uni-app专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第二站就是uni-app开发，希望看到我文章的朋友能对你有所帮助。

uni-app语法概述

uni-app代码编写，基本语言包括js、css、vue。以及ts、scss等css预编译器。在app端还支持原生渲染的nvue，以及可以编译为kotlin和swift的uts。为实现多端兼容，uni-app约定如下开发规范：

1）页面文件遵循 Vue 单文件组件 (SFC) 规范，即每个页面是一个.vue文件。

2）组件标签靠近小程序规范，详见uni-app 组件规范。
3）接口能力（JS API）靠近小程序规范，但需将前缀 wx、my 等替换为 uni。
4）数据绑定及事件处理同 Vue.js 规范，同时补充了应用生命周期及页面的生命周期

5）如需兼容app-nvue平台，建议使用flex布局进行开发

JavaScript语法

uni-app的js API由标准ECMAScript的js API 和 uni 扩展 API 这两部分组成，uni-app基于ECMAScript扩展了uni对象，并且API命名与小程序保持兼容。uni-app 在支持绝大部分 ES6 API 的同时，也支持了 ES7 的 await/async。

CSS语法

uni-app的css与web的css基本一致，支持通用css单位包括：px(屏幕像素)、rpx(响应式px)。

注意：rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位；如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用 px 。

750rpx：恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。

<template>
	<view class="box">
		<view class="box1">{{msg}}</view>
		<view class="box2">{{msg}}</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				msg:'记得一键三联哦~'
			}
		},
	}
</script>

<style lang="scss">
.box{
	.box1{
		width: 200px;
		height: 200px;
		background: pink;
		text-align: center;
		line-height: 200px;
	}
	.box2{
		width: 750rpx;/* ，默认情况下，750rpx是占满全屏的 */
		height: 200rpx;
		background: green;
		text-align: center;
		line-height: 200rpx;
	}
}
</style>

如果想进行样式导入的话，可以采用 @import 语句导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

框架组件上支持使用 style、class 属性来控制组件的样式。所以采用内联样式有如下方法：

// style：静态的样式统一写到 class 中。
// style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view :style="{color:color}" />

// class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合。
// 样式类名不需要带上.，样式类名之间用空格分隔。
<view class="normal_view" />

注意：本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。

.test2 {
	background-image: url('~@/static/logo.png');
}

vue语法

uni-app的vue语法与vue.js框架语法除去个别差异之外，基本上是一致的，如果你之前学习过vue的话，学习uni-app可以说是非常轻松的了，如果没有了解过或者说学习过vue但是忘记了一些相关语法，推荐看一下博主的vue专栏：vue技术栈。

基本的vue六大基础指令，这里就不再赘述了，可以参考我之间的文章：链接，这里我简单的举一个模拟表单提交的例子，如下：

<template>
	<view>
		<form @submit="onSubmit">
			<view class="row">
				<input type="text" name='username'>
			</view>
			<view>
				<textarea name="content"></textarea>
			</view>
			<view class="row">
				<picker name="school" :range="options" :value="selectValue" @change="change">
					<button size="mini">点击选择学历：{{options[selectValue]}}</button>
				</picker>
			</view>
			<view>
				<button form-type="submit" type="primary">提交表单</button>
				<button form-type="reset">重置表单</button>
			</view>
			{{obj}}
		</form>
	</view>
</template>


<script>
	export default {
		data(){
			return{
				obj:null,
				options:["小学","初中","高中","本科","研究生"],
				selectValue:null
			}
		},
		methods:{
			onSubmit(e){
				this.obj = e.detail.value
				this.obj.school = this.options[this.selectValue]
			},
			change(e){
				this.selectValue = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	input,textarea{
		border: 1px solid #ccc;
	}
	textarea{
		margin-top: 10rpx;
	}
</style>

uni-app的vue语法与vue.js语法的区别之一，在于uni-app采用 easycom 注册组件方式，我们先了解一下uni-app注册组件的方式，如下：

全局注册很简单，但是局部注册的话，uni-app采用比vue.js更为简便的方式，如下：

uni-app组件通信：组件通信可以说是比较重要的知识点了，这里的话我就简单提一下父子之间的通信，如下：

父向子传值：通过props传递数据

当然这里的props也可以是对象形式，对象形式的话，可以设置其它额外的属性，如下：

子向父传值：通过$emit传递数据

uni-app中Vuex的状态管理：Vuex是一个专为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。一般应用于vue多个组件之间需要共享数据或状态。

关联规则：

1）State：存储状态数据

2）Getter：从状态数据派生数据，相当于State的计算属性

3）Mutation：存储用于同步更改状态数据的方法，默认传入的参数为state

4）Action：存储用于异步更改状态数据，但不是直接更改，而是通过触发Mutation方法实现

5）Module：Vuex模块化

相关的案例可自行去官方文档查看，这里仅举一个简单的例子：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
	state:{
		userName: uni.getStorageSync('userName') ? uni.getStorageInfoSync('userName') : '未登录用户'
	},
	mutations:{
		MLOGIN(state,userName){
			uni.setStorageSync('userName',userName)
			state.userName = userName
		},
		MLOGOUT(state){
			uni.clearStorageSync()
			state.userName = '退出状态用户'
		}
	},
	actions:{
		login(context,userName){
			context.commit('MLOGIN',userName)
		},
		logout(context){
			context.commit('MLOGOUT')
		}
	}
})

export default store

在main.js中引入该文件

在list组件中去调用该登录退出的状态：

<template>
	<view>
		<text>通信录</text>
		<view>{{userName}}</view>
		<button @click="login('蜡笔小新')">登录</button>
		<button @click="logout()">退出</button>
	</view>
</template>

<script>
	import { mapState,mapActions } from 'vuex'
 	export default {
		data() {
			return {
				
			};
		},
		computed:{
			...mapState(['userName'])
		},
		methods:{
			...mapActions(['login','logout'])
		}
	}
</script>

<style lang="scss">

</style>