新手小白都能看懂的uniapp小程序项目搭建流程

新手都能看懂的uniapp小程序项目构建流程-app官方库Api的智能提示和推理。同时，我们也可以通过编辑器快速创建各种场景下的项目模板。总之，HBuilder是用uni-app开发应用程序的首选编辑器。可以访问其官网进行下载安装，点击以下链接直接跳转：Hbuilder官方下载地址2.初始化项目安装好HBuilder后，打开编辑器，点击左上角“文件”->“新建”菜单，选择“项目”，可以进入初始化项目的设置界面，界面大致如下：选择项目类型：默认选择uni-app，其他类型基本与制作小程序无关，我们不在乎；填写项目名称：建议用英文命名（当然用中文也不是不可以）；选择项目的路径：建议选择自己经常记得清楚的目录，以免以后找项目位置的麻烦；选择模板：uniapp针对不同场景提供了很多示例模板，初学者建议使用默认模板即可，内容较少，可以慢慢加减功能；Vue版本选择：是2023，当然选择Vue3，毕竟Vue3兼容Vue2；enableUniCloud：这是Uniapp集成的云，用于开发，新手不需要开启；上传代码到托管平台：即用git托管项目源码，这里可以不选。如果您需要托管，我们可以稍后自行选择。配置完成后点击确定，即可生成工程。可以看到生成的工程目录如下：在核心目录pages中，可以看到只有一个pageindex，那么如何运行呢？因为我们要开发一个微信小程序，而微信小程序官方提供了开发调试工具，所以如果要让项目运行起来，就得安装微信开发者工具。3.安装配置微信开发者工具。官方微信小程序开发文档提供了微信开发者工具的下载地址。点击以下链接直接跳转：微信开发者工具下载地址选择自己操作系统对应的版本安装即可。安装完成后，打开软件左上角菜单中的设置，选择安全设置，将服务端口设置为开放。开启服务端口是为了让HBuilder自动为我们开启微信开发者工具。很多新手也会卡在这一步，发现运行项目没有任何反应。其实这里的服务端口并没有打开。4.启动项目微信开发者工具配置完成后，我们切换到HBuilder，在左上方菜单区选择“运行”->“运行到小程序模拟器”->“微信开发者工具”。或者直接点击下方运行图标，选择微信开发者工具。点击后稍等片刻，会自动打开微信开发者工具，加载我们的项目。注意：第一次运行时，因为会安装一些依赖文件，所以会提示我们重新运行。然后再次单击它。正常启动后，控制台显示大致如下：在微信开发者工具中，也可以看到这个模板项目的界面：我们可以尝试找到pages/index/index.vue文件，在data中设置title到“你好世界”。编辑好后保存，再切换回微信开发者工具，可以看到页面也会进行热更新改动。HBuilder配置修改缩进长度为了让开发更方便，我们可以对HBuilder进行一些设置，让开发体验更好。作者喜欢2个空格的缩进，HBuilder默认是4个空格。我们可以在左上角的菜单中找到“Preferences”->“CommonSettings”，然后找到tab长度，设置4为2。保存时自动格式化代码HBuilder自带了一个代码风格的格式化功能，默认是不开启的自动保存的时候。我们可以在“首选项”->“编辑器配置”中找到“保存时自动格式化”，勾选并设置花括号不换行保存。我尝试修改Script中的代码为Vue3的setup写法，如下：原来保存后的缩进配置和自动格式化已经生效了，但是导入ref的那行代码，花括号自动换行了。这是因为HBuilder中默认设置了代码格式化插件jsbeautify。我们可以修改一下，让他保存不换行。我们可以在“首选项”->“插件配置”中找到“打开文件jsbeautifyrc.js”，点击打开，然后找到brace_style属性，将值改为“brace_style”:“collapse,preserve-inline”保存回来to在原来的页面上，删除花括号的缩进并保存。你会发现自动格式化不会让花括号再次换行。接下来，我们就可以舒舒服服的写代码了！作者简介，计算机专业出身，8+年web开发经验，深耕Vue2、Vue3技术栈多年。丰富的全栈开发经验，技能树涵盖从前端工程搭建到部署上线的全链路流程。紧跟技术潮流，我们一直关注各种新兴技术趋势并积极进行实践探索，追求优雅的开发体验、极致的开发效率、高标准的开发质量。可提供前端简历修改、面试指导、前端新人开发指导、前端学徒、协助完成开发任务等服务。联系我：imwty2023（微信）博客原文地址：uni-app开发小程序系列--项目建设|imwty，转载请注明出处。