uni-app--》uni-app语法书写的相关规范及注意点
️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生
个人主页：亦世凡华、
系列专栏：uni-app
座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。
引言
⚓经过web前端的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了uni-app专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第二站就是uni-app开发，希望看到我文章的朋友能对你有所帮助。
目录
uni-app语法概述
JavaScript语法
CSS语法
vue语法
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 实际显示效果会等比放大。
{{msg}}
{{msg}}
如果想进行样式导入的话，可以采用 @import 语句导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。
框架组件上支持使用 style、class 属性来控制组件的样式。所以采用内联样式有如下方法：
// style：静态的样式统一写到 class 中。
// style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
注意：本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
.test2 {
background-image: url('~@/static/logo.png');
}vue语法
uni-app的vue语法与vue.js框架语法除去个别差异之外，基本上是一致的，如果你之前学习过vue的话，学习uni-app可以说是非常轻松的了，如果没有了解过或者说学习过vue但是忘记了一些相关语法，推荐看一下博主的vue专栏：vue技术栈 。
基本的vue六大基础指令，这里就不再赘述了，可以参考我之间的文章：链接 ，这里我简单的举一个模拟表单提交的例子，如下：
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组件中去调用该登录退出的状态：
通信录
{{userName}}
其它相关语法类似：ts、jsx等就不再一一赘述了，可以自行在官方文档中进行相关查询。