从零开始开发微信小程序-开发环境

        上篇介绍了资源准备，本篇文章将介绍下开发环境的，重点是前端开发工具和微信调试工具。希望通过本文能为那些后端想研究前端开发的同学提供一些参考；对于HBuilderX和微信开发者工具比较熟悉的同学，您以根据自己的需求选择性阅读或直接跳过这篇文章。

        1.后端开发

        后端开发主要基于 Spring Boot 进行开发的。刚做开发那几年，主要使用 Eclipse ，这两年逐渐转向了 IntelliJ IDEA。鉴于这两款工具在网上已有大量教程和资源可供参考，这里就不再赘述。

        idea下载地址：https://www.jetbrains.com/idea/download

        eclipse下载地址：https://www.eclipse.org/downloads/

        2.前端开发

        后端主要是基于Vue开发的。Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

        网上关于 Vue 的学习教程比较多，我主要是通过以下三个网站进行自学的（当然还是需要有一定的JS基础的）：

        Vue官网：https://cn.vuejs.org/guide/introduction.html

        菜鸟教程：https://www.runoob.com/vue3/vue3-tutorial.html

        w3cschool：https://www.w3cschool.cn/vuejs3

        对于小程序开发，我们将重点介绍uni-app 。

        官网地址：https://uniapp.dcloud.net.cn

        uni-app 是一个使用 Vue.js 开发全平台前端应用的框架。开发者只需编写一套代码，即可将其发布到 iOS、Android、Web（响应式）以及各类小程序平台（如微信、支付宝、百度、头条、飞书、QQ、快手、钉钉、淘宝）和快应用等多个平台上。

        官网上提供了详尽的教程、封装好的组件以及丰富的第三方插件市场。对于有一定基础的开发者而言，上手相对较为容易。

        此外，uni-app 推荐使用 HBuilderX作为开发工具，该工具内置了 npm，无需单独安装。

        下载地址：https://www.dcloud.io/hbuilderx.html

        2.1新建项目

        在 HBuilderX 的工具栏中选择【文件】，然后点击【新建】，接着选择【项目】。如果是创建 uni-app 项目，你可以选择 uni-app 提供的各种模板，它会自动为你搭建好项目的基本结构（脚手架）。

        2.2运行项目

        1）在进行 uni-app 项目的 Web 端测试时，可以在 HBuilderX 的工具栏中点击【运行】，然后选择【运行到浏览器】，并挑选你想要使用的浏览器。

        2）对于 uni-app 项目的移动端测试，例如微信小程序，在 HBuilderX 的工具栏中点击【运行】，然后选择【运行到小程序模拟器】，并指定【微信开发者工具】。运行之后，HBuilderX 会自动启动微信开发者工具。

        注意，要使 HBuilderX 能够唤起微信开发者工具，首先必须安装微信开发者工具，并配置微信小程序的 AppID。具体操作步骤如下：打开项目根目录下的 manifest.json 文件，选择微信小程序的配置项，并输入微信小程序的 AppID 即可。

        3）对于普通项目，则需要通过外部命令来运行。选中要运行的项目，然后右键选择【外部命令】，接着再选择相应的命令进行执行。

        3.微信开发者工具

        微信开发者工具可以实现公众号网页调试和小程序调试。

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

        官网教程：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

        这里我介绍几个比较常用的功能：

        3.1调试器

        你可以像使用 Google 浏览器一样，进行界面样式的调试、设置断点调试以及跟踪请求。

        3.2清缓存

        有时在调试与缓存相关的问题时，比如登录状态异常或页面未更新，你需要清理缓存。此时，可以点击工具栏中间的【清缓存】按钮，并选择需要清理的缓存项。为确保彻底解决问题，我通常会选择【全部清除】。

        3.3刷新页面

        有时在调试过程中，如果遇到页面卡顿或加载超时的情况，可以点击工具栏中间的【编译】按钮，这样就可以刷新页面。

        3.4版本上传

        调试完成后，若需将小程序更新上线，可点击工具栏右上角的【上传】按钮，确认版本号等信息后进行上传。（关于此部分内容，将在下篇文章中做详细介绍。）

        3.5本地设置&项目设置

        有时需要调整【调试基础库】或其他设置时，可以通过工具栏右上角的【详情】按钮，然后选择【本地设置】或【项目设置】来进行相应的参数调整。

        近期我开发了一款专注于成语学习的微信小程序【成语智趣欢乐多】。该程序提供了成语检索、学习与复习、趣味答题及闯关游戏等功能，旨在让您在轻松愉快的氛围中掌握更多的成语知识。感兴趣的同学可以扫下方二维码即可免费体验。

        未完待续，下一篇将介绍代码提交审核以及审核过程中遇到的一些坑！