移动端开发基础环境配置

Posted 2021-03-04 lenbor

学习使用uni-app之前，环境首先要配好，开发者需先下载安装工具。

 

HBuilderX安装

官网下载链接：https://www.dcloud.io/hbuilderx.html

进入官网后点击DOWNLOAD，打开如下界面:

 初学者选择标准版即可，下载完成，开始安装，一路点击下一步，直至安装完成。

 

 

开发者工具配置

如果没有开发者工具我们就没有办法调试小程序项目（因为Hbuilder没有自己的调试工具，只有内置的浏览器），所以在我们开发之前，必须要安装开发者工具。

下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly.html

打开上面的地址，进入微信官方文档，点击下载，按照自己的机型，安装合适的版本。

安装完成后，需要对微信开发者工具进行配置。

配置步骤比较简单，打开下载好的微信开发者工具，使用微信扫描二维码登录。

登录之后打开如下界面:

 

为了uniapp编译的项目能够在开发者工具上运行，在打开的设置框中只需要开启服务端口就可以了，不然无法使用调试及测试显示。

 

 

 

创建uni-app项目

打开HBuilder X,再点击工具栏里的文件 -> 新建 -> 项目。

打开新建项目弹出框，选择单选按钮uni-app，输入项目名称，选择要存储的位置，点击创建 ，即可成功创建。如果创建前选择了模板里面的Hello uni-app， 即可体验官方示例。

以下为uni-app新建项目的目录结构介绍

 

uni-app项目如果要开发运行，还必须安装一些基本的插件。Uni-app有自己的插件库，在”工具->插件安装”弹出框中找到需要安装的插件直接安装即可。

 以上内容是学习使用uni-app开发小程序项目的基础，只有了解了以上内容，才能开始开发项目。下期将为大家更新uni-app项目的调试，运行，发布等的内容。关注我，将为你每周更新移动端小程序相关的知识。