pages.json
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"backgroundColor": "#1AA034",
"navigationBarBackgroundColor": "#1AA034"
}
}, {
"path": "pages/list/list",
"style": {
"navigationBarTitleText": ""
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
pages 节点配置应用由哪些页面组成，pages节点是一个数组，里面的每一个项都是一个对象。注意：pages节点的第一项为应用入口页。也就是说，index为此时的入口页，如果想要list为入口页，则将index所在的项放到第一项的位置即可。
path表示页面所在的位置，也是路由的意思；style用于设置每个页面的状态栏、导航条、标题、窗口背景色等。
常用的style样式有：navigationBarBackgroundColor(导航栏背景颜色)；navigationBarTitleText(导航栏标题文字内容)；navigationBarTextStyle(导航栏标题颜色及状态栏前景颜色，仅支持 black/white)。
globalStyle配置的是全局的style，它和pages里面的配置项一样，不过权重没有pages里面的style高。主要用于一些统一的配置。
注意
注意事项一：uniapp中也支持原生的html语法，但是如果要将uniapp打包成小程序，如微信小程序，可能会因为语法不兼容的问题，导致语法失效。所以在编写uniapp程序的时候，尽量使用uniapp的语法进行编写。
注意事项二：style中的lang属性值设置为scss，表示支持如下css语法：直接在.swiper中嵌套.item。
.swiper {
height: 400rpx;
margin-top: 100rpx;
.item {
padding: 20rpx;
box-sizing: border-box;
image {
width: 100%;
height: 350rpx;
}
}
}
px与rpx
px是固定像素，而rpx是响应式像素。默认小程序的宽度是750rpx。
基础标签
view
视图容器，类似于html中的div，用于包裹各种元素内容，在H5页面中，使用view或者div都行，但是在微信小程序中，还是需要使用view的，否则可能会导致失效。
icon
图标，用于显示图标的标签。
text
文本组件，用于包裹文本内容，类似html中的sapn标签，属于行内样式。可选属性有：selectable/user-select(文本是否可选)，前者可用于H5、后者可用于微信小程序；space(显示连续空格)，它的可选值有：ensp(中文字符空格一半大小)、emsp(中文字符空格大小)、nbsp(根据字体设置的空格大小)；decode(是否解码)，这个属性加不加，在微信小程序和H5都默认是解码的，decode 可以解析的有 、<、>、&、'、 、 
scroll-view
可滚动视图区域。用于区域滚动。需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。常用的属性有：scroll-x(允许横向滚动)、scroll-y(允许纵向滚动)
swiper
滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图。注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。常见的属性有：autoplay(是否自动切换)、interval(自动切换时间间隔)、duration(滑动动画时长)、circular(是否采用衔接滑动，即播放到末尾后重新回到开头)。
image
图片标签，组件默认宽度 320px、高度 240px。常见属性值有：src(图片资源地址)、mode(图片裁剪、缩放的模式)。 scaleToFill(不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素)、aspectFit(保持纵横比缩放图片，使图片的长边能完全显示出来)、aspectFill(保持纵横比缩放图片，只保证图片的短边能完全显示出来)、widthFix(宽度不变，高度自动变化，保持原图宽高比不变)、heightFix(高度不变，宽度自动变化，保持原图宽高比不变)。
video
视频播放组件， 默认宽度 300px、高度 225px，可通过 css 设置宽高。常见属性值有：src( 要播放视频的资源地址)、autoplay(是否自动播放，谷歌是不支持默认播放的，即便设置了也没用)、loop(是否循环播放)、muted(是否静音播放)、initial-time(指定视频初始播放位置，单位为秒)、duration(指定视频时长，单位为秒)、controls(是否显示默认播放控件)。
audio
音频播放组件，与video组件相似，常见的属性有：id(audio 组件的唯一标识符)、src(要播放音频的资源地址)、loop(是否循环播放)、controls(是否显示默认控件)。
progress
进度条，常见的属性有：percent(百分比0~100)、show-info( 在进度条右侧显示百分比)、border-radius(圆角大小)、font-size( 右侧百分比字体大小)。
navigator
页面跳转，该组件类似HTML中的<a>组件，但只能跳转本地页面，且目标页面必须在pages.json中注册。常见的属性值有：url(应用内的跳转链接，值为相对路径或绝对路径)、open-type(跳转方式)。
open-type对应的常见属性值如下：
| 值 | 功能 | 说明 |
|---|---|---|
| navigate | 对应 uni.navigateTo | 保留当前页面，跳转到应用内的某个页面，需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数 |
| redirect | 对应 uni.redirectTo | 关闭当前页面，跳转到应用内的某个页面，需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数 |
| switchTab | 对应 uni.switchTab | 关闭所有页面，打开到应用内的某个页面，需要跳转的应用内页面路径 , 路径后可以带参数 |
| reLaunch | 对应 uni.reLaunch | 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数 |
| navigateBack | 对应 uni.navigateBack | 关闭当前页面，返回上一页面或多级页面，可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。 |
tabBar
设置底部 tab 的表现，如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。常见的属性值有：color(tab 上的文字默认颜色)、selectedColor(tab 上的文字选中时的颜色)、list(tab 的列表，最少2个、最多5个 tab)。
其中 list 接收一个数组，数组中的每个项都是一个对象，常见的属性值有：pagePath(页面路径，必须在 pages 中先定义)、text(tab 上按钮文字)、iconPath(图片路径，icon 大小限制为40kb，不支持网络图片，不支持字体图标)、selectedIconPath(选中时的图片路径)。
vue部分标签
v-if与v-show
v-if标签，在编译成html时，不符合条件的是不会被编译的，也就是说在开发者工具中，是看不到不符合条件的源码的。v-show标签， 在编译成html时，不符合条件的语句会增加display: none属性值，以达到不展示的效果。
v-html
v-html标签可以渲染html标签，而直接使用{{}}会将html标签直接显示出来，并不会进行渲染。
methods和complete的区别
组件
easycom
vue中使用自定义组件，首先需要创建该组件，在使用到该组件的页面中，引入该组件，通过components声明该组件，最后才在代码中使用该组件。而uniapp中并不需要这么麻烦，uniapp中的easycom将组件引入精简为一步，即在代码中使用该组件。easycom的前提是在根目录下创建一个components目录，所有作为组件的文件都存放在该目录下。并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。
props
通过props属性，可以在父页面中向组件传值。组件中的属性定义在props中。props中定义的属性，与data中定义的属性的使用方法一致。
props默认值设置
将props定义为对象类型，通过type可以指定传入的数据类型，通过default可以指定默认的值，具体格式如下：
props: {
title: {
type: String,
default: "这是一个默认标题"
}
}
emit子向父组件传值
通过this.$emit("事件触发名", value)的格式，就可以在子组件中定义一个事件触发的名称，在父组件中使用这个事件，就可以实现子向父传值，具体格式如下：
components/item/item.vue
<template>
<view>
<input type="text" @input="onsend" />
</view>
</template>
<script>
export default {
methods: {
onsend(e) {
this.$emit("oninput", e.detail.value)
}
}
}
</script>
pages/about/about.vue
<template>
<view>
<item title="副标题" @oninput="onsend"></item>
</view>
</template>
<script>
export default {
methods: {
onsend(e) {
console.log(e)
}
}
}
</script>
.native修饰符
在自定义组件标签中，如果使用原生的触发事件，如@click，默认的会去子组件中查找this.$emit是否有传click触发事件到父组件中，如果没有则不生效。但是@click是官方定义的触发事件，而我们也只是想使用这个按钮事件。此时就可以在@click后面加上.native修饰符，格式如：@click.native。这样一来，@click就可以正常的使用了。
注意
官方是不允许子组件修改props中的值，因为这是一个单向传递的值！！！
.sync修饰符
子组件item中通过定义this.$emit("update:state", true)，父组件中使用<item :state.sync="state"></item>即可获取到被修改的state值，响应式的传值，更加简便。
声明周期
created()：在dom树被渲染之前触发，常用于获取数据用于渲染。
mounted()：在dom树被渲染之后触发，常用于修饰页面。
onLaunch: function()：在程序开始运行时运行，只运行一次。
onShow: function()：在程序获得焦点时执行。
onHide: function()：在程序失去焦点时执行。
页面跳转与传参
页面跳转
通过触发事件定义函数，调用uni方法，可以进行页面跳转，具体格式如下：
onskip() {
uni.navigateTo({
url: "/pages/demo/demo"
})
}
其中url是必须参数，否则页面不会进行跳转。
除了使用函数的跳转方式，也可以直接使用navigator进行页面跳转。
传参
跳转：
uni.navigateTo({
url: "/pages/demo/demo?wd=hello"
})
获取参数：
H5和vue中可以通过console.log(this.$route.query.wd)获取到参数。
小程序是不支持this.$route的，它会取到一个undefined。
统一的标准规范是使用onLoad函数，来获取到页面传递的参数：
onLoad(e) {
console.log(e)
}
通过getCurrentPages()函数，也可以拿到页面栈。
