购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.5 任务实施

本任务将完成项目开发环境的搭建,分为前端开发环境和后端开发环境两部分,对于前端开发环境,主要进行开发工具的安装,对于后端开发环境,则进行接口和数据库的安装与部署。为了方便读者学习和实操,“启嘉校园”项目开发环境系统选择Windows操作系统。

了解uni-app 05之uni-app优势

1.5.1 搭建前端开发环境

1.安装HBuilderX

“工欲善其事,必先利其器”,选择一个合适的开发工具可以大幅提高开发效率和软件质量。“启嘉校园”项目使用uni-app官方推荐的HBuilderX作为开发工具。HBuilderX是uni-app官方团队推荐使用的开发工具,内置相关环境,安装即可使用,无须配置Node.js。

(1)下载安装包

使用浏览器打开官方下载地址https://www.dcloud.io/hbuilderx.html,单击“Download for Windows”下载按钮,会默认下载适配当前系统的最新版本的HBuilderX,如图1-6所示。

图1-6 HBuilderX下载页面

(2)解压缩安装包

uni-app基础知识01之基本规范

将下载的HBuilderX压缩包解压缩到系统本地磁盘中,注意存放路径不能包含中文,如图1-7所示。

图1-7 HBuilderX安装目录

(3)创建快捷方式

在解压缩后的文件夹中找到HBuilderX.exe,右键单击它,在弹出的快捷菜单中依次选择“发送到”→“桌面快捷方式”以创建桌面快捷方式,方便后期快速打开开发工具,如图1-8所示。

图1-8 创建桌面快捷方式

(4)打开HBuilderX

双击桌面上的HBuilderX快捷方式,若打开如图1-9所示页面,则说明HBuilderX安装完成。

uni-app基础知识02之HBui-lder介绍及安装

图1-9 HBuilderX启动界面

若解压缩完成后无法打开HBuilderX,则可参考HBuilderX Windows启动问题排查指南https://book.change.tm/u/a10。

2.安装微信开发者工具

微信开发者工具是微信官方推出的一款开发工具,能够帮助开发者简单和高效地开发和调试微信小程序,集成了公众号网页调试和小程序调试两种开发模式。使用HBuilderX开发和调试微信小程序项目,需要依赖于微信开发者工具完成。

(1)下载安装包

使用浏览器打开官方下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html,选择稳定版并根据系统配置下载相应安装包,如图1-10所示。

图1-10 微信开发者工具下载

(2)安装微信开发者工具

双击下载的EXE安装包,根据提示进行安装即可。

至此,已经完成了HBuilderX和微信开发者工具的安装,在后面实施过程中将对这两个开发工具进行配置,使HBuilderX能够调用微信开发者工具进行项目调试。

1.5.2 搭建后端开发环境

为了实现前、后端数据交互,还需要在本地部署“启嘉校园”项目的后端程序,读者只需要成功完成部署并了解如何使用,无须关注其实现逻辑。后端开发环境包括Java程序和MySQL数据库,为方便读者部署,这里将其打包成EXE格式的安装包,安装步骤如下。

搭建后端开发环境

1.下载安装包

使用浏览器打开下载页面并下载EXE安装包,下载地址为https://book.change.tm/01/java.html。

2.检查安装环境

安装前需要先检查本地系统安装环境是否符合以下几点要求。

● 检查系统3306端口是否被占用,如果被其他程序占用,则需要关闭占用程序或将其切换至其他端口。

● Java程序和MySQL数据库安装路径分别为C:\Program Files\java与D:\mysql,安装前请确保安装路径未创建,若已创建,则继续安装将覆盖原文件夹内容,注意做好转移和备份工作。

● 安装过程会自动修改系统环境变量,此过程可能会被部分杀毒软件识别成恶意程序篡改系统配置。如果被杀毒软件拦截,那么关闭杀毒软件或选择信任安装程序。

3.安装后端开发环境

双击下载的EXE安装包,将自动进行安装,安装成功后会提示“安装成功”。

1.5.3 创建项目开发目录

创建uni-app项目

1.新建项目

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

uni-app基础知识03之初始化uni-app项目

图1-11 设置项目名称及存放路径

2.认识项目目录

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

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

图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应用等。由于“启嘉校园”项目将发布到微信小程序,因此本书在讲解时将项目运行到微信小程序来查看任务实现效果(在实际开发中运行到最终预发布的平台即可)。

uni-app基础知识04之项目重点文件介绍

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

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

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

图1-13 开启“服务端口”

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

图1-14 项目预览效果 rj8gg3xm2Y08el1ER7ruAKdGi2/GCUN7moo/pqFRO1B+yMn3n0pOVAMwNj4ZARaB

点击中间区域
呼出菜单
上一章
目录
下一章
×