mini-program01の系统认识微信小程序开发

一、官方下载并安装

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设计,界面简洁,功能强大,有丰富的插件生态系统,支持团队协作和版本管理。
相关推荐
晓翔仔10 小时前
小程序个人信息安全检测技术:从监管视角看加密与传输合规
小程序
咸虾米1 天前
微信小程序服务端api签名,安全鉴权模式介绍,通过封装方法实现请求内容加密与签名
vue.js·微信小程序·uni-app
—Qeyser1 天前
小程序UI(自定义Navbar)
小程序
2501_915921431 天前
iOS 应用上架多环境实战,Windows、Linux 与 Mac 的不同路径
android·ios·小程序·https·uni-app·iphone·webview
Goona_2 天前
PyQt多窗口应用开发:构建完整的可二次开发用户登录注册模板
python·小程序·excel·pyqt
wstcl2 天前
安卓app、微信小程序等访问多个api时等待提示调用与关闭问题
android·微信小程序·webapi
咸虾米2 天前
微信小程序通过uni.chooseLocation打开地图选择位置,相关设置及可能出现的问题
vue.js·微信小程序
AAA修煤气灶刘哥2 天前
微信小程序+Spring Boot:三步教你搞定微信小程序登录+Token加密+全局拦截器
spring boot·后端·微信小程序
yw00yw2 天前
小程序插件使用
java·小程序·apache
00后程序员张2 天前
iOS 应用上架常见问题与解决方案,多工具组合的实战经验
android·ios·小程序·https·uni-app·iphone·webview