uni-app入门到项目实战

1-1创建一个uni-app项目

首先前往官方网址https://www.dcloud.io/hbuilderx.html下载HBuilder X。

一般选择”App开发版“进行下载即可。
下载完成后启动HBuilder X，即可创建新的项目，
如图所示，新建项目

选择uni-app（U）即可，给项目任取一个名称，选择默认模板即可，点击创建一个项目，如图所示
uni-app进行开发一套代码的话，是可以实现同时运行到多个平台的，能够被编译成APP或者是一个小程序…
完成以上步骤后，我们还需要在下载一个微信开发者工具
以下是下载网址https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
根据自己电脑的配置选择下载对应的稳定版本。

安装完成之后打开微信开发者工具，若为此界面，即为安装成功

1、接下来，我们需要将项目运行到这个小程序上，如图所示

（前提：如果是第一次运行这个模拟器的话还需要打开运行设置)

找到正确的路径（即微信开发者工具的安装路径）

点击第一个选项，微信开发者工具即可，它会自动启动微信开发者工具，如图所示

接下来可在开发者工具中查看或操作。

1-2目录结构介绍

我们可以看到这里的page文件，里面还包含了一个index文件（index.vue），这就相当于是一个页面，这里面是页面的内容；
我们在开发uni-app项目的时候，vue页面的结构就是这样的，分为三个部分<template>、<script>、<style>

如图所示，这里有个static文件，我们在项目中经常会用到一些静态资源，例如图片，或者视频，我们都需要存放到static目录，这是一个存放静态资源的目录。

unpackage这个目录是用来存放我们编译后文件路径的，一般我们不对其进行修改，所以可暂时不用管它。
接下来是app.vue文件，在这里我们可以进行全局的配置，或者我们可以对全局进行一个监听。
然后是main.js，这是vue的一个初始化入口文件。
manifest.json是一个json文件，可利用一个可视化的方式将它打开，在这里我们可以对项目进行一个配置。
下面还有一个pages.json文件，它也是一个配置文件，在这里，我们可以配置一个页面的路由、导航条，选项卡等一些页面信息，这个文件是我们在开发中会经常用到的，这是一个重点。
最后一个是CSS文件，这是对我们基础样式的一个规定，可以在这个文件中修改页面样式。

1-3页面样式与布局

1、尺寸单位
Uni-app支持的通用css单位包括px、rpx
px即屏幕像素
rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
接下来我们看看演示效果：
简单编写一个hello word，运行到开发者工具上，试看效果：

px:，以750宽的屏幕为基准动态计算的长度单位，与 vue 页面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 逻辑不一样。）
接下来，我们将样式中px改为rpx，查看效果：

这时侯黑色宽度改变了，这是为什么呢？
这是因为当我们使用rpx的时候，它的宽度是根据比例来进行缩放的。
2、样式
这里可以分为样式导入和内联样式

样式导入：我们可以使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用；表示语句结束。
示例代码：

<style>
@import "../../common/uni.css";
.uni-card {box-shadow: none;
}</style>

内联样式：
我们可以在组件上使用style、class属性来控制组件的样式。
我们前面说过，在APP.vue
中我们可以进行全局样式的编写，那么什么是全局样式呢？
就是说在这里我们编写的每一个样式都可以在各个页面进行使用，例如：
在APP.vue这个页面中给title编写一个A样式

在index页面中就可以使用该A样式，这就是进行一个全局的声明，一个公共的样式。
那么如果我们在index.vue这个页面中给它编写一个B样式，那么此时原来呈现A样式的index.vue页面就会发生改变，变为B样式。

1-4配置文件pages

打开pages.json页面，
Pages数组第一项表示应用启动页，比如说，我们运行项目的时候，它的第一页就是pages的第一项，如图所示 “path”: “pages/home/home”

这里是对我们页面的一个通用的配置，如图所示：

比如说，这里navigationBarBackgroundColor，是对导航栏颜色的一个设置。
navigationBarTitleText是对标题文字的一个设置，但是当我们对其设置之后，会发现这个并没有改动成功，这个是为什么呢？

其实我们不难发现，在path下面也有style样式，这里就涉及到了一个优先级的问题。那么如果我们将它删除的话，再试试，就会发现，这个页面标题文字修改成功了。

下面是path和style的一个基本介绍

每当我们在pages中新建一个页面的时候，它都会在我们这个pages.json中新添加一项，并自动配置好path。
如果我们的应用是一个多tab应用，可以通过taBar配置项指定tab栏，接下来我们来看看如何使用：

"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","text": "index"}, {"pagePath": "pages/home/home","text": "home"}]},

当我们将页面设置为taBar页面的时候，我们需要将页面的一些配置添加到list里，
运行效果如图所示：

Condition
启动模式的配置，仅在开发期间生效
那么这个配置到底什么意思呢？
我们可以来演示一下，比如说

"condition": { //模式配置，仅开发期间生效"current": 0, //当前激活的模式（list 的索引项）"list": [{"name": "index", //模式名称"path": "pages/index/index", //启动页面，必选"query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。},{"name": "home","path": "pages/home/home"}]}

运行并查看微信开发者工具：

这里就可以发现，我们在这可以直接点击查看项目的每一个页面，在我们的开发中，可能会开发很多个页面，那么当我们开发到一个非启动页的时候，我们需要进入这个页面的时候才能看到这个效果，有时候页面路径很复杂，需要很长时间才能找到这个页面，那么如果在开发中，我们添加这样一个配置的话，我们只需要在这里直接查看我们想要打开的页面。