当前位置：首页 > JavaScript > 微信小程序开发环境搭建

微信小程序开发环境搭建

一叶知秋2024-04-02 02:16:28JavaScript106

文章目录

前言

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

一、小程序开发环境搭建

1. 注册小程序

1.1 进入微信公共平台

点击进入微信公共平台注册小程序。

1.2 点击小程序

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

在这里插入图片描述

1.3 前往注册

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

在这里插入图片描述

1.4 填写账号信息

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

在这里插入图片描述

1.5 账号激活

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

在这里插入图片描述

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

在这里插入图片描述

1.6 实名信息登记

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

在这里插入图片描述

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

在这里插入图片描述

1.7 激活成功

激活成功后如下图所示。

在这里插入图片描述

1.8 小程序管理页面

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

在这里插入图片描述

在这里插入图片描述

1.9 获取AppID

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

在这里插入图片描述

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

2.1 下载小程序开发工具 Stable

微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

在这里插入图片描述

2.2 安装小程序开发工具 Stable

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

在这里插入图片描述

点击下一步。

在这里插入图片描述

选择我接受。

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

2.3 扫码登录

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

在这里插入图片描述

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

在这里插入图片描述

3. 创建项目

3.1 创建项目

在这里插入图片描述

3.2 创建小程序

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

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

在这里插入图片描述

3.3 开发页面

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

在这里插入图片描述

3.4 Stable 主界面介绍

在这里插入图片描述

二、使用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

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

在这里插入图片描述

1.2 安装HBuilderX

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

1.3 创建HBuilderX桌面快捷方式

在这里插入图片描述

1.4 安装常用插件

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

在这里插入图片描述

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

在这里插入图片描述

2. 安装nvm

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

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

2.1 下载nvm

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

在这里插入图片描述

2.2 安装nvm

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

点击Install开始安装。

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

查看nvm命令帮助信息。

nvm --help

在这里插入图片描述

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

在这里插入图片描述

  • 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

安装成功如下图所示。

在这里插入图片描述

3.4 查看已安装的nodejs版本

nvm list

在这里插入图片描述

3.5 nodejs版本切换

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

nvm use 18.16.1

在这里插入图片描述

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 开发工具，选择文件，新建，项目。

在这里插入图片描述

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

在这里插入图片描述

4.2 引入 uView UI 框架

4.2.1 介绍

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

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

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

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

打开终端窗口。

在这里插入图片描述

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

npm init -y

在这里插入图片描述

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

npm install uview-ui@2.0.36

添加成功如下图所示。

在这里插入图片描述

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

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

打开插件市场。

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

4.2.4 配置

点击NPM安装方式配置查看如何配置使用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>

效果如下所示。

在这里插入图片描述

总结

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

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

参考链接：

扫描二维码推送至手机访问。

版权声明：本站部分文章来自AI创作、互联网收集，请查看免责申明

本文链接：https://www.yyzq.team/post/315410.html

标签: 微信小程序小程序vue
分享给朋友：
返回列表

上一篇：小程序用户登录架构设计

下一篇：初步了解小程序

“微信小程序开发环境搭建” 的相关文章

微信小程序搜索排名优化之算法规则预习2024-04-02
颜值测评打分微信小程序AI智能颜值测评小程序搭建流量主收益2024-04-02
小程序用户登录架构设计2024-04-02
初步了解小程序2024-04-02
淘宝扭蛋机小程序开发：指尖轻触，开启惊喜之旅2024-04-02
Mac系统微信小程序的保存位置和缓存清除2024-04-02
微信小程序安装vant2024-04-02
小程序第五章总结2024-04-02
微信小程序版本更新检测2024-04-02
微信小程序入门2024-04-02
uniapp 微信小程序分包配置2024-04-02
微信小程序设置scss编译2024-04-02

Copyright ©一叶知秋网络科技工作室 苏ICP备2024092970号-1 www.yyzq.team