技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

微信小程序开发环境搭建

 收录于 微信小程序
   约 3676 字   预计阅读 8 分钟 
https://bing.ee123.net/img/rand?artid=137159427

微信小程序开发环境搭建

文章目录

前言

本文介绍了搭建小程序开发环境的步骤，包括注册小程序、安装微信小程序开发工具（Stable版本）、创建项目等内容。同时，还介绍了使用uni-app开发小程序的环境搭建步骤，包括安装HBuilderX开发工具、安装nvm（Node Version Manager）以及创建uni-app项目等内容。通过本文的指导，读者可以快速搭建小程序开发环境并开始开发自己的小程序应用。

一、小程序开发环境搭建

1. 注册小程序

1.1 进入微信公共平台

点击进入 注册小程序。

1.2 点击小程序

进入后鼠标移动到小程序，点击查看详情。

https://i-blog.csdnimg.cn/blog_migrate/aa793418a7023b544e3e80bc9c415c5e.png

1.3 前往注册

点击前往注册，注册一个微信小程序。

https://i-blog.csdnimg.cn/blog_migrate/581ce7be3b7a77e19e379c05895c5f7f.png

1.4 填写账号信息

输入以下信息后，点击注册。

https://i-blog.csdnimg.cn/blog_migrate/c39986bbe377f4feb6328e4601809ade.png

1.5 账号激活

进入邮箱激活小程序账号。

https://i-blog.csdnimg.cn/blog_migrate/e04ff25e03154f886d27140f062a7910.png

进入邮箱后，点击链接进行账号激活。

https://i-blog.csdnimg.cn/blog_migrate/077df6df3bff3e55062b16f82c389470.png

1.6 实名信息登记

点击后跳转到信息登记页面。往下翻，填写信息后点击继续。

https://i-blog.csdnimg.cn/blog_migrate/16b6b4b661189fa3d3890f6273c26e61.png

填写好以下信息后，在管理员身份验证处使用微信扫码，此微信便成为这个小程序的管理员用户。

https://i-blog.csdnimg.cn/blog_migrate/47a130bceef97db30d77ae1ec375743e.png

1.7 激活成功

激活成功后如下图所示。

https://i-blog.csdnimg.cn/blog_migrate/473a139567fa856942eaa451a754f8cd.png

1.8 小程序管理页面

之后可以使用微信扫码登录 ，进入小程序管理页面。

https://i-blog.csdnimg.cn/blog_migrate/c4262b22c6c3ffb0ab5670575f69f622.png

https://i-blog.csdnimg.cn/blog_migrate/8bf21554a553b4dee12cb8edea1ff4cc.png

1.9 获取AppID

进入小程序页面后，往下翻，在开发管理中可以找到AppID。

https://i-blog.csdnimg.cn/blog_migrate/b95e66f504b4e4f3a95b160fd597b28b.png

2. 安装微信小程序开发工具（Stable）

2.1 下载小程序开发工具 Stable

微信开发者工具下载地址：

https://i-blog.csdnimg.cn/blog_migrate/13ecaae81924da32260123ae564649e4.png

2.2 安装小程序开发工具 Stable

下载之后，双击运行安装程序。

https://i-blog.csdnimg.cn/blog_migrate/ac66a0f5993a53e4ec2b5130e61849ff.png

点击下一步。

https://i-blog.csdnimg.cn/blog_migrate/e968e2f5d9c9eefe4651f53084e9df99.png

选择我接受。

https://i-blog.csdnimg.cn/blog_migrate/66c38167e8fcff354829b82a6c9195b7.png

选择安装目录，并点击安装。

https://i-blog.csdnimg.cn/blog_migrate/987b791cefa0ac22d5157b08cf0162df.png

等待安装完成，点击完成后会自动运行。

https://i-blog.csdnimg.cn/blog_migrate/fe75e6f1db30840621c2eedad18daa93.png

2.3 扫码登录

运行后会出现一个二维码，使用微信扫码登录。

https://i-blog.csdnimg.cn/blog_migrate/728811173070a7799246f384f3b924e9.png

登录后，进入微信小程序开发工具。

https://i-blog.csdnimg.cn/blog_migrate/27f680f5a3ce4c68f5761ac36b8694fb.png

3. 创建项目

3.1 创建项目

https://i-blog.csdnimg.cn/blog_migrate/6f479632e72161886358561293d7daeb.png

3.2 创建小程序

输入项目名称，选择项目所在目录，点击AppID的下标，选择注册小程序获得的AppID，之后点击确定。

小程序提供了一些开发模板，可以选择一个模板来进行开发。

https://i-blog.csdnimg.cn/blog_migrate/82ab86a3f82be4616fdcb6414e2cefbb.png

3.3 开发页面

之后就跳转到所选模板对应的开发页面，然后就可以进行开发啦。

https://i-blog.csdnimg.cn/blog_migrate/9c7856088a0c103d8ce691b6af3dad84.png

3.4 Stable 主界面介绍

https://i-blog.csdnimg.cn/blog_migrate/7c3c8bbdb63e485b256836f2e995d789.png

二、使用uni-app开发小程序环境搭建

uni-app 是一款由 DCloud 推出的跨平台应用开发框架，它基于 Vue.js 框架，并通过编译技术将开发者编写的代码转换为多个平台的原生应用程序，包括 iOS、Android、Web、以及各种小程序平台（如微信小程序、支付宝小程序等）。uni-app 的目标是实现一次编写，多端运行，大大简化了跨平台应用开发的复杂性。

1. 安装HBuilderX开发工具

HBuilderX 是一款由 DCloud 推出的跨平台的集成开发环境（IDE），专为开发者提供 Web、移动应用和桌面应用的开发工具。它基于现代化的 Web 技术栈，如 HTML、CSS 和 JavaScript，同时集成了丰富的功能和工具，使开发者能够高效地进行应用程序的开发、调试和部署。

1.1 下载HBuilderX

点击访问 。然后根据下图提示点击下载。

https://i-blog.csdnimg.cn/blog_migrate/6e9c05d8ca1c836b5e2849a5fd157201.png

1.2 安装HBuilderX

下载完成之后，打开下载目录，双击进行解压。

https://i-blog.csdnimg.cn/blog_migrate/2378e95476cfc2db4a723022c27c11c0.png

在解压页面，选择解压路径（安装目录），然后点击确定，等待解压完成。

https://i-blog.csdnimg.cn/blog_migrate/1dc24155f6b3b1cd35e1987a6c328257.png

解压完成后，打开安装目录，双击HBuilderX.exe运行软件。

https://i-blog.csdnimg.cn/blog_migrate/ef7ec45b8f39af72515b5279d5d3f386.png

1.3 创建HBuilderX桌面快捷方式

https://i-blog.csdnimg.cn/blog_migrate/f0e323ae2b6ba15c2530b99321e69034.png

1.4 安装常用插件

打开 HBuilderX 开发工具，进入插件安装页面。

https://i-blog.csdnimg.cn/blog_migrate/f84d9746d38c45ded04e5b75c847cff0.png

安装以下常用插件后，关闭插件页面。

https://i-blog.csdnimg.cn/blog_migrate/60dabb270fce1b06be43ab15d51a37bd.png

2. 安装nvm

nvm（Node Version Manager）是一个用于管理和切换不同 Node.js 版本的工具。它允许开发者在同一台计算机上同时安装和使用多个 Node.js 版本，并且可以轻松地在这些版本之间进行切换。

使用 nvm，你可以方便地安装、卸载和管理 Node.js 版本。它提供了一个命令行界面，让你可以轻松地切换当前使用的 Node.js 版本，以适应不同项目或应用的需求。你可以在不同的终端窗口中使用不同的 Node.js 版本，而无需手动更改全局 Node.js 版本。

2.1 下载nvm

点击访问 。然后往下翻，找到nvm-setup.exe，点击下载。

https://i-blog.csdnimg.cn/blog_migrate/1690e9eb2a1ff1726d8d3aed76eab874.png

2.2 安装nvm

打开下载目录，双击运行安装程序。

https://i-blog.csdnimg.cn/blog_migrate/1f09330f54ea87f68bfecc9f09c1ef8b.png

点击我接受后点击下一步。

https://i-blog.csdnimg.cn/blog_migrate/49ec30092e5110c812877ba543d915d8.png

选择nvm安装目录后点击下一步。

https://i-blog.csdnimg.cn/blog_migrate/5ca4fe9c05d5111c571a0bd4e64b68bb.png

选择nodejs安装目录后点击下一步。

https://i-blog.csdnimg.cn/blog_migrate/80b6606828f55f8b882435398884ca9d.png

点击Install开始安装。

https://i-blog.csdnimg.cn/blog_migrate/72b345e693346f3ad3dae7beeb66d5cd.png

等待安装完成后点击完成。

https://i-blog.csdnimg.cn/blog_migrate/92e34180dfdea371620c3aaad281838a.png

验证是否安装成功，快捷键 win+r 输入 cmd ，打开命令提示符窗口。然后输入 nvm -v ，如果出现版本信息，则安装成功，如下图所示。

https://i-blog.csdnimg.cn/blog_migrate/d7a4cd8912ae9f2082dbf832eb0c031b.png

查看nvm命令帮助信息。

nvm --help

https://i-blog.csdnimg.cn/blog_migrate/8e853168859cb20990fa1becb803b647.png

3. 使用nvm命令安装nodejs

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于构建高性能的网络应用程序。它采用事件驱动、非阻塞式 I/O 模型，使得可以处理大量并发连接而不会导致线程阻塞，从而实现了高效的网络通信和数据处理能力。

Node.js 最初是由 Ryan Dahl 在2009年创建的，它的目标是提供一种在服务器端使用 JavaScript 进行开发的方式，以弥补传统的基于浏览器的 JavaScript 在服务器端的不足。Node.js 提供了一系列的内置模块，使得开发者可以方便地构建各种类型的应用，包括 Web 服务器、实时通信应用、命令行工具等。

3.1 设置镜像地址

设置 nodejs 和 npm 镜像地址。

nvm node_mirror https://npmmirror.com/mirrors/node/

nvm npm_mirror https://npmmirror.com/mirrors/npm/

3.2 查看可安装的nodejs版本

快捷键 win+r 输入 cmd ，打开命令提示符窗口。输入以下命令查看可用的nodejs版本。

nvm list available

https://i-blog.csdnimg.cn/blog_migrate/0064fd1050bb1e308cfb32b56d42febc.png

  • CURRENT（当前版本）：这是指软件的最新版本，包含了最新的功能和改进。当前版本通常是开发中的版本，可能包含一些实验性的功能和可能的 bug。它适合那些希望尝试最新功能的用户或开发者。
  • LTS（长期支持版本）：LTS版本是指软件的稳定版本，通常由开发者或维护者长期支持。LTS版本会在一段时间内接收安全性修复和错误修复，但不会引入新的功能。LTS版本适合那些希望稳定运行并不需要最新功能的用户或企业。
  • OLD STABLE（旧稳定版本）：这是指较早发布的稳定版本，已经被后续的版本所取代。旧稳定版本可能仍然得到一些维护和修复，但通常不再接收新的功能更新。这些版本适合那些需要较旧版本的特定功能或者不希望升级到最新版本的用户。
  • OLD UNSTABLE（旧不稳定版本）：这是指较早发布的非稳定版本，可能包含一些实验性的功能和可能的 bug。旧不稳定版本通常不再得到维护和修复，因此不建议在生产环境中使用。

3.3 安装nodejs

建议选择LTS（长期支持版本），这里安装 18.16.1 和 20.10.0 版本。输入以下命令进行安装。

nvm install 18.16.1

nvm install 20.10.0

安装成功如下图所示。

https://i-blog.csdnimg.cn/blog_migrate/6ff86ebaa8061bb3ec62f3d908d54545.png

3.4 查看已安装的nodejs版本

nvm list

https://i-blog.csdnimg.cn/blog_migrate/5a2ea1a518857cc2ddcde91f1859233c.png

3.5 nodejs版本切换

切换当前使用的nodejs版本为18.16.1。

nvm use 18.16.1

https://i-blog.csdnimg.cn/blog_migrate/b4e6981556d09f38797f8fceca328bce.png

3.6 npm 设置

npm（Node Package Manager）是 JavaScript 的包管理工具，用于管理和共享 JavaScript 代码、模块和依赖项。它是 Node.js 平台的默认包管理器，也是世界上最大的开源软件注册表之一。

配置淘宝镜像源。

npm config set registry https://registry.npm.taobao.org

忽略证书检查。

npm config set strict-ssl false

4. 创建uni-app项目

4.1 在HBuilderX中创建uni-app项目

打开 HBuilderX 开发工具，选择文件，新建，项目。

https://i-blog.csdnimg.cn/blog_migrate/e77abcc1e68ebac437b23e46b29e8ed4.png

选择uni-app，输入项目名，选择项目所在目录，可用选择自己想用的模板，选择 Vue版本2 （Vue版本3不兼容uview-ui），然后点击创建。

https://i-blog.csdnimg.cn/blog_migrate/11f2e25d2847aca5b85c593a8db2bc08.png

4.2 引入 uView UI 框架

4.2.1 介绍

是一款基于 Vue.js 的开源 UI 组件库，它提供了一系列的可复用组件和工具，帮助开发者快速构建现代化的 Web 应用程序界面。

uView UI 的设计灵感来自于微信小程序的界面风格，因此它的组件和样式具有类似于微信小程序的外观和交互效果。它提供了丰富的组件，包括按钮、卡片、表单、导航栏、标签页、消息提示等，覆盖了常见的 UI 需求。这些组件都经过精心设计和开发，具有良好的可定制性和易用性。

uView UI 还提供了一些实用的工具和功能，例如颜色选择器、图标库、图片预览、下拉刷新等，帮助开发者简化开发流程并提高效率。

4.2.2 在 uni-app 项目中引入 uView UI 框架

打开终端窗口。

https://i-blog.csdnimg.cn/blog_migrate/3cb71e173f601373d03705d50aa0a64a.png

切换到当前项目所在目录，输入 npm init -y 命令生成一个 package.json 文件。package.json 文件是项目的配置文件，用于描述项目的元数据、依赖关系以及其他相关信息。

npm init -y

https://i-blog.csdnimg.cn/blog_migrate/0b453b0b30ff194b76016145b60318b5.png

执行以下命令，在项目中引入 uview-ui 框架。

npm install uview-ui@2.0.36

添加成功如下图所示。

https://i-blog.csdnimg.cn/blog_migrate/7963282ad683216e57af623fdca1a220.png

可以使用以下命令来更新 uview-ui 版本。

npm update uview-ui
4.2.3 安装sass插件（可忽略，看4.2.4）

打开插件市场。

https://i-blog.csdnimg.cn/blog_migrate/7b3601845f0459d3282a0e01a29b87ed.png

输入sass进行搜索，然后点击下载。

https://i-blog.csdnimg.cn/blog_migrate/b5776d16b099868f75ccb22677580b1e.png

点击下载并导入，然后等待安装完成。

https://i-blog.csdnimg.cn/blog_migrate/7d1937a0ceb3cc6def5c72e617148945.png

4.2.4 配置

点击 查看如何配置使用uview-ui。

4.2.5 示例

复制以下代码到index.vue中，保存后运行到内置浏览器。

<template>
	<view>
		<u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
		<u-button @click="show = true" type="success">打开ActionSheet</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title:'标题',
			list: [
				{
					name:'选项一',
					subname:"选项一描述",
					color:'#ffaa7f',
					fontSize:'20'
				},
				{
					name: '选项二禁用',
					disabled:true
				},
				{
					name: '开启load加载', //开启后文字不显示
					loading:true
				}
			],
			show: false
		};
	}
};
</script>

效果如下所示。

https://i-blog.csdnimg.cn/blog_migrate/ae1109830ce803652f2d0b5df340697c.png

总结

本文详细介绍了搭建小程序开发环境的步骤，包括注册小程序、安装开发工具、创建项目等。同时，还介绍了使用uni-app开发小程序的环境搭建步骤，包括安装HBuilderX开发工具、安装nvm以及创建uni-app项目等。通过本文的指导，读者可以快速上手开发小程序，并使用uni-app框架进行跨平台开发。

希望本教程对您有所帮助！如有任何疑问或问题，请随时在评论区留言。感谢阅读！

参考链接：

更新于 2024-12-25
 微信小程序, 小程序, Vue
返回 | 主页