一、使用HBuilder创建项目

1、HBuilder下载

www.dcloud.io/hbuilderx.h…

下载一个压缩包，直接解压缩，不需要安装，把解压缩后的文件夹放到C盘或D盘中，双击应用程序便可以启动

2、创建uniapp项目

文件-新建-项目

目录结构：

二、使用HBuilder运行项目

1、运行到chrome浏览器

选中项目，点击运行-运行到浏览器-chrome

效果：

2、运行到微信小程序开发工具

运行-运行到小程序模拟器-微信开发者工具

需要设置下开发者工具的目录：

如果没有预览效果，需要把服务端口打开：

效果：

三、使用HBuilder新建一个uniapp页面

在pages目录上右击选择新建页面

新建的页面默认是在pages数组中现有页面的后面，咱们把它挪到第一个位置

	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/list/list",
			"style": {
				// "navigationBarTitleText": "列表",
				// "navigationBarTextStyle": "white",
				// "navigationBarBackgroundColor": "#83E065",
				"enablePullDownRefresh": false
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}

	]

效果：

四、uniapp响应式尺寸单位：rpx

1、为什么要使用rpx

uniapp支持的css单位：px、rpx。

设计师在提供设计图时，往往只提供一个分辨率的图（比如页面宽度为750px），在使用px时，不同宽度的手机上容易出现变形。

2、rpx的计算规则

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例：

设计稿基准宽度	元素在设计稿上的宽度	计算公式	在uni-app中的宽度
750px	100px	750 * 100 / 750	100rpx
640px	100px	750 * 100 / 640	117rpx
375px	100px	750 * 100 / 350	200rpx

一般情况下，设计稿的宽度都是750px，一般情况下dpr都是2

div h1这种语法只适合开发h5页面，不适合开发小程序和app