[TOC] [TOC] # 第一个uni-app项目 这部分的项目文件为： * [ ] 01-UniAPP Hello World * [ ] 02-UniAPP Tabs # 目录结构 一个uni-app工程，默认包含如下目录及文件：  图 uni-app工程文件目录及说明 * components目录：组件文件存放目录 * pages目录：业务页面文件存放目录 * static目录：存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此 * unpackage：编译的临时文件目录 * App.vue：应用配置，用来配置App全局样式以及监听应用的生命周期 * main.js：Vue初始化入口文件 * manifest.json：配置应用名称、appid、logo、版本等打包信息 * pages.json：配置页面路由、导航条、选项卡等页面类信息 # 页面文件规范 为了实现微信小程序、原生App的跨端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范： > 页面规范 - [Vue 单文件组件 (SFC) 规范 > ](http://doc.vue-js.com/v2/guide/single-file-components.html) .vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块`<template>`、`<script>` 和`<style>`。 ```html <template> </template> <script> </script> <style> </style> ``` * `template`语言块用于编写页面的定义代码 * script语言块编写页面的模块Javascript代码 * style语言块用于编写样式定义脚本 # 什么是组件 > 组件是视图层的基本组成单元 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。 ```html <template> <view> <tagname property="value"> content </tagname> </view> </template> ``` **Tips** * 所有组件与属性名都是小写，单词之间以连字符-连接。 * 根节点为`<template>`，这个`<template>`下只能有一个根组件，即`<template>`元素的孩子节点构成一颗树，树只有一个根节点。 ## 相关文档 > 框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。 > [uni-app组件使用规范](http://uniapp.dcloud.io/component/README) ## 配置文件 ### 配置文件概述 pages.json 文件用来对 uni-app 进行全局配置（globalStyle）、决定页面文件的路径和窗口表现（pages）、设置底部 tab 的表现（tabBar）和条件启动（condition）。 图表 4‑4 配置文件pages.json 的配置项列表 | 选项 | 说明 | | --- | --- | | globalStyle | 设置默认页面的窗口表现 | | pages | 设置页面路径及窗口表现，pages数组中第一项表示应用启动页，项目中出现的所有的页面必须在pages中列出 | | tabBar | 设置底部 tab 的表现 | | condition | 启动模式配置，仅开发阶段有效，方便给页面传递参数测试功能 | * 完整的配置说明，参考配置文件一章。 ### 全局配置 配置文件的globalStyle节用于设置整个APP的全局设置，如顶部当航栏的文字颜色、标背景色以及整个页面的背景色。 ```html "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#FF0000", "backgroundColor": "#F8F8F8" }, ``` 这些配置如果某个页面想改变默认值，需要在特定页面的配置中重载，例如将pages/index/index页面的导航栏的背景色（navigationBarBackgroundColor）改成绿色（#00FF00），需要修改style属性的值。 ```html { "pages": [ //pages数组中第一项表示应用启动页 { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "navigationBarBackgroundColor": "#00FF00" } }, … ``` ### 模式配置 假设已经增加了3个页面 * pages/home/index * pages/home/hello * pages/home/about 根据约定pages数组中第一项表示应用启动页 ```html "pages": [{ "path": "pages/home/index", "style": { "navigationBarTitleText": "首页", "navigationBarBackgroundColor": "#00FF00" } }, { "path": "pages/home/hello", "style": { "navigationBarTitleText": "Hello!" } }, { "path": "pages/home/about", //重载全局设置 "style": { "navigationBarTextStyle": "black", "navigationBarTitleText": "About", "navigationBarBackgroundColor": "#F00", "backgroundColor": "#F8F8F8" } } ], ``` 那么，在开发阶段，如果要直接启动about页面，就必须将about设置为第一项，这样改动起来非常麻烦，因此可以通过配置编译模式赖解决，condition节的list数组存放多个配置的列表，索引从0开始，current属性用于设置当前启用的模式。 ```html "condition": { //模式配置，仅开发期间生效 "current": 2, //当前激活的模式（list 的索引项，从0开始） "list": [{ "name": "首页", //模式名称 "path": "pages/home/index", //启动页面，必选 "query": "" //启动参数，在页面的onLoad函数里面得到。 }, { "name": "Hello", //模式名称 "path": "pages/home/hello", //启动页面，必选 "query": "" //启动参数，在页面的onLoad函数里面得到。 }, { "name": "关于", //模式名称 "path": "pages/home/about", //启动页面，必选 "query": "uid=100&t=1535987051" //启动参数，在页面的onLoad函数里面得到。 } ] } ``` 如果页面有参数，可以在onLoad事件中解析。 ```html onLoad: function (e) { console.log(JSON.stringify(e)); } ``` 打印的结果如下： ```html {"uid":"100","t":"1535987051"} ``` > 查询字符串：问号后面所跟的参数“uid=100&t=1535987051”就是查询字符串，字符串以键值对的形式出现，如果有多个参数，用"&"隔开就行了。 > 例如："about?uid=100&t=1535987051"表示带两个参数uid和t，他们的值分别为100和1535987051。参数的名称和值含有特殊字符必须进行url转义。 **注意：** 在5+app里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式，如下图：