【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

相关推荐
木易 士心5 小时前
组织架构树形选择组件使用说明(Vue3 + UniApp)
微信小程序·钉钉·notepad++
软件技术员6 小时前
微信小程序电子测宅堪墓风水罗盘
微信小程序·小程序
Q_Q5110082857 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
2501_916007479 小时前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者810 小时前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
努力就够了11 小时前
微信小程序:日常零售供应系统
微信小程序·erp·接单·零售系统
peachSoda712 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
2501_9159090613 小时前
iOS 26 文件管理实战,多工具组合下的 App 数据访问与系统日志调试方案
android·ios·小程序·https·uni-app·iphone·webview
盛夏绽放13 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
云起SAAS14 小时前
ai周公解梦抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·ai周公解梦