1.2 从第一个简单的“Welcome”页面开始小程序之旅

1、认识小程序的基本文件结构

image.png

• 根目录有3个文件，这3个文件属于应用程序级别的文件：
  1）app.js ：小程序逻辑文件
  2）app.json：小程序配置文件
  3）app.wxss：全局公共样式文件

• pages文件夹
  一个小程序由若干个页面文件构成，如上图所示有welcome页面和movie页面

• 页面文件组成（页面的文件名必须与文件夹名一致）
  1）.js文件，主要是编写页面逻辑
  2）.wxml文件，主要是编写页面的骨架结构
  3）.wxss文件，页面样式表
  4）.json文件，页面配置

2、开始动手编写第一个小程序页面

image.png
image.png
image.png
image.png

app.json

image.png

welcome.js

image.png

welcome.json

image.png

加上以上的代码，程序就能够跑起来了，如下所示：

image.png

新建一个页面，一次性新建4个文件的方法

image.png

3、构建welcome页面的元素和样式

welcome.xml

<view>
  <image></image>
  <text>你好！微信小程序</text>
  <view>
    <text>开启小程序之旅</text>
  </view>
</view>

这段代码主要用了view、text、image组件，不同于html的标签，标签的属性比较少，小程序组件的属性属性比较丰富。

如何把图片导入小程序中？

image.png image.png image.png

相对路径与绝对路径

1）绝对路径：以“/”开头，“/”代表根目录

image.png

2）相对路径： “..” 表示向上一级

image.png

welcome.wxml

<view class='container'>
  <image class='avatar' src='/images/avatar/avatar-1.png'></image>
  <text class='motto'>你好！微信小程序</text>
  <view class='journey-container'>
    <text class='journey'>开启小程序之旅</text>
  </view>
</view>

编写welcome页面的样式

welcome.wxss

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar{
  width: 200rpx;
  height: 200rpx;
  margin-top: 160rpx;
}

.motto{
  margin-top: 100rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #9F4311;
}

.journey-container{
  margin-top: 200rpx;
  border: 1px solid #EA5A3C;
  width: 200rpx;
  height: 80rpx;
  border-radius: 5px;
  text-align: center;
}

.journey{
  font-size: 22rpx;
  font-weight: bold;
  line-height: 80rpx;
  color: #EA5A3C;
}

image.png

margin知识详解

image.png

4、小程序所支持的CSS选择器

• 小程序中CSS只支持6种CSS选择器：
  1）.class
  .sample 选择所有拥有class="sample"的组件
  2）#id
  3）element
  4）Element,element
  5）::after
  在view组件后边插入内容
  6）:::before
  在view组件前边插入内容

当多种选择器共存的时候，选择先后排序：#id > .class > element

5、Flex布局

Flex布局被称为 弹性布局，主要用于在容器上

image.png

• flex-direction属性指定view内元素的排序方向，主要的属性可以有：
  1）row
  2）column
  3）row-reverse
  4）column-reverse

• align-items属性：
  定义子元素在交叉线上如何对齐

6、小程序自适应单位rpx简介

在小程序中，长度单位即可以使用rpx，也可以使用px，使用rpx可以使组件自适应屏幕的高度和宽度，但使用px不会。

对于margin-top或者是image组件的高度，很多时候，需要他们随着设备的尺寸不同动态变化，以保持页面元素之间的分布可以保持一定的比例关系。

image.png image.png

7、全局样式文件app.wxss

改变页面text组件字体

welcome.wxss

image.png

如果有很多个页面，那是不是要在每一个页面上？其实可以把它放到全局里面去

app.wxss

.text{
  font-family: Microsoft YaHei;
}

8、页面的根元素page

向.container中新增背景色

welcome.wxss

image.png

什么鬼，背景色只是改变了一部分，查看一下页面元素

image.png

welcome.wxss

image.png
image.png

9、app.json中的window配置项

window配置可用来设置小程序的状态栏、导航栏、标题和窗口的背景色

设置导航栏的背景色

app.json

image.png
image.png
image.png