(一)微信小程序从入门到实战之开发工具安装

简介: 俗话说工欲善其事,必先利其器,作为一名程序员,开发软件和开发环境是我们进行软件开发的必要条件。但是对于很多新入门的朋友来说,安装开发环境和配置环境变量,通常把大多数人拦在门外,所以这篇博客,咱们先来介绍一下怎么安装小程序开发环境和配置环境变量。......

俗话说工欲善其事,必先利其器,作为一名程序员,开发软件和开发环境是我们进行软件开发的必要条件。但是对于很多新入门的朋友来说,安装开发环境和配置环境变量,通常把大多数人拦在门外,所以这篇博客,咱们先来介绍一下怎么安装小程序开发环境和配置环境变量。

1、开发软件和环境

  1. node.js
Node.js 是一个开源和跨平台的 JavaScript 运行时环境。 它几乎是任何类型项目的流行工具!
Node.js 在浏览器之外运行 V8 JavaScript 引擎(Google Chrome 的内核)。 这使得 Node.js 的性能非常好。
Node.js 应用程序在单个进程中运行,无需为每个请求创建新的线程。 Node.js 在其标准库中提供了一组异步的 I/O 原语,以防止 JavaScript 代码阻塞,通常,Node.js 中的库是使用非阻塞范式编写的,使得阻塞行为成为异常而不是常态。
  1. 微信开发者工具
在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。

使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK
使用小程序调试,开发者可以完成小程序的 API
和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

  1. HBuilderX
HBuilderX是国产的一个编辑器,非常好用,咱们主要是用来编辑代码和开发软件。
1、轻巧 仅10余M的绿色发行包(不含插件)。
2、极速 不管是启动速度、大文档打开速度、编码提示,都极速响应 。
3、 vue开发强化,HX对vue做了大量优化投入,开发体验远超其他开发工具 详见。
对中国的小程序开发优化,HX可新建uni-app小程序等项目,为国人提供更高效工具, markdown利器。
5、HX是唯一一个新建文件默认类型是markdown的编辑器,也是对md支持最强的编辑器 HX为md强化了众多功能。
6、HX的界面比其他工具更清爽简洁,绿柔主题经过科学的脑疲劳测试,是最适合人眼长期观看的主题界面。 强大的语法提示。
7、HX是中国唯一一家拥有自主IDE语法分析引擎的公司,对前端语言提供准确的代码提示和转到定义(Alt+鼠标左键)。
高效极客工具。更强大的多光标、智能双击...让字处理的效率大幅提升,更强的json支持。
9、现代js开发中大量json结构的写法,HX提供了比其他工具更高效的操作 。
10、 C++的架构性能远超Java或Electron架构。

2、安装node.js

第一步,咱们先把node.js的安装包下载下来
下载地址node.js

接着按下图所示,依次点击next的按钮
在这里插入图片描述
在这里插入图片描述
这一步是选择安装目录,我一般习惯安装在D盘上,大家可以根据自己的需要选择安装路径
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这一步是最后一步,直接点击installl按钮即可安装
在这里插入图片描述
当出现这个页面的时候,说明你已经把node.js安装成功了,然后点击finish结束
在这里插入图片描述

3、安装微信开发者工具

咱们先微信官网把微信开发者工具安装包下载下来
下载地址微信开发者工具

如下图所示依次点击下一步安装
在这里插入图片描述
在这里插入图片描述
这里是选择微信开发者工具安装目录,我还是习惯了安装在D盘,大家根据自己的需要选择
在这里插入图片描述
最后点击完成即可将微信开发者工具安装成功
在这里插入图片描述

4、安装HBuilderX

HBuilderX的安装就比较简单了,直接在官网将他的压缩包下载下来,然后解压到对应目录即可使用
下载地址:HBuilderX
在这里插入图片描述
在这里插入图片描述

5、验证以下是否所有软件都安装成功

这一步主要是包括一些环境变量的配置,同时测试咱们的环境和软件是否都能正常使用。

咱们的开发流程主要是在HBuilderX上边写代码,然后通过微信开发者工具进行调试和上传代码到微信公众平台,最后进行发布。

双击打开微信开发者工具和HBuilderX页面如下,然后咱们用自己的微信扫描该二维码登录微信开发者工具
在这里插入图片描述
登录成功的界面如下图所示
在这里插入图片描述
接着咱们配置一下微信开发者工具的服务端口,主要是给HBuilderX进行调用
在这里插入图片描述
我们可以导入一个测试项目进行测试一下,点击下载恋爱话术小程序,然后点击如下图所示的运行到小程序
在这里插入图片描述
第一次使用的时候需要选择一下微信开发者工具的安装目录,咱们正常选择即可
在这里插入图片描述
因为是第一次编译,所以会下载一些必须的插件,只要慢慢等待即可
在这里插入图片描述
当插件下载完成之后,在HBuilderX再次点击运行到小程序,然后在微信开发者工具上面即可出现咱们测试项目的页面,当到达这一步,就说明咱们的软件安装和环境变量配置已经圆满结束。
在这里插入图片描述

目录
相关文章
|
16天前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
17天前
|
小程序 PHP 图形学
热门小游戏源码(Python+PHP)下载-微信小程序游戏源码Unity发实战指南​
本文详解如何结合Python、PHP与Unity开发并部署小游戏至微信小程序。涵盖技术选型、Pygame实战、PHP后端对接、Unity转换适配及性能优化,提供从原型到发布的完整指南,助力开发者快速上手并发布游戏。
|
5月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
297 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
8月前
|
人工智能 自然语言处理 小程序
让小程序拥有“视觉之眼“:DeepSeek图像识别实战指南
本文介绍如何通过DeepSeek计算机视觉技术,赋予小程序“看懂世界”的能力。从构建视觉感知系统、训练专属视觉词典到创造会思考的界面,详细讲解了实现智能相册、植物识别器和老旧照片修复等功能的步骤。最后探讨性能优化与安全合规要点,展望未来视觉智能应用的无限可能。
|
8月前
|
小程序 测试技术 数据安全/隐私保护
微信公众号接口测试实战指南
微信公众号接口测试是确保系统稳定性和功能完整性的重要环节。本文详细介绍了测试全流程,包括准备、工具选择(如Postman、JMeter)、用例设计与执行,以及常见问题的解决方法。通过全面测试,可以提前发现潜在问题,优化用户体验,确保公众号上线后稳定运行。内容涵盖基础接口、高级接口、微信支付和数据统计接口的测试,强调了功能验证、性能优化、安全保护及用户体验的重要性。未来,随着微信生态的发展,接口测试将面临更多挑战和机遇,如小程序融合、AI应用和国际化拓展。
|
12月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
1769 0
|
12月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
2560 7
|
12月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
2052 1
|
12月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
1806 7
|
6月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。

热门文章

最新文章