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设计,界面简洁,功能强大,有丰富的插件生态系统,支持团队协作和版本管理。
相关推荐
徐礼昭|商派软件市场负责人11 小时前
从“多、老、旧”到“4i焕新”:品牌官方商城(小程序/官网/APP···)的范式跃迁与增长再想象
小程序·商城系统·零售
胡西风_foxww1 天前
微信小程序转Vue2组件智能提示词
微信小程序·小程序·提示词·智能体·vue2组件
七七软件开发1 天前
一对一交友小程序 / APP 系统架构分析
java·python·小程序·系统架构·php
2501_916007471 天前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
说私域1 天前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量拉新策略研究
人工智能·小程序·开源
2501_915918411 天前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview
七七软件开发1 天前
团购商城 app 系统架构分析
java·python·小程序·eclipse·系统架构·php
七七软件开发1 天前
打车小程序 app 系统架构分析
java·python·小程序·系统架构·交友
换日线°2 天前
css 不错的按钮动画
前端·css·微信小程序
说私域2 天前
从渠道渗透到圈层渗透:开源链动2+1模式、AI智能名片与S2B2C商城小程序的协同创新路径研究
人工智能·小程序·开源