小程序：uni学习第二弹

小程序：uni学习第二弹

开发目录

┌─components uni-app组件目录 │ └─comp-a.vue 可复用的a组件 ├─hybrid 存放本地网页的目录 ├─platforms 存放各平台专用页面的目录 ├─pages 业务页面文件存放的目录 │ ├─index │ │ └─index.vue index页面 │ └─list │ └─list.vue list页面 ├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此 ├─wxcomponents 存放小程序组件的目录 ├─main.js Vue初始化入口文件 ├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期 ├─manifest.json 配置应用名称、appid、logo、版本等打包信息 └─pages.json 配置页面路由、导航条、选项卡等页面类信息 Tips static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。HbuilderX 1.9.0+ 支持在根目录创建 ext.json sitemap.json 文件。

配置项 pages.json

1. pages: […] (设置页面路径及窗口表现）

pages节点的第一项为应用入口页（即首页） [ { "path": "pages/component/index", "style": { "navigationBarTitleText": "组件" } }, { "path": "pages/component/index", } ] style style中配置项： 同 globalStyle中配置项一样style中配置项：会覆盖 globalStyle 中相同的配置项

2. globalStyle

globalStyle中设置的titleImage也会覆盖掉pages->style内的设置文字标题常用： - navigationBarBackgroundColor: 导航栏背景颜色(HexColor) - navigationBarTextStyle: 导航栏标题颜色及状态栏前景颜色(black/white) - navigationBarTitleText: 导航栏标题文字内容 - navigationBarShadow: 导航栏阴影 - colorType: String 阴影的颜色，支持：grey、blue、green、orange、red、yellow - navigationStyle: 导航栏样式 - backgroundColor: 窗口的背景色(HexColor) - backgroundTextStyle: dark | 下拉 loading 的样式( dark/light) - 仅 iOS 平台 - backgroundColorTop: 顶部窗口的背景色（bounce回弹区域） - backgroundColorBottom: 底部窗口的背景色（bounce回弹区域） - disableScroll: false | 为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效 - enablePullDownRefresh: false 是否开启下拉刷新 - onReachBottomDistance: number | 页面上拉触底事件触发时距页面底部距离，单位只支持px

3. tabBar

当设置 position 为 top 时，将不会显示 icon | 顶部的 tabbar 目前仅微信小程序上支持

list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序

tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花

tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad

常用属性

样式 color | selectedColor backgroundColor borderStyle | iconWidth | height fontSize | spacing position： bottom、top | ~~top 值仅微信小程序支持， 且不会显示 icon~~ midButton：中间按钮 仅在 list 项为偶数时有效 list pagePath：页面路径，必须在 pages 中先定义 text: tab 上按钮文字 - 当 postion 为 top 时， - 下列参数无效(不支持网络图片，不支持字体图标) - icon 大小限制为40kb，建议尺寸为 81px * 81px iconPath: 图片路径 selectedIconPath: 选中时的图片路径

4. condition

启动模式配置，仅开发期间生效current：number | 当前激活的模式，list节点的索引值list: array | 启动模式列表 name: 名称path: 页面路径query: 参数，可在页面的 onLoad 函数里获得

5. easycom

6. subPackages

分包加载配置，此配置为小程序的分包加载机制

7. preloadRule

分包预载配置