微信小程序简介、文件类型与目录结构、实例

一、微信小程序简介

1. 小程序的特点

• 简单、用完即走
• 低频
• 性能要求不高

2. 小程序定义

• 不需要下载安装（安装包<1M）
• 用户用完即走，不用关心是否安装太多应用
• 应用无处不在，随时使用（连接人与服务）

APP：体验差、成本高

小程序：流程简单、跨平台

3. 对开发者的影响

• 短期内提升市场对JS程序员的需求量
• 小程序是零基础开发者入门平台
• 小程序不可以使用已经存在的JS组件库
• 开发环境和开发逻辑简单

4. 编程基础

• JS
• ES6
• CSS

5. 微信小程序开发工具

调试在sm文件中打断点，js文件增加了编译的语句

ctrl+s 查找替换功能

二、小程序文件类型与目录结构

这里用游戏中的类比才能记得更加清楚！

1. html（英雄）

• wxml是编写小程序骨架的文件。

2. app.js （技能）

• 小程序的脚本代码，可监听并控制整个程序的生命周期，并且是全局变量声明的地方。
• 程序员通过app.js 调用框架提供的诸多API，比如同步存储、同步读取本地数据。

3. app.json（铭文）

• 对整个小程序的全局配置，不可注释。
• 配置小程序页面组成、窗口背景色、导航条样式、默认标题等。

4. app.wxss（皮肤）

• 小程序的公共样式表。可在页面组件的class类属性上直接使用app.wxss中声明的样式规则。

三、实例：编写第一个界面

1. 显示文字和图片（编写小程序骨架 .wxml）

• 用text包围的文字才能被用户长按选中
• 加入图片的方法：新建文件夹

2. 调整样式

①直接在wxml文件里写

②转移到wxss文件中写

定义容器：弹性、纵向排列、居中

修改字体（可以直接在app.wxss里统一修改字体）

文字加框（边框颜色、大小、圆角）

3. 导航栏