学习使用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项目的调试,运行,发布等的内容。关注我,将为你每周更新移动端小程序相关的知识。