小程序：uniapp 第二弹(配置项)

小程序：uniapp 第二弹(配置项)

开发目录

	┌─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

  • 分包预载配置