对于uniapp框架的理解和学习

1. uniapp框架的定位   

• uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台, 真正的一套代码多端发行。

2. uniapp框架的开发技术栈 

• 使用了vue.js技术栈开发，融入了微信小程序的开发技术,组件api与微信小程序一致， vue的语法，微信小程序的api,  内嵌mpvue框架

3. uniapp的开发规范

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

4，全局文件解释

• page.json 全局配置文件，对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等，类似微信小程序中app.json的页面管理部分，注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。

以下是一个包含了所有配置选项的 pages.json 文件：

{
   "pages": [{
		"path": "pages/home/home",
		"style": {
			"navigationBarTitleText": "黑马优购",
			"enablePullDownRefresh": false
		}

	}, {
		"path": "pages/cate/cate",
		"style": {
			"navigationBarTitleText": "黑马优购",
			"enablePullDownRefresh": false
		}

	}, {
		"path": "pages/cart/cart",
		"style": {
			"navigationBarTitleText": "黑马优购",
			"enablePullDownRefresh": false
		}

	}, {
		"path": "pages/my/my",
		"style": {
			"navigationBarTitleText": "黑马优购",
			"enablePullDownRefresh": false
		}
	}],

	"subPackages": [{
		"root": "subpkg", // 分包的根目录
		"pages": [{
			"path": "goods_detail/goods_detail",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}

		}, {
			"path": "goods_list/goods_list",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false,
				"onReachBottomDistance": 150, //上拉触底的距离
				"enablePullDownRefresh": true,// 开启下拉刷新
				"backgroundColor": "#F8F8F8" //下拉刷新背景色
			}

		}, {
			"path": "search/search",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}
		}] // 分包的页面
	}],

	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "演示",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents":{
			"collapse-tree-item":"/components/collapse-tree-item"
		},
		"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
		"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
		"rpxCalcMaxDeviceWidth": 960,
		"rpxCalcBaseDeviceWidth": 375,
		"rpxCalcIncludeWidth": 750
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"height": "50px",
		"fontSize": "10px",
		"iconWidth": "24px",
		"spacing": "3px",
    "iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
	   "list": [{
				"pagePath": "pages/home/home",
				"text": "首页",
				"iconPath": "static/tab_icons/home.png",
				"selectedIconPath": "static/tab_icons/home-active.png"
			},
			{
				"pagePath": "pages/cate/cate",
				"text": "分类",
				"iconPath": "static/tab_icons/cate.png",
				"selectedIconPath": "static/tab_icons/cate-active.png"
			},
			{
				"pagePath": "pages/cart/cart",
				"text": "购物车",
				"iconPath": "static/tab_icons/cart.png",
				"selectedIconPath": "static/tab_icons/cart-active.png"
			},
			{
				"pagePath": "pages/my/my",
				"text": "我的",
				"iconPath": "static/tab_icons/my.png",
				"selectedIconPath": "static/tab_icons/my-active.png"
			}],
		"midButton": {
			"width": "80px",
			"height": "50px",
			"text": "文字",
			"iconPath": "static/image/midButton_iconPath.png",
			"iconWidth": "24px",
			"backgroundImage": "static/image/midButton_backgroundImage.png"
		}
	},
  "easycom": {
    "autoscan": true, //是否自动扫描组件
    "custom": {//自定义扫描规则
      "^uni-(.*)": "@/components/uni-$1.vue"
    }
  },
  "topWindow": {
    "path": "responsive/top-window.vue",
    "style": {
      "height": "44px"
    }
  },
  "leftWindow": {
    "path": "responsive/left-window.vue",
    "style": {
      "width": "300px"
    }
  },
  "rightWindow": {
    "path": "responsive/right-window.vue",
    "style": {
      "width": "300px"
    },
    "matchMedia": {
      "minWidth": 768
    }
  }
}

配置项列表 

 各个配置项详解：见链接uni-app官网