记录安装Nodejs和HBuilderX搭建、部署微信小程序开发环境(一)

news2024/9/22 5:30:41

文章目录

    • 1 前言
    • 2 注册小程序账号
    • 3 安装微信开发者工具
    • 4 安装Nodejs和HBuilderX
      • 4.1 windows用户安装Nodejs
      • 4.2 macos/linux用户安装Nodejs
      • 4.3 安装HBuilder X
    • 5 创建项目
      • 5.1 新建一个项目
      • 5.2 进行基本配置
    • 6 HBuilderX同步微信开发者工具
      • 6.1 打开服务端口
      • 6.2 调用微信开发者工具

1 前言

大项目是关于【ChatGPT+UniApp小程序全栈开发】,本文是总结归纳搭建和部署uniapp开发环境,感谢导师陶人超有料的分享:
https://blog.csdn.net/weixin_37797592/article/details/127138438

2 注册小程序账号

于微信公众平台网址:https://mp.weixin.qq.com/,右上角点击立即注册

选择点击左下角小程序

正常填入信息注册即可,注意,如果注册有公众号的邮箱不可用于注册小程序,因此需备多一个邮箱,常见的gmail、QQ、网易的126,163都可

然后按提示登录邮箱点击链接激活即可

随后扫码登录,进入到开发管理-开发设置-开发者ID,点击生成,记得复制保存好密钥

3 安装微信开发者工具

在微信开发者工具下载网址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html,找到下载稳定版Stable Build

  • windows 根据自己的电脑情况安装64位或者32位,一般都是64位
  • macos 英特尔芯片的下载x64,M1或M2芯片的下载ARM64

笔者用的是OS,正常安装即可,windows用户默认选项安装即可,安装路径记得修改,不装C盘,不装C盘,不装C盘

打开后扫码登录能顺利进入界面即可

4 安装Nodejs和HBuilderX

HBuilderX是DCloud公司推出的一款全新的Web开发集成环境,主要用于前端开发、后端开发和移动应用开发。它支持HTML/CSS/JavaScript等前端技术开发,同时也支持PHP、Java、Node.js等后端语言开发,还提供了Hybrid App开发、微信小程序开发功能。HBuilderX集成了代码编辑器、调试器、编译器、版本管理等多个开发工具,能够大大提高开发效率。此外,HBuilderX还支持插件扩展,用户可以通过安装插件来扩展各种功能,满足不同的开发需求

4.1 windows用户安装Nodejs

环境这里选择搭建Nodejs,Nodejs下载网址:https://nodejs.cn/download/

大家根据自己的情况下载安装即可

windows的环境配置大家查看原文:https://blog.csdn.net/weixin_37797592/article/details/127138438

4.2 macos/linux用户安装Nodejs

可以跟4.1一样在网站上下载安装,也可用homebrew安装

# 安装node
brew install node

# 检查版本,若有返回版本号即安装成功
node -v
npm -v

相关的路径

# 查找homebrew的路径
brew list git

# homebrew路径
/opt/homebrew/

# 通过homebrew安装的软件的文件夹
/opt/homebrew/Cellar

# npm安装包存放的位置
/usr/local/lib/node_modules/npm

# npm全局下载模板的存放位置
/usr/local/lib/node_modules/npm/node_module

因为npm服务器在海外,对下载速度有一定影响,因此可以换一下镜像源或者安装cnpm

# 更换成淘宝源
npm config set registry https://registry.npm.taobao.org

# 使用cnpm工具取代npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org

4.3 安装HBuilder X

进入HBuilder X官网:https://dcloud.io/hbuilderx.html,根据自己的电脑选择下载内容,版本用正式版即可

5 创建项目

5.1 新建一个项目

在左上角文件-新建-项目

选择uni-app,有很多现成模版,也可以自行选择

5.2 进行基本配置

生成uni-app应用标识应用名称

根据图片勾选和配置微信小程序,填入的AppID是第一步申请保存复制的id

6 HBuilderX同步微信开发者工具

6.1 打开服务端口

打开微信开发者工具,设置-安全设置,打开服务端口

6.2 调用微信开发者工具

回到HBuilderX,在运行-运行到小程序模拟器-微信开发者工具

现在HBuilderX可以成功调起微信开发者工具,完成同步,实现实时查看内容修改了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/465416.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PHP初识

php简介 PHP全称超文本预处理语言&#xff0c;是在服务器端执行的脚本语言&#xff0c;是一种简单的&#xff0c;面向对象的开源脚本语言PHP脚本可以让Web开发人员快速的书写动态生成的网页 PHP脚本以<?php开始&#xff0c;以?>结束 <?php echo "hello world&…

Visual Studio调试代码教学

本篇博客主要讲解程序员最应该掌握的技能之一——调试。我个人认为&#xff0c;学习编程&#xff0c;有2件事情非常重要&#xff0c;一是画图&#xff0c;一是调试。下面我会以Visual Studio 2022为例&#xff08;VS的其他版本大同小异&#xff09;&#xff0c;演示如何调试一个…

测试开发实战项目 | 搭建Pytest接口自动化框架

一、预研背景 目前系统研发多为前后端分离&#xff0c;当后端接口研发完成后&#xff0c;可以不依赖前端界面通过接口测试提前发现问题并解决。同时由于软件迭代周期不断缩短&#xff0c;开发新功能后又担心影响原有功能&#xff0c;可以通过接口自动化进行原有功能快速回归测…

spi,iic,uart,pcie区别

一、spi SPI 是英语Serial Peripheral interface的缩写&#xff0c;顾名思义就是串行外围设备接口&#xff0c;是同步传输协议&#xff0c;特征是&#xff1a;设备有主机&#xff08;master&#xff09;和从机&#xff08;slave&#xff09;的区分&#xff0c;主机在通讯时发送…

分治与减治算法实验: 排序中减治法的程序设计

目录 前言 实验内容 实验目的 实验分析 实验过程 流程演示 写出伪代码 实验代码 代码详解 运行结果 总结 前言 本文介绍了算法实验排序中减治法的程序设计。减治法是一种常用的算法设计技术&#xff0c;它通过减少问题的规模来求解问题。减治法可以应用于排序问题&…

mysql数据库自动备份

前言 服务器中数据库的数据是最重要的东西,如果因为某些情况导致数据库数据错误,数据错乱或数据库崩溃,这时一定要及时的修复,但如果数据丢失或数据没法用了,这时就要回滚数据了,而这时就需要我们经常的备份数据库的数据 正文 一般别人都会推荐使用Navicat来备份和连接数据库…

Kafka时间轮(TimerWheel)--算法简介

一、简介 一个简单的时间轮是一个定时器任务桶的循环列表。 让u作为时间单位。尺寸为n的时间轮有n个桶&#xff0c;可以在n*u的时间间隔内保存定时器任务。每个bucket保存属于相应时间范围的计时器任务。 在开始时&#xff0c; 第一个桶保存[0&#xff0c;u&#xff09;的任务…

第7章 “字典”

1.字典简介 字典是什么&#xff1f; 解答&#xff1a;与集合类似&#xff0c;也是一种存储唯一值的数据结构&#xff0c;但它是以键值对的形式来存储。(键值对是最重要的特性)在Es6中新增了字典&#xff0c;名为Map字典的常用操作&#xff1a;增删改查 const map new Map()/…

使用PY003基于外部中断+定时器的方式实现NEC红外解码

写在前边 最近项目用到一款遥控器是38K红外载波,NEC协议的&#xff0c;找了很多帖子有看到用外部中断下降沿判断&#xff08;但可惜判定数据的方式是while在外部中断里面死等的&#xff09;&#xff0c;有看到用100us定时器定时刷来判断&#xff0c;感觉都不太适合用在我这个工…

基于MATLAB实现WSN(无线传感器网络)的LEACH(低能耗自适应集群层次结构)(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 低能耗自适应集群层次结构&#xff08;“LEACH”&#xff09;是一种基于 TDMA 的 MAC 协议&#xff0c;它与无线传感器网络 &a…

[2018.09.25][Sourceinsight]4.0配置

1 字体放大 (1)panel fonts: option,preference,colors&font (2)code fonts: option,file type options 2 修改默认字体 Alt y 3 显示行号 点击菜单栏View->Line Numbers 4 破解 https://blog.csdn.net/biubiuibiu/article/details/78044232 5 全局搜索字…

在Spring Boot微服务使用knife4j发布后端API接口

记录&#xff1a;422 场景&#xff1a;在Spring Boot微服务上&#xff0c;应用knife4j发布后端API接口&#xff0c;辅助开发与调试。 版本&#xff1a;JDK 1.8,Spring Boot 2.6.3,knife4j-3.0.3,springfox-swagger2-3.0.0。 Knife4j: 是一个集Swagger2 和 OpenAPI3为一体的增…

第三十二篇,记一次Windows下Qt使用boost的经历

Win10系统 Qt版本如下所示 Qt中使用的编译器是MinGW&#xff0c;如下图 boost版本是1.82.0 好的&#xff0c;描述一下过程&#xff1a; 按这个教程下载、编译boost&#xff0c;在boost的目录下生成了stage/lib/目录&#xff0c;然后加入到Qt工程里&#xff0c;主要是include目…

win10安装Anaconda,配置Pytorch环境

一、安装Anaconda Anaconda实际上是一个包管理器&#xff0c;可以理解为一个工具。Anaconda自带Python&#xff08;选中版本&#xff09;解释器以及其他一些数据分析与挖掘需要的模块而无需用户手动添加这些常用模块&#xff08;安装模块会出现各种错误&#xff09;。早期学Pyt…

Django个性化推荐系统,以电影为例

背景 随着科学技术发展&#xff0c;电脑已成为人们生活中必不可少的生活办公工具&#xff0c;在这样的背景下&#xff0c;网络技术被应用到各个方面&#xff0c;为了提高办公生活效率&#xff0c;网络信息技术飞速发展。在这样的背景下人类社会进入了全新的信息化的时代。电影…

flask+opencv:实时视频直播推流平台Demo

简介&#xff1a;推流&#xff0c;指的是把采集阶段封包好的内容传输到服务器的过程。其实就是将现场的视频信号传到网络的过程。网上调查、对话访谈、在线培训等内容现场发布到互联网上。利用互联网的直观、快速&#xff0c;表现形式好、内容丰富、交互性强、地域不受限制、受…

华为OD机试真题(Java),猴子爬山(100%通过+复盘思路)

一、题目描述 一天一只顽猴想去从山脚爬到山顶&#xff0c;途中经过一个有个N个台阶的阶梯&#xff0c;但是这猴子有一个习惯&#xff1a; 每一次只能跳1步或跳3步&#xff0c;试问猴子通过这个阶梯有多少种不同的跳跃方式&#xff1f; 二、输入描述 输入只有一个整数N&…

AI语音生成器是下一大安全威胁吗?

ChatGPT一经上市&#xff0c;有关监管人工智能的讨论就开始升温。任何试图遏制这种技术的做法都可能需要国际合作&#xff0c;需要我们在过去几十年来从未见过的合作程度&#xff0c;因此不太可能遏制人工智能。 人工智能是一项功能强大的技术&#xff0c;有望彻底改变我们生活…

AIGC - 生产力新工具 Bito AI

文章目录 Bito AI 是什么Bito AI 能干啥官网免费的吗&#xff1f;如何使用 Bito方式一&#xff1a;方式二&#xff1a;在这里插入图片描述方式三 Bito AI 是什么 Bito AI是继Github Copilot、Cursor、CodeWhisperer等AI智能编程产品之后发了一大AI编程工具 。 Bito是一款建立…

表情迁移 - 2D人像动起来(附带生成web服务提供api接口)

左边原图,右边是渲染后的视频文件 开源地址:https://github.com/AliaksandrSiarohin/first-order-model 官方模型下载地址(需科学上网): google-driveyandex-disk本文docker容器已自带人脸模型 若还需要行为、物品、动画等追踪模型需下载后拷贝至容器内即可使用 API请求…