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

文章目录

    • 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可以成功调起微信开发者工具,完成同步,实现实时查看内容修改了

你可能感兴趣的:(前端,Github,GPT,微信小程序,小程序)