uni-app 微信小程序开发安装配置 HbuilderX 微信小程序开发工具

安装HbuilderX

官网下载:

https://www.dcloud.io/hbuilderx.html

编译器用来编写小程序代码

微信小程序开发工具

官网下载:https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

用于小程序的页面调试

创建项目

HbuilderX创建项目

结构如下

java 复制代码
|-- 项目根目录
    |-- components          // 存放自定义组件
    |-- pages               // 存放各个页面
        |-- index
            |-- index.vue   // 首页文件
    |-- static              // 存放静态资源,如图片、样式等
    |-- unpackage           // 打包输出目录
    |-- App.vue             // 应用入口文件
    |-- main.js             // 应用入口文件
    |-- manifest.json       // 配置文件
    |-- pages.json          // 页面配置文件
    |-- uni.scss            // 通用样式文件

获取APPID

微信公众平台:https://mp.weixin.qq.com/

HbuilderX 配置APPID

配置小程序安装路径

HbuilderX 选择微信开发者工具的安装路径

打开微信小程序服务端口

开启后HbuilderX 就可以自动调用小程序开发工具完成预览

完成效果

相关推荐
ModyQyW16 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
耶啵奶膘1 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
racerun1 天前
小程序导航设置更多内容的实现方法
小程序
说私域1 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6681 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳1 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1211 天前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero2 天前
微信小程序41~50
微信小程序·小程序