① uni-app 介绍、项目搭建、目录结构

小咪咪 2022-11-20 01:55 268阅读 0赞

### uni-app ###

*  uni-app介绍
 *  项目搭建
 *  目录结构
 *   *  App.vue 和 main.js
     *  manifest.json
     *  uni.scss
     *  pages.json
     *   *  页面配置
         *  tabbar的配置
 *  condition启动模式配置
 *  开发规范简单介绍

--------------------

**写下博客主要用来分享知识内容，便于自我复习和总结。  
如有错误之处，望各位指出。**

--------------------

在学习uni-app的内容前，最好要有一定的Vue基础，但不一定要了解原生小程序。

--------------------

# uni-app介绍 #

uni-app是一个使用Vue.js开发所有前端应用的框架。开发者编写一套代码，就可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_enter]  
之前笔者在学习时，选择使用mpvue去开发微信小程序，当时感觉mpvue真不错。但后来发现mpvue确实存在一系列兼容性问题，而且貌似mpvue内的很多内容已经不维护了？但说回正题，现在接触到uni-app之后，笔者直接光速沦陷，因为uni-app和HBuiderX是真的好用：uni-app使用起来比较简单，HBuiderX内置了很多实用插件。界面和功能十分友好，它还可以做到一套代码，运行到多个平台，而且是自带的一键式操作。除此以外，即使不跨端，uni-app也绝对是更好的小程序开发框架。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_piccenter]

HBuiderX可从官网免费下载，且下载操作很简单：[HBuiderX官网][HBuiderX]

想了解更多uni-app内容，或者在遇到一些问题时，想找到解决方案，直接参照官网即可：[uni-app官网][uni-app]

--------------------

# 项目搭建 #

在HBuilderX内，新建项目，选择uni-app。其中的模板可以根据项目的需求选用。

笔者通常会在这里选择uni-ui项目，这样就可以使用更多扩展组件了。当然，就算不在这里选择使用uni-ui，后续在项目里也还可以通过npm导入uni-ui。

这个uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。（uni-ui不包括基础组件，它是基础组件的补充）

具体的使用都可以在官网找到：[uni-ui][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]  
建好项目之后，想要运行就直接打开上方菜单栏中的运行即可。里面会有很多种运行方式，点击就可一键启动，十分方便。但对于每种方式需要确保有运行条件。  
![在这里插入图片描述][20201207102857647.png]

1、对于运行到浏览器，需要在本机上有相应浏览器。如果确定本机上有相应浏览器，却未检测到，它就会跳转到运行配置，我们手动配置好安装路径即可。  
![在这里插入图片描述][20201207102754946.png]  
![在这里插入图片描述][20201207102959553.png]  
2、对于运行到内置浏览器，我们就不需要额外安装浏览器，HBuilderX里会有内置浏览器。

我们只要去 工具 -> 插件安装 中安装即可，里面有内置浏览器，内置终端等。其他有关插件，根据自己的需求去插件市场下载即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]  
3、对于运行到手机或模拟器，如果我们想在真机上测试效果，首先使用usb数据线连接自己的手机，然后将手机设置为开发者模式中的USB调试模式。（如果不知道如何开启USB调试模式请根据自己手机情况，百度查询）

调整好了之后，使用HBuilderX的运行 - 运行到手机或模拟器 =》这时上面就会显示手机（一定是开启了USB调试模式才会检测出手机）

选择自己的手机后，HBuilderX就会在手机上自动安装一个HbuilderAPP，用于真机调试。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener]  
如果不想真机调试，在里面会看到 配置手机模拟器的教程 或者 用chrome调试Android应用。  
![在这里插入图片描述][20201207104938314.png]  
4、对于运行到小程序模拟器，因为目前只接触过微信开发者工具，在这里就以它为例。（在这里就不介绍，如何创建一个微信个人开发者帐号了，直接去微信公众平台申请即可：[微信公众平台][Link 1]。开发其它平台小程序，就去各自平台查找相关说明吧。对于微信而言，一定需要申请帐号开发权限）  
![在这里插入图片描述][20201207110116942.png]

我们选择本机的开发者工具后，第一次会检测不到开发者工具。这时它会跳转到配置文件，我们为其配置路径即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 4]  
然后，我们打开项目的manifest.json文件，需要去里面为各个小程序配置相关信息。

![在这里插入图片描述][20201207110342611.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 5]  
以微信小程序为例，在这里一定需要配置AppID。这个AppID我们需要去官网查询获取：[查询方式][Link 2]

等我们获取了之后，打开微信开发者工具时（如果未登录还需要先登录自己的帐号噢），在界面右上角 或者 >> 里有个详情，之后就可以在这里看到自己的APPID了。（这是在微信开发者工具中导入或新建了一个项目后才有的界面）  
![在这里插入图片描述][20201208091102328.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 6]

随后，还要确保设置中的安全设置的服务端口打开。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 7]

--------------------

# 目录结构 #

![在这里插入图片描述][20201208091631823.png]  
（以上项目目录结构不是默认结构，笔者有自己新建的文件夹）

如果是默认uni-app模板项目，是没有components的。选择了uni-ui模板项目 或 其它模板项目时，相关新增的所有组件就会放到components里。如果我们只想按需获取，那就把里面的多余组件删掉即可。除此以外，按照个人习惯，如果项目中还要抽取公共组件，笔者通常会把公共组件也放入其中（当然，也可以自己在新建文件夹）。

`pages`存放项目的页面。

`static`存放项目静态资源，比如images。

`store`存放vuex。

`unpackage`存放打包后的文件，新建的项目是没有的。（使用微信开发者工具运行后，也会出现此文件夹）  
对于打包后的文件，还需要说的是：如果打包后，相关组件或者图片失去了效果，可能是打包后的相关内容的引用路径出现了改变，导致错误。一旦出现类似错误，大家可以留意一下。

`App.vue`是项目的根组件，所有页面都是在`App.vue`下进行切换的，是页面的入口文件，可以调用应用的生命周期函数。

`main.js`是项目的入口文件，主要作用是初始化`vue`实例并使用需要的插件。

`manifest.json` 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

`pages.json` 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

`uni.scss`文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，`uni.scss`文件里预置了一批scss变量预置。

--------------------

## App.vue 和 main.js ##

对于App.vue、main.js 和 在Vue里的用法类似，现在在默认模板项目的基础上，把一些常用的改变内容记录如下：

App.vue

main.js

import Vue from 'vue'
    import App from './App'
    
    /* 例：导入Vuex store */
    import store from './store'
    Vue.prototype.$store = store
    
    /* 例：导入uView */
    import uView from "uview-ui";
    Vue.use(uView);
    
    Vue.config.productionTip = false
    
    App.mpType = 'app'
    
    const app = new Vue({ 
    	...App,
    	store
    })
    app.$mount()

store里的index.js

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    const store = new Vuex.Store({ 
        state: { 
    		isLogin: false,
    	},
        mutations: { 
    		loginSuccess(state){ 
    			state.isLogin = true;
    		},
    	},
    	actions:{ 
    		login({  commit, state }){ 
    			if(state.isLogin){ 
    				console.warn("已经登录，不能重复登录！");
    				return;
    			}
    			commit('loginSuccess');
    		},
    	},
    })
    export default store

![在这里插入图片描述][20201208101153960.png]  
如果您阅读到这里，真的没学过Vue，建议还是先系统的学习一下Vue，可以参考我的专栏：[Vue][]。在这里，Vuex，App.vue，main.js中，各部分的作用和内容，就不在这里赘述了。如果无心学习Vue，这么记当然也可以。具体的生命周期，之后还会提到。

--------------------

## manifest.json ##

在之前配置各种相关内容时，自动跳转到的配置信息界面，就是这个json文件。如果使用HBuiderX打开，它会是这种界面信息，而如果是用其它开发工具打开，它会是一串代码，但内容是相同的。（当然，你可以考虑从其它开发工具修改它）

对比：  
![在这里插入图片描述][2020120810215124.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 8]  
在最后发行打包的时候，这个文件的内容还需要配置一些内容，比如App图标配置，广告配置等。网上也能找到相关教程，在这里就不介绍了。

--------------------

## uni.scss ##

具体的说明，在文件中已经说明，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 9]  
因此，我们想自定义主题的时候，就可以在这里设置相关颜色信息配置。

--------------------

## pages.json ##

用于设置应用的状态栏、导航条、标题、窗口背景色等。

在这里就简单介绍几个常用的，其它具体的看文档作出修改即可，[详细文档][Link 3]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigationBarBackgroundColor</td> 
   <td>HexColor</td> 
   <td>#F7F7F7</td> 
   <td>导航栏背景颜色（同状态栏背景色）</td> 
  </tr> 
  <tr> 
   <td>navigationBarTextStyle</td> 
   <td>String</td> 
   <td>white</td> 
   <td>导航栏标题颜色及状态栏前景颜色，仅支持 black/white</td> 
  </tr> 
  <tr> 
   <td>navigationBarTitleText</td> 
   <td>String</td> 
   <td></td> 
   <td>导航栏标题文字内容</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>#ffffff</td> 
   <td>窗口的背景色</td> 
  </tr> 
  <tr> 
   <td>backgroundTextStyle</td> 
   <td>String</td> 
   <td>dark</td> 
   <td>下拉 loading 的样式，仅支持 dark / light</td> 
  </tr> 
  <tr> 
   <td>enablePullDownRefresh</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否开启下拉刷新，详见<a href="https://uniapp.dcloud.io/use?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f" rel="nofollow">页面生命周期</a>。</td> 
  </tr> 
  <tr> 
   <td>onReachBottomDistance</td> 
   <td>Number</td> 
   <td>50</td> 
   <td>页面上拉触底事件触发时距页面底部距离，单位只支持px，详见<a href="https://uniapp.dcloud.io/use?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f" rel="nofollow">页面生命周期</a></td> 
  </tr> 
 </tbody> 
</table>

{ 
    	"pages": [{ 
    		"path": "pages/index/index",
    		"style": { 
    			"navigationBarTitleText": "uni-ui基础项目"
    		}
    	}],
    	"globalStyle": {  // 全局配置：如果pages页面配置有同名配置，全局配置将失效
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#007AFF",
    		"backgroundColor": "#70B575",	// 窗口背景色，当页面下拉时才能看到
    		"enablePullDownRefresh": true,	// 开启下拉（只有在小程序开发工具才能看到效果）
    		"backgroundTextStyle": "light"
    	}
    }

![在这里插入图片描述][2020121009402481.png]（小程序下拉刷新）  
![在这里插入图片描述][20201210100321912.png]（h5下拉刷新）

然后要说的是，如果我们开发的是小程序，因为小程序各平台不同，有些用法还是会有差异的，如果遇到问题建议查阅官方文档！除此以外，开发小程序还是建议用各小程序开发工具，笔者之前只是从网页看效果，但是很多效果都看不到，最后后知后觉发现少做了很多功能。

简单对比：  
![在这里插入图片描述][20201210092724199.png]（小程序）  
![在这里插入图片描述][20201210092538615.png]（h5页面）

--------------------

### 页面配置 ###

现在我们新建了一个页面（组件），我们接下来看如何为其进行配置。  
![在这里插入图片描述][20201210094531505.png]  
我们在message里随便写点内容：

然后去page.json中配置：

{ 
    	"pages": [// pages数组中第一项表示应用启动页
    		{ 
    			"path": "pages/message/message"
    		},
    		{ 
    			"path": "pages/index/index",
    			"style": { 
    				"navigationBarTitleText": "uni-ui基础项目"
    			}
    		}
    	],
    	"globalStyle": {  // 全局配置：如果页面配置有同名配置，全局配置将失效
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#007AFF",
    		"backgroundColor": "#70B575",	// 窗口背景色，当页面下拉时才能看到
    		"enablePullDownRefresh": true,	// 开启下拉（只有在小程序开发工具才能看到效果）
    		"backgroundTextStyle": "light"
    	}
    }

看效果：  
![在这里插入图片描述][20201210094929553.png]  
注意： pages数组中第一项表示应用启动页。（页面跳转之后再聊）

说明：虽然小程序暂时没法跳转页面，但是在浏览器中我们可以通过修改路径，进入不同的页面。（之前虽然说过，页面看效果要比小程序少了些功能，但是如果是项目开发，我们不可能等其它同事将上一页面开发完，再去做跳转后的页面，所以用浏览器直接进入跳转后页面，也是必要的）  
![在这里插入图片描述][20201210095342877.png]  
![在这里插入图片描述][2020121009540275.png]  
而且还出现了回退功能，点击就可回到上一路径。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 10]

--------------------

然后pages里每个页面的style配置和全局配置，部分内容还是有区别的，详细的配置就不再演示了，因为内容很多，而且配置也没什么难度，大家需要改变时，参考[官方文档][Link 4]即可。

在配置里，还需要介绍一个需要注意的内容：我们可以为其设置编译到不同平台的特定样式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 11]  
以h5刚才的下拉刷新为例：

看效果：  
![在这里插入图片描述][20201210100653410.png]

--------------------

### tabbar的配置 ###

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。[官方文档][Link 5]

**Tips**

*  当设置 position 为 top 时，将不会显示 icon，并且 top 值仅微信小程序支持
 *  tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

**属性说明：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>默认值</th> 
   <th>描述</th> 
   <th>平台差异说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td></td> 
   <td>tab 上的文字默认颜色</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>selectedColor</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td></td> 
   <td>tab 上的文字选中时的颜色</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td></td> 
   <td>tab 的背景色</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>borderStyle</td> 
   <td>String</td> 
   <td>否</td> 
   <td>black</td> 
   <td>tabbar 上边框的颜色，仅支持 black/white</td> 
   <td>App 2.3.4+ 支持其他颜色值</td> 
  </tr> 
  <tr> 
   <td>list</td> 
   <td>Array</td> 
   <td>是</td> 
   <td></td> 
   <td>tab 的列表，详见 list 属性说明，最少2个、最多5个 tab</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>String</td> 
   <td>否</td> 
   <td>bottom</td> 
   <td>可选值 bottom、top</td> 
   <td>top 值仅微信小程序支持</td> 
  </tr> 
 </tbody> 
</table>

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pagePath</td> 
   <td>String</td> 
   <td>是</td> 
   <td>页面路径，必须在 pages 中先定义</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>String</td> 
   <td>是</td> 
   <td>tab 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标</td> 
  </tr> 
  <tr> 
   <td>iconPath</td> 
   <td>String</td> 
   <td>否</td> 
   <td>图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标</td> 
  </tr> 
  <tr> 
   <td>selectedIconPath</td> 
   <td>String</td> 
   <td>否</td> 
   <td>选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效</td> 
  </tr> 
 </tbody> 
</table>

例：

{ 
    	"pages": [// pages数组中第一项表示应用启动页
    		{ 
    			"path": "pages/message/message",
    			"style":{ 
    				"navigationBarTitleText": "信息页",
    				"h5":{ 
    					"pullToRefresh":{ 
    						"color": "#7D26CD"
    					}
    				}
    			}
    		},
    		{ 
    			"path": "pages/index/index",
    			"style": { 
    				"navigationBarTitleText": "uni-ui基础项目"
    			}
    		}
    	],
    	"globalStyle": {  // 全局配置：如果页面配置有同名配置，全局配置将失效
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#007AFF",
    		"backgroundColor": "#70B575",	// 窗口背景色，当页面下拉时才能看到
    		"enablePullDownRefresh": true,	// 开启下拉（只有在小程序开发工具才能看到效果）
    		"backgroundTextStyle": "light"
    	},
    	"tabBar": { 
    		"color": "#A0522D",
    		"selectedColor": "#B3EE3A",
    		"backgroundColor": "#ffffff",
    		"borderStyle": "black",
    		"list": [
    			{ 
    				"text": "首页",
    				"pagePath":"pages/index/index",
    				"iconPath":"static/tabs/re.png",
    				"selectedIconPath":"static/tabs/re_c.png"
    			},
    			{ 
    				"text": "信息",
    				"pagePath":"pages/message/message",
    				"iconPath":"static/tabs/re.png",
    				"selectedIconPath":"static/tabs/re_c.png"
    			}
    		]
    	}
    }

看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 12]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 13]  
然后就是：当设置 position 为 top 时，将不会显示 icon，需要注意，top仅微信小程序支持

{ 
    	"pages": [// pages数组中第一项表示应用启动页
    		{ 
    			"path": "pages/message/message",
    			"style":{ 
    				"navigationBarTitleText": "信息页",
    				"h5":{ 
    					"pullToRefresh":{ 
    						"color": "#7D26CD"
    					}
    				}
    			}
    		},
    		{ 
    			"path": "pages/index/index",
    			"style": { 
    				"navigationBarTitleText": "uni-ui基础项目"
    			}
    		}
    	],
    	"globalStyle": {  // 全局配置：如果页面配置有同名配置，全局配置将失效
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#007AFF",
    		"backgroundColor": "#70B575",	// 窗口背景色，当页面下拉时才能看到
    		"enablePullDownRefresh": true,	// 开启下拉（只有在小程序开发工具才能看到效果）
    		"backgroundTextStyle": "light"
    	},
    	"tabBar": { 
    		"color": "#A0522D",
    		"selectedColor": "#B3EE3A",
    		"backgroundColor": "#ffffff",
    		"borderStyle": "black",
    		"position": "top", // position
    		"list": [
    			{ 
    				"text": "首页",
    				"pagePath":"pages/index/index",
    				"iconPath":"static/tabs/re.png",
    				"selectedIconPath":"static/tabs/re_c.png"
    			},
    			{ 
    				"text": "信息",
    				"pagePath":"pages/message/message",
    				"iconPath":"static/tabs/re.png",
    				"selectedIconPath":"static/tabs/re_c.png"
    			}
    		]
    	}
    }

看效果：  
![在这里插入图片描述][20201210102820830.png]

--------------------

# condition启动模式配置 #

在上面提到过，浏览器可以通过修改路径跳转页面，小程序是没办法这么做的，我们不可能每次都通过将页面放到pages数组中第一项来解决这个问题。那么除了之后添加事件跳转页面外，我们还可以通过对condition启动模式的配置来修改。

这个启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

**属性说明：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>current</td> 
   <td>Number</td> 
   <td>是</td> 
   <td>当前激活的模式，list节点的索引值</td> 
  </tr> 
  <tr> 
   <td>list</td> 
   <td>Array</td> 
   <td>是</td> 
   <td>启动模式列表</td> 
  </tr> 
 </tbody> 
</table>

**list说明：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>String</td> 
   <td>是</td> 
   <td>启动模式名称</td> 
  </tr> 
  <tr> 
   <td>path</td> 
   <td>String</td> 
   <td>是</td> 
   <td>启动页面路径</td> 
  </tr> 
  <tr> 
   <td>query</td> 
   <td>String</td> 
   <td>否</td> 
   <td>启动参数，可在页面的 <a href="https://uniapp.dcloud.io/use?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f" rel="nofollow">onLoad</a> 函数里获得</td> 
  </tr> 
 </tbody> 
</table>

{ 
    	"pages": [// pages数组中第一项表示应用启动页
    		{ 
    			"path": "pages/message/message",
    			"style":{ 
    				"navigationBarTitleText": "信息页",
    				"h5":{ 
    					"pullToRefresh":{ 
    						"color": "#7D26CD"
    					}
    				}
    			}
    		},
    		{ 
    			"path": "pages/index/index",
    			"style": { 
    				"navigationBarTitleText": "uni-ui基础项目"
    			}
    		},
    		{ 
    			"path": "pages/detail/detail",
    			"style": { 
    				"navigationBarTitleText": "详情页"
    			}
    		}
    	],
    	"globalStyle": {  // 全局配置：如果页面配置有同名配置，全局配置将失效
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#007AFF",
    		"backgroundColor": "#70B575",	// 窗口背景色，当页面下拉时才能看到
    		"enablePullDownRefresh": true,	// 开启下拉（只有在小程序开发工具才能看到效果）
    		"backgroundTextStyle": "light"
    	},
    	"tabBar": { 
    		"color": "#A0522D",
    		"selectedColor": "#B3EE3A",
    		"backgroundColor": "#ffffff",
    		"borderStyle": "black",
    		"list": [
    			{ 
    				"text": "首页",
    				"pagePath":"pages/index/index",
    				"iconPath":"static/tabs/re.png",
    				"selectedIconPath":"static/tabs/re_c.png"
    			},
    			{ 
    				"text": "信息",
    				"pagePath":"pages/message/message",
    				"iconPath":"static/tabs/re.png",
    				"selectedIconPath":"static/tabs/re_c.png"
    			}
    		]
    	},
    	"condition": { 
    		"current": 0,
    		"list": [
    			{ 
    				"name": "详情页",
    				"path": "pages/detail/detail",
    				"query": "id=80"
    			}
    		]
    	}
    }

当我们配置好了condition之后，我们在微信小程序开发工具中就可以看到一个信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 14]  
点击后，就可以快速进入页面了。  
![在这里插入图片描述][20201210104002574.png]

然后再说一下这里的query参数。比如我们要直接进入详情页，那在进入详情页前的某列表中，肯定需要传一个参数进来，以便在进入详情页后调接口，获取相关信息，这里的query就是这么一个作用（暂时用不上）。

--------------------

# 开发规范简单介绍 #

为了实现多端兼容，综合考虑编译速度、运行性能等因素，`uni-app` 约定了如下开发规范：

*  页面文件遵循 [Vue 单文件组件 (SFC) 规范][Vue _ _SFC_]
 *  组件标签靠近小程序规范，详见[uni-app 组件规范][uni-app 1]
 *  接口能力（JS API）靠近微信小程序规范，但需将前缀 `wx` 替换为 `uni`，详见[uni-app接口规范][uni-app 2]
 *  数据绑定及事件处理同 `Vue.js` 规范，同时补充了App及页面的生命周期
 *  为兼容多端运行，建议使用flex布局进行开发

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_enter]: /images/20221120/eae3386a46294860acbe7e2261d2c12c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_piccenter]: /images/20221120/4f5a3a033b0b439fbc5b24e1176392ba.png
[HBuiderX]: https://www.dcloud.io/hbuilderx.html
[uni-app]: https://uniapp.dcloud.io/README
[uni-ui]: https://uniapp.dcloud.io/component/README?id=uniui
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]: /images/20221120/90085cb85cd744d098c26e048607ecf3.png
[20201207102857647.png]: https://img-blog.csdnimg.cn/20201207102857647.png
[20201207102754946.png]: https://img-blog.csdnimg.cn/20201207102754946.png
[20201207102959553.png]: https://img-blog.csdnimg.cn/20201207102959553.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201212123824339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201212123900673.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201207103154989.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener]: https://img-blog.csdnimg.cn/20201016162521346.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70#pic_cener
[20201207104938314.png]: https://img-blog.csdnimg.cn/20201207104938314.png
[Link 1]: https://mp.weixin.qq.com/
[20201207110116942.png]: https://img-blog.csdnimg.cn/20201207110116942.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201207110244188.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[20201207110342611.png]: https://img-blog.csdnimg.cn/20201207110342611.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201207112541655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[Link 2]: https://www.php.cn/weixin-kaifa-453822.html
[20201208091102328.png]: https://img-blog.csdnimg.cn/20201208091102328.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201207112758713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201207123629548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[20201208091631823.png]: https://img-blog.csdnimg.cn/20201208091631823.png
[20201208101153960.png]: https://img-blog.csdnimg.cn/20201208101153960.png
[Vue]: https://blog.csdn.net/qq_45613931/category_9941207.html
[2020120810215124.png]: https://img-blog.csdnimg.cn/2020120810215124.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201208102250398.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201208102826199.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[Link 3]: https://uniapp.dcloud.io/collocation/pages?id=globalstyle
[2020121009402481.png]: https://img-blog.csdnimg.cn/2020121009402481.png
[20201210100321912.png]: https://img-blog.csdnimg.cn/20201210100321912.png
[20201210092724199.png]: https://img-blog.csdnimg.cn/20201210092724199.png
[20201210092538615.png]: https://img-blog.csdnimg.cn/20201210092538615.png
[20201210094531505.png]: https://img-blog.csdnimg.cn/20201210094531505.png
[20201210094929553.png]: https://img-blog.csdnimg.cn/20201210094929553.png
[20201210095342877.png]: https://img-blog.csdnimg.cn/20201210095342877.png
[2020121009540275.png]: https://img-blog.csdnimg.cn/2020121009540275.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20201210095433336.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[Link 4]: https://uniapp.dcloud.io/collocation/pages?id=style
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20201210100442197.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[20201210100653410.png]: https://img-blog.csdnimg.cn/20201210100653410.png
[Link 5]: https://uniapp.dcloud.io/collocation/pages?id=tabbar
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20201210102439447.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20201210102454318.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[20201210102820830.png]: https://img-blog.csdnimg.cn/20201210102820830.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/2020121010394244.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[20201210104002574.png]: https://img-blog.csdnimg.cn/20201210104002574.png
[Vue _ _SFC_]: https://vue-loader.vuejs.org/zh/spec.html
[uni-app 1]: https://uniapp.dcloud.io/component/README
[uni-app 2]: https://uniapp.dcloud.io/api/README