【uniapp】uniapp开发微信小程序入门教程

HBuilderx中uniapp开发微信小程序入门教程

一、 环境搭建

1. HBuilderx下载安装

HBuilderx下载安装地址

2. 微信开发者工具下载安装

微信开发者工地址具下载安装

二、创建uniapp项目

选择:文件>新建>项目>uni-app

输入项目名称>选择默认模板>创建

三、初步运行

在HBuilderx中选择:运行>运行到内置浏览器

初次运行HBuilderx会安装项目需要的插件,并且生成一个【unpackage】文件

四、微信开发者工具中添加项目

1. 打开微信开发者工具,添加项目

2. 添加项目地址

目录:为文件选择第二步创建的项目地址 下第三步生成的【unpackage】文件

AppID:申请的小程序的 AppID

点击确定,微信开发者工具会自动编译

五、开放服务端口

打开微信开发者工具选择 设置>安全设置>安全

打开服务端口,并且记住【端口号】

六、HBuilderx中运行设置配置

在HBuilderx中选择:运行>运行到小程序模拟器>运行设置

设置内部web服务器端口:为第五步中生成的【端口号】

设置小程序运行配置中微信开发者工具路径:为安装的微信开发者工具具体路径

七、HBuilderx中微信小程序配置小程序AppID

打开manifest.json,选择"微信小程序配置"

设置微信小程序AppID:申请的小程序的 AppID,必须要和第四步的2中AppID保持一致

八、运行到微信开发者工具

在HBuilderx中选择:运行>运行到小程序模拟器>微信开发者工具

好了,大功告成~

开启你的小程序之旅吧!

如果在运行的时候报错Error: Fail to open IDE,可以参考以下文章
HBuilderx中uniapp项目运行到微信小程序报错Error: Fail to open IDE

相关推荐
kidding7231 小时前
旋转大转盘小程序
前端·css·微信小程序·小程序·前端框架
千逐684 小时前
Uniapp 鸿蒙实战之 AtomGit APP - 仓库详情与文件树浏览
服务器·microsoft·uni-app
anyup6 小时前
uView Pro 正式支持 MCP 协议!让 AI 秒懂你的组件库
前端·uni-app·ai编程
AI行业学习6 小时前
Notepad++ 官方纯净下载+完整安装教程(Windows)【2026.7.5】
开发语言·windows·python·前端框架·html·notepad++
AI行业学习7 小时前
2026 版 Notepad++ 完整图文安装指南|官方渠道无捆绑,一键切换中文界面
开发语言·人工智能·python·html·notepad++
千逐688 小时前
Uniapp 鸿蒙实战之 AtomGit APP - 首页设计与仓库列表实现
华为·uni-app·harmonyos
随风一样自由8 小时前
【前端+Vitest测试框架】Vitest | Playwright | WebdriverIO | Preview
前端·前端框架·可用性测试
AI行业学习19 小时前
Notepad++ 官方下载 + 完整安装 + 全套优化配置(2026最新)
开发语言·人工智能·python·前端框架·html·notepad++
星栈1 天前
LiveView 的 LiveComponent:比 React 组件更轻,但我一开始真的把它用错了
前端·前端框架·elixir
天丁o1 天前
Spring Boot + uni-app 智慧考勤闭环 Demo:打卡记录、异常状态和日统计如何复用到企业系统
spring boot·uni-app·mybatis plus·企业管理系统·考勤系统