uni app开发小程序准备阶段

1.软件安装

在开始之前，开发人员需要下载并安装以下工具：

HBuilderX：

根据需要安装以下开发工具：

微信小程序开发工具安装

支付宝小程序开发工具安装

百度小程序开发工具安装

字节跳动小程序开发工具

2.HBuilderX运行环境配置

单击工具栏中的工具->设置->运行配置：

对于运行配置，有三个部分：手机/模拟器运行配置、浏览器运行配置和小程序运行配置。下面是浏览器运行配置和小程序运行配置的简要说明。至于手机/模拟器运行配置，稍后将更新。

2.1浏览器运行配置

先决条件：您已经安装了相应的Firefox浏览器和Chrome浏览器。

-1： 在Chrome浏览器的安装路径中：填写Chrome的安装路径（转到Chrome.exe所在的文件夹）

-2： 在Firefox浏览器安装路径中：填写Firefox的安装路径（转到Firefox.exe所在的文件夹）

配置完成后，单击工具栏中的运行->；运行到浏览器并选择相应的浏览器，如图所示：

浏览器正在运行

2.2小程序运行配置

uni app依赖于小程序开发工具，配置时需要指定小程序开发的安装目录。

例如，我的微信小程序开发工具的安装路径是：

微信网络开发者工具安装路径.png

HBuilderX中的配置为：

正在配置路径。HBuilderX中的png

同样，百度开发工具路径、支付宝小程序开发工具路径和字节跳动小程序开发路径的配置与微信小程序相同，只需参考即可。

3.编辑器设置

单击工具栏->设置->编辑器配置中的工具：

然后，在打开的编辑器设置的右侧，找到[Prompt for Enable px to upx]（uni-app items生效），并填写px与upx的比例。

转换公式：设计草图1px/设计草图基础宽度=框架样式1upx/750upx

（1） ：如果设计草图的宽度为640px，设计草图上元素A的宽度为100px，那么uniApp中元素A的长度应设置为750*100/640，结果为117upx。

（2） ：如果设计稿的宽度为375px，设计稿上的元素B的宽度为200px，那么uniApp中的元素B宽度应设置为750*200/375，结果为400upx。

喜欢是最好的支持，关注是最大的鼓励。亲爱的朋友们，很荣幸在建树见到你们。