【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

相关推荐
We་ct1 小时前
React Hooks 核心原理
前端·react.js·链表·前端框架·reactjs·hooks
QD_ANJING2 小时前
2026年大厂前端高频面试原题-React框架200题
开发语言·前端·javascript·react.js·面试·职场和发展·前端框架
你的眼睛會笑3 小时前
uni-app 实战:使用 lime-painter 实现页面内容一键生成海报并下载
uni-app
一字白首3 小时前
微信小程序进阶实战:从 UI 组件库到全局状态管理全解DAY05
ui·微信小程序·小程序
小江的记录本3 小时前
【Filter / Interceptor】过滤器(Filter)与拦截器(Interceptor)全方位对比解析(附底层原理 + 核心对比表)
java·前端·后端·spring·java-ee·前端框架·web
一只程序熊3 小时前
uniapp 高德地图 打开选择地址报错,也没有展示出附近的位置
android·uni-app
海石17 小时前
微信小程序开发02:原始人也能看懂的着色器与视频处理
前端·微信小程序·视频编码
li90566328020 小时前
hanzi-writer-miniprogram Path2D问题以及Bug修复
微信小程序·bug
2501_915909061 天前
不用越狱就看不到 iOS App 内部文件?使用 Keymob 查看和导出应用数据目录
android·ios·小程序·https·uni-app·iphone·webview
万物得其道者成1 天前
uni-app Android 离线打包:多环境(prod/dev)配置
android·opencv·uni-app