1、認(rèn)識(shí)小程序的基本文件結(jié)構(gòu)

image.png

• 根目錄有3個(gè)文件，這3個(gè)文件屬于應(yīng)用程序級(jí)別的文件：
  1）app.js ：小程序邏輯文件
  2）app.json：小程序配置文件
  3）app.wxss：全局公共樣式文件

• pages文件夾
  一個(gè)小程序由若干個(gè)頁(yè)面文件構(gòu)成，如上圖所示有welcome頁(yè)面和movie頁(yè)面

• 頁(yè)面文件組成（頁(yè)面的文件名必須與文件夾名一致）
  1）.js文件，主要是編寫頁(yè)面邏輯
  2）.wxml文件，主要是編寫頁(yè)面的骨架結(jié)構(gòu)
  3）.wxss文件，頁(yè)面樣式表
  4）.json文件，頁(yè)面配置

2、開始動(dòng)手編寫第一個(gè)小程序頁(yè)面

image.png

image.png

image.png

image.png

app.json

image.png

welcome.js

image.png

welcome.json

image.png

加上以上的代碼，程序就能夠跑起來(lái)了，如下所示：

image.png

新建一個(gè)頁(yè)面，一次性新建4個(gè)文件的方法

image.png

3、構(gòu)建welcome頁(yè)面的元素和樣式

welcome.xml

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

這段代碼主要用了view、text、image組件，不同于html的標(biāo)簽，標(biāo)簽的屬性比較少，小程序組件的屬性屬性比較豐富。

如何把圖片導(dǎo)入小程序中？

image.png

image.png

image.png

相對(duì)路徑與絕對(duì)路徑

1）絕對(duì)路徑：以“/”開頭，“/”代表根目錄

image.png

2）相對(duì)路徑： “..” 表示向上一級(jí)

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頁(yè)面的樣式

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知識(shí)詳解

image.png

4、小程序所支持的CSS選擇器

• 小程序中CSS只支持6種CSS選擇器：
  1）.class
  .sample 選擇所有擁有class="sample"的組件
  2）#id
  3）element
  4）Element,element
  5）::after
  在view組件后邊插入內(nèi)容
  6）:::before
  在view組件前邊插入內(nèi)容

當(dāng)多種選擇器共存的時(shí)候，選擇先后排序：#id > .class > element

5、Flex布局

Flex布局被稱為 彈性布局，主要用于在容器上

image.png

• flex-direction屬性指定view內(nèi)元素的排序方向，主要的屬性可以有：
  1）row
  2）column
  3）row-reverse
  4）column-reverse

• align-items屬性：
  定義子元素在交叉線上如何對(duì)齊

6、小程序自適應(yīng)單位rpx簡(jiǎn)介

在小程序中，長(zhǎng)度單位即可以使用rpx，也可以使用px，使用rpx可以使組件自適應(yīng)屏幕的高度和寬度，但使用px不會(huì)。

對(duì)于margin-top或者是image組件的高度，很多時(shí)候，需要他們隨著設(shè)備的尺寸不同動(dòng)態(tài)變化，以保持頁(yè)面元素之間的分布可以保持一定的比例關(guān)系。

image.png

image.png

7、全局樣式文件app.wxss

改變頁(yè)面text組件字體

welcome.wxss

image.png

如果有很多個(gè)頁(yè)面，那是不是要在每一個(gè)頁(yè)面上？其實(shí)可以把它放到全局里面去

app.wxss

.text{
  font-family: Microsoft YaHei;
}

8、頁(yè)面的根元素page

向.container中新增背景色

welcome.wxss

image.png

什么鬼，背景色只是改變了一部分，查看一下頁(yè)面元素

image.png

welcome.wxss

image.png

image.png

9、app.json中的window配置項(xiàng)

window配置可用來(lái)設(shè)置小程序的狀態(tài)欄、導(dǎo)航欄、標(biāo)題和窗口的背景色

設(shè)置導(dǎo)航欄的背景色

app.json

image.png

image.png

image.png