02-WxApp结构

1 小程序项目文件

1.1 页面文件

小程序的每个页面都由以下四个文件构成

• .json 页面配置 （这个文件不是必须的，如果有则必须有一个json对象{}）
  • 如导航栏的颜色，标题文字内容
• .wxml 内容结构，页面的骨架
• .wxss 样式美化
• .js 逻辑处理,默认需要一个Page对象

  Page({
  })
  

1. 小程序平台，在wxml文件中不需要引入wxss，因为平台默认了页面之间的关系。
2. 在wxml文件中默认有一个Page组件将wxml文件的内容进行了包裹。在设置整个页面的背景色时，需要将page的高度设置为100%（以防内容不能填充满整个屏幕）

   page{
   	heigth: 100%;
   	background-color: #b3d4db;
   }
   

1.2 应用程序文件

• app.js 应用程序入口
• app.json 小程序应用程序全局配置文件,
  • 指定首页的位置
  • 用于设置小程序的状态栏、导航条、标题、窗口背景色
• app.wxss 样式为全局
  • 样式满足就近覆盖原则，如果页面设置了对应的样式，则使用页面的样式。
  • 全局设置，可以避免具体页面样式的重复
• project.config.json 项目配置文件，如字体，字号，缩进等

1.3 工具文件夹

1. utils/utils.js

1.4 页面命名

四个文件名称与文件夹名相同

• welcome
  • welcome.js
  • welcome.wxml
  • welcome.css
  • welcome.json

2 小程序内置组件

小程序原生内置组件,并且这些组件都有相应的属性，对其进行丰富

2.1 view

view 相当于div,一般用来做容器和分隔文档

2.2 text

处理文本，除了文本节点以外的其他节点都无法长按选中，所以处理文本时，最好用text组件进行包裹，而不是直接写文字。

2.3 image

<image src="/root/path"></image> 并且默认样式为：width: 300px;height: 225;

rpx会随着机型的不同而自适应改变视角效果,而px则不会；如果需要使用操作系统显示的尺寸，则需要除以2，这里是以iphone 6为视觉稿

3. flex布局

又称弹性盒子模型，将容器变成弹性盒子模型display: flex;，可以指定该容器里的元素的排布方式flex-direction: column;。值得一提的是还有容器的弹性盒子模型中的元素进行居中align-items: center;

4. 移动设备分辨率与rpx

以移动端而不是网页的开发视角来开发程序

视角看到的是逻辑分辨率（pt）与屏幕大小有关系，会自适应，而图片等具有实际的物理分辨率(px)

如：iphone 6的屏幕宽度是375，而一张图片宽度是750，那么如何在屏幕上展示完整的图片呢，这就取决需要设备的逻辑分辨率了，在iphone 6中每个逻辑分分辨率能容纳两个物理分辨率，即@2x（1个pt可以有1个px构成，也可以是2个，3个px。iphone 6由2个px构成1个pt）;是一个二倍关系。所以在设置图片的宽度是应该为width: 250px而不是width: 500px;

由于iphone 6机型是2倍换算关系，而其他机型则不同，所以数值不能固定，rpx能自适应不同机型，会自动进行换算。1px=1rpx=0.5pt

以iphone 6作为物理分辨率来做设计图，因为 1px = 1rpx; 而其他机型如 iphone 6 plus 为 1px = 0.6rpx则需要自己去计算一遍。

注意：并不是所有单位都需要做rpx自适应，如文字的大小，如果屏幕小，则内容就看不清楚了。

5. 项目练习

构建一个基本的页面的结构，效果如下， ( )一>“项目链接”

---