【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

相关推荐
VX_bysjlw9859 小时前
基于微信小程序的宠物用品商城系统-后端74346-计算机毕设原创(免费领源码+带部署教程)
java·redis·微信小程序·eclipse·mybatis·idea·微信开发者工具
码农学院12 小时前
React公众号开发:母婴用品会员积分体系技术方案
前端·react.js·前端框架
一只昀13 小时前
基于微信小程序的咖啡店点餐小程序
微信小程序·小程序
2501_915918411 天前
深入对比iOS开发中常用性能监控工具的底层原理与优缺点分析
android·ios·小程序·https·uni-app·iphone·webview
AI多Agent协作实战派1 天前
AI多Agent协作系统实战(二十三):Agent读HEARTBEAT.md不读AGENTS.md——openclaw的文件加载之谜
前端·数据库·人工智能·uni-app
gis开发之家1 天前
《Vue3 从入门到大神37篇》Vue3 源码详解(七):watch 与 watchEffect 源码对比——副作用是如何被追踪的?
javascript·前端框架·vue3·vue3源码
tg-zm8899961 天前
uni-app开发经验分享-跨端开发经验总结
uni-app
sugar__salt1 天前
useState 深入浅出:React 状态管理的基石
前端·react.js·前端框架
m0_547486662 天前
《Vue.js + uni-app全栈开发从入门到实践 》全套PPT课件2026版
vue.js·uni-app
先吃饱再说2 天前
React 组件通信:从 Props 单向传递到自定义事件
前端·react.js·前端框架