一、官方下载并安装
1、下载(I选了稳定版)
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htmlhttps://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2、安装(A FEW MOMENT LATER)
3、运行 (CLICK+)
4、项目创建(模板一般选第一个,ID先选测试号,不使用云服务)
二、认识界面
1、开发者工具分区:
模拟器:小程序效果预览
编辑器:代码编写区域
调试器:含Console、Sources、Network等调试工具
工具栏:含编译、预览、上传等操作按钮
2、编辑器主要构成部分
一个小程序页面由四个文件组成:
文件类型 | 作用 |
---|---|
js | 页面逻辑,是脚本 |
wxml | 页面结构,xml是一种扩展标记语言(和HTML类似) |
json | 页面配置,可以看成是一个轻量级数据库文件,本质上就是带有一定格式的数据存储文件。 |
wxss | 页面样式表,xss就是样式文件定义页面格式和配色的 |
三、编辑器操作
│ app.js:整个项目的启动文件
│ app.json:整个项目的配置文件,样式,页面标题等;
│ app.wxss:对应index.css
│ project.config.json:默认项目配置文件
│ project.private.config.json:默认项目配置文件
│
├─images:图片素材
├─libs:libs文件夹是一个集中管理项目所需外部资源和代码的地方,使得项目结构更加清晰,便于团队协作和后期维护。
│ xx-wx.js
│ xx-wx.min.js
├─pages:页面
│ ├─index:首页
│ │ index.js
│ │ index.wxml
│ │ index.wxss
│ ├─logs:日志
│ │ logs.js
│ │ logs.json
│ │ logs.wxml
│ │ logs.wxss
│ ├─news:新闻页
│ │ news.js
│ │ news.json
│ │ news.wxml
│ │ news.wxss
│ │
└─utils:用于存放工具函数和辅助方法
util.js
四、代码编辑工具
1、官方开发工具
- 微信开发者工具:由微信官方提供,集代码编写、预览、调试和发布等功能于一体,支持可视化编辑,与微信平台无缝对接,是开发微信小程序的核心工具
2、代码编辑器
- Visual Studio Code:免费开源的跨平台代码编辑器,通过安装相关插件,支持微信小程序的开发,具备强大的代码补全、调试和版本控制等功能
- Sublime Text:轻量级、高性能的文本编辑器,可安装插件支持微信小程序开发,界面简洁,支持多种编程语言
3、其他开发工具
- HBuilder:支持HTML5的跨平台开发工具,提供可视化布局、代码生成、实时预览等功能,支持uni⁃app框架,一套代码可多端适配。
- Egret Wing:专为微信小程序设计,支持JavaScript、WXML、WXSS等开发语言,提供丰富的组件和模板。
- PyCharm:针对Python开发的IDE,通过安装插件可支持微信小程序开发,适用于高级开发者。
4、SaaS小程序制作平台
- 即速应用:支持拖拽式操作,无需编写代码即可完成小程序开发,提供丰富的行业模板和组件。
- 有赞:专注于零售行业,提供可视化编辑和丰富的营销插件,适合快速搭建电商类小程序。
5、设计工具
- Adobe XD:与Adobe系列软件无缝衔接,可导入素材并导出适合开发的格式,提升设计质量和效率。
- Sketch:主要用于UI设计,界面简洁,功能强大,有丰富的插件生态系统,支持团队协作和版本管理。