uni-app学习（一）

用处

使用Vue.js框架，可以使代码发布到多种平台，减少学习成本和开发成本。

环境搭建 工具

HbuilderX   下载地址：HBuilderX 文档

微信开发者工具 下载地址：微信开发者工具下载_微信开发者工具官方版下载[制作工具]-下载之家

项目创建

打开HbuiderX 点击新建 项目 选择uni-app 进行创建

​

创建成功后自动生成的文件名等结构

​

 运行文件---点击运行，内置浏览器（需要下载）

​

运行成功后点击local后面的网址，进入网址按f12进入网页的开发者模式（需要在网页设置中打开）-----点击如图所示的图标，就可以看到页面在移动端的显示格式。

​

创建新的页面，在pages文件夹中点击有点，新建页面，注意：勾选下方在pages.json中注册

 微信开发者工具的使用，下载好以后点击运行小程序模拟器中的微信开发者工具，配置工具的安装目录

​

配置后，手动打开微信开发者工具进行服务器端口的开启

​

打开后使用微信开发者工具运行程序

​

内部一些标签解释

┌─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            配置页面路由、导航条、选项卡等页面类信息

 uni-app文档详解 pages.json--uni-app官网（详见）

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

​

 包含了所有配置选项的pages.json代码如下：

{
	"pages": [{
		"path": "pages/component/index",
		"style": {
			"navigationBarTitleText": "组件"
		}
	}, {
		"path": "pages/API/index",
		"style": {
			"navigationBarTitleText": "接口"
		}
	}, {
		"path": "pages/component/view/index",
		"style": {
			"navigationBarTitleText": "view"
		}
	}],
	"condition": { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式（list 的索引项）
		"list": [{
			"name": "test", //模式名称
			"path": "pages/component/view/index" //启动页面，必选
		}]
	},
	"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/component/index",
			"iconPath": "static/image/icon_component.png",
			"selectedIconPath": "static/image/icon_component_HL.png",
			"text": "组件",
      "iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc
        "text": "\ue102",
        "selectedText": "\ue103",
        "fontSize": "17px",
        "color": "#000000",
        "selectedColor": "#0000ff"
      }
		}, {
			"pagePath": "pages/API/index",
			"iconPath": "static/image/icon_API.png",
			"selectedIconPath": "static/image/icon_API_HL.png",
			"text": "接口"
		}],
		"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-.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
    }
  }
}

pages.json的使用以及部分注释

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index", //作用域
			"style": {
				"navigationBarTitleText": "uni-app", //作用于当前页面的样式
				"enablePullDownRefresh": true
			}
		},
		{
		    "path" : "pages/index/myapp/myapp",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "个人中心",
				"navigationBarBackgroundColor":"#007AFF",
		        "enablePullDownRefresh": true //设置是否开启下拉刷新
		    }
		    
		}
    ],
	"globalStyle": {   //全局样式
		"navigationBarTextStyle": "black", //文本颜色
		"navigationBarTitleText": "个人中心",//导航栏的文字
		"navigationBarBackgroundColor": "#F7F7F7",//导航栏的背景颜色
		"backgroundColor": "#FFFFFF"//下拉窗口背景颜色
	},
	"tabBar":{//设置底部样式
		"color":"#333333",//文字默认颜色
		"selectedColor":"#007AFF",//选中的文字颜色
		"backgroundColor":"#C0C0C0",//底部栏的背景颜色
		"borderStyle":"white",//边框的颜色，可选值 black/white
		"list":[//切换的页面，底部切换的页面
			{
			"pagePath":"pages/index/index", //首页面pages中的地址
			"text":"首页",//图标下的文字显示
			"iconPath":"./static/tab/index.png",//未选中时图标
			"selectedIconPath":"./static/tab/index_sel.png"//选中的图标
		},
		{
			"pagePath":"pages/index/myapp/myapp",
			"text":"个人中心",
			"iconPath":"./static/tab/my.png",
			"selectedIconPath":"./static/tab/my_sel.png"
		}
		]
	}
}

manifest.json--uni-app官网 （详见）

应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。

对于pages文件夹下的vue的文件的编写---https://uniapp.dcloud.io/component/navigator.html
 

 姓名，性别，年龄信息的输入获取与存入列表，并输出