1.5.3 创建项目开发目录

1.新建项目

依次单击HBuilderX顶部工具栏中的【文件】→【新建】→【项目】，打开新建项目界面，选择“uni-app”项目，输入项目名称，选择存放路径（项目名称与存放路径中应避免出现中文及特殊字符），然后进行创建，如图1-11所示。

2.认识项目目录

在项目创建完成后，系统会自动帮助用户生成一些目录和文件，即项目的初始目录和文件，比如静态资源目录、页面文件目录、入口页面文件、项目配置文件等，后面会在这些目录和文件的基础上完成“启嘉校园”项目的开发。

在创建项目时，选择不同的模板，生成的项目目录和文件是不同的，在本项目中，选择的是uni-app的默认模板。下面介绍一下使用默认模板创建的各个项目目录和文件的作用，如图1-12所示。

各项目初始目录和文件在开发中都有明确的用途，在开发时务必注意以下几点。

• 在编译到任意平台时，static目录下的文件均会被完整打包进去且不会编译，非static目录下的文件（Vue、JavaScript、CSS等文件）只有被引用时才会被打包、编译进去。

• static目录下的JavaScript文件不会被编译，如果里面有ECMAScript 6（ES6）的代码，且不经过转换就直接运行，那么在手机设备上会报错。

• CSS、Less、Sass等资源不要放在static目录下，建议将这些公用的资源放在自建的common目录下。

• HBuilderX 1.9.0+支持在根目录下创建ext.json、sitemap.json等小程序需要的文件。

3.运行项目

使用HBuilderX开发uni-app项目时可以实时运行项目并预览效果，如运行项目到微信小程序、百度小程序、App和H5应用等。由于“启嘉校园”项目将发布到微信小程序，因此本书在讲解时将项目运行到微信小程序来查看任务实现效果（在实际开发中运行到最终预发布的平台即可）。

通过HBuilderX的“运行到小程序模拟器”功能可以运行项目并预览效果，但实际上HBuilderX本身并不能真正地运行小程序，而需要借助小程序运营商提供的开发者工具来实现。运行项目到微信小程序则需要借助微信开发者工具，请确保已安装微信开发者工具。

在完成微信开发者工具的安装后，需要在HBuilderX中配置开发者工具的安装路径，依次单击HBuilderX顶部菜单栏中的【运行】→【运行到小程序模拟器】→【运行设置】，打开配置界面，然后单击“浏览”按钮，选择微信开发者工具安装路径。

想要使用HBuilderX的“运行到小程序模拟器”功能，还需要开启微信开发者工具的服务端口选项，否则HBuilderX会因无法获取微信开发者工具的服务权限而提示“工具的服务端口已关闭”。依次单击微信开发者工具顶部菜单栏中的【设置】→【安全设置】，开启“服务端口”，如图1-13所示。

完成上面的配置之后，便可以通过依次选择HBuilderX顶部菜单栏中的【运行】→【运行到小程序模拟器】→【微信开发者工具】调用微信开发者工具来预览项目效果。需要注意的是，当在项目中创建了新的目录或文件后，需要重新运行项目才能使这些新建的目录或文件生效。项目预览效果如图1-14所示。