小程序初学

1. ⼩程序结构⽬录
   ⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML和 WXSS，以及JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

1.1 ⼩程序⽂件结构和传统web对⽐
结构 传统web 微信小程序
结构 HTML WXML
样式 CSS WXSS
逻辑 Javascript Javascript
配置 无 JSON
通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序是四层结构，多了⼀层配置.json

2. ⼩程序配置⽂件
   ⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的app.json和⻚⾯⾃⼰的page.json
   注意：配置文件中不能出现注释

2.1 全局配置app.json
app.json是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部 tab等。普通快速启动项⽬⾥边的app.json配置
。（图）字段的含义

1. pages
   字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序
   ⻚⾯定义在哪个⽬录。
2. window
   字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
3. 完整的配置信息请参考app.json配置。

2.2 ⻚⾯配置page.json
这⾥的 page.json其实⽤来表⽰⻚⾯⽬录下的 page.json这类和⼩程序⻚⾯相关的配置。开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。⻚⾯的配置只能设置 app.json中部分 window配置项的内容，⻚⾯中配置项会覆盖 app.json的 window
中相同的配置项。

3. 样式 WXSS
   WXSS( WeiXin Style Sheets)是⼀套样式语⾔，⽤于描述 WXML的组件样式。与 CSS 相⽐，WXSS 扩展的特性有：响应式长度单位rpx；样式导入。

3.1尺寸单位
rpx( (responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽为75rpX。如在iPhone6上,屏幕宽度为375pX,共有750个物理像素,则758rpx=375p×=758物理像素,1rpx=0.5pX=1物理像素。使用步骤:1.确定设计稿宽度 pageWidth2.计算比例758rpX= pageWidth px,因为1px=758rpx/ pageWidth3.在ess件中,只要把设计稿中的px=>750/pagewidth rpx即可。

3.2样式导入wxss中直接就支持,样式导入功能。也可以和ess中的导入混用。使用 Import语句可以导入外联样式表,只支持相对路径。

3.3 小程序中使用ess原生小程序不支持Less,其他基于小程序的框架大体都支持,如wepy, move,taro等。但是仅仅因为一个ess功能,而去引入一个框架,肯定是不可取的。因此可以用以下方式来实现。