文章目錄

• • • • 小程序基礎 第二天
      • • 一、 小程序項目的結構
        • 二、小程序頁面的結構
        • • 001 - 小程序頁面和 `Vue` 組件的對比
          • 002 - 小程序頁面中每個文件的作用
        • 三、創(chuàng)建小程序頁面
        • 四、修改小程序項目的默認首頁
        • 五、text文本組件的用法
        • • 001 - text 組件的屬性
          • 002 - 代碼案例
        • 六、view視圖容器組件的用法
        • • 001 - 組件的屬性
          • 002 - 代碼案例
        • 七、button按鈕組件的用法
        • • 001 - 組件的屬性
          • 002 - 案例代碼
        • 八、input文本輸入框組件的用法
        • • 001 - input 組件屬性
          • 002 - 案例代碼
        • 九、image圖片組件的用法
        • • 001 - image 組件常用的屬性
          • 002 - 案例代碼
        • 十、`wxss` 中常用的樣式選擇器
        • • 001 - 初始 `wxss`
          • 002 - `wxss` 和 `css` 的區(qū)別
        • 十一、什么是 `wxss`
        • • 001 - `wxss` 目前支持的選擇器
          • 002 - 案例代碼
        • 十二、什么是 `rpx` 尺寸單位
        • 十二、`rpx` 與 `px` 之間的換算
        • 十二、`rpx` 和 `iPhone6` 設計稿的關系
        • 十三、 `@import` 樣式導入
        • • 001 - 語法解釋
          • 002 - 案例代碼
        • 十四、 全局樣式和局部樣式
        • • 001 - 全局樣式
          • 002 - 局部樣式
        • 十五、`app.json` 配置文件
        • 十六、`pages` 數組的用法
        • • 001 - 基礎配置
          • 002 - 創(chuàng)建頁面的另一種方式
          • 003 - 設置項目的首頁
        • 十七、小程序窗口的組成部分
        • 十八、設置導航欄標題文字內容
        • 十九、設置導航欄背景色
        • 二十、設置導航欄標題顏色
        • 二十一、全局開啟下拉刷新功能
        • 二十二、設置下拉刷新窗口的背景色
        • 二十三、設置下拉loading的樣式
        • 二十四、設置上拉觸底的距離
        • 二十五、`tabBar` 的概念
        • 二十六、`tabBar` 的組成部分
        • 二十七、`tabBar` 節(jié)點的配置項
        • • 001 - `tabBar` 節(jié)點的配置項
          • 002 - list 節(jié)點的配置項
        • 二十八、頁面配置
        • • 001 - 頁面配置和局部配置的關系
          • 002 - 頁面配置屬性
        • 二十九、生命周期的概念
        • • 001 - 小程序的生命周期
          • 002 - 小程序生命周期的兩種類型
        • 三十 、小程序的生命周期函數
        • 三十一、應用生命周期函數
        • • 001 - 小程序生命周期的分類
          • 002 - 應用生命周期
        • 三十二、頁面生命周期函數

小程序基礎 第二天

---

一、 小程序項目的結構

├── pages ······································ 【目錄】存放所有的小程序頁面
│   │── index ···································· 【目錄】index 頁面
│   │   ├── index.wxml ······························· 【文件】 index 頁面的結構
│   │   ├── index.js ································· 【文件】 index 頁面的邏輯
│   │   ├── index.json ······························· 【文件】 index 頁面的配置
│   │   └── index.wxss ······························· 【文件】 index 頁面的樣式
│   └── logs ····································· 【目錄】 logs 頁面
│       ├── logs.wxml ································ 【文件】 logs 頁面的結構
│       └── logs.js ·································· 【文件】 logs 頁面的邏輯
└── utils ······································ 【目錄】 存放小程序中用到的工具函數
├── app.js ····································· 【文件】 小程序邏輯
├── app.json ··································· 【文件】 小程序的公共配置
├── app.wxss ··································· 【文件】小程序公共樣式表
├── project.config.json ························ 【文件】 開發(fā)工具配置文件

說明：

• app.js 是小程序的入口文件，運行小程序，第一個被運行的就是 app.js
• app.json 是小程序的全局配置文件，對小程序每個頁面生效
• app.wxss 是小程序的全局樣式文件，對小程序每個頁面生效

注意：

• 對于小程序運行而言，app.js 和 app.json 是必不可少的
• 對于小程序頁面而言， .js 和 .html 文件是必不可少的

---

二、小程序頁面的結構

001 - 小程序頁面和 Vue 組件的對比

• 每個 .vue 文件，是由 template 模板結構、script 行為邏輯、style 樣式三部分組成的
• 每個小程序頁面，是由 .wxml 結構、.js 邏輯文件、.json 配置、.wxss 樣式表這四部分組成的

002 - 小程序頁面中每個文件的作用

• .wxml : 用來描述當前這個頁面的標簽結構，同時提供了類似于 Vue 中指令的語法
• .js : 用來定義當前頁面中用到的數據、交互邏輯和響應用戶的操作
• .json : 用來定義當前頁面的個性化配置，例如，為每個頁面單獨配置頂部顏色、是否允許下拉刷新等
• .wxss : 用來定義樣式來美化當前的頁面

---

三、創(chuàng)建小程序頁面

• 在 pages 目錄上右鍵，選擇 “新建目錄”，輸入目錄名稱
• 在新建的目錄上，再次右鍵，選擇 “新建 page” ，輸入 page 名稱

注意：

• 輸入 page 名稱以后，會自動創(chuàng)建四個文件

---

四、修改小程序項目的默認首頁

• 打開 app.json 全局配置文件，找到 pages 節(jié)點。這個 pages 節(jié)點是一個數組，存儲了項目中所有頁面的訪問路徑。其中，pages 數組中第一個頁面路徑，就是小程序項目的默認首頁。
• 所以只需要修改 pages 數組中路徑的順序，就可以可修改小程序的默認首頁。

---

五、text文本組件的用法

小程序提供了豐富的基礎組件給開發(fā)者，開發(fā)者可以像搭積木一樣，組合各種組件拼接稱自己的小程序

小程序中的組件，就像 HTML 中的 div 、p、span 等標簽的作用一樣，用于搭建頁面的基礎結構

001 - text 組件的屬性

屬性類型默認值必填說明selectablebooleanfalse否文本是否可選spacestring.否顯示連續(xù)空格，可選參數：ensp、emsp、nbspdecodebooleanfalse否是否解碼

注： text 組件詳細文檔

• text 組件相當于行內標簽、在同一行顯示
• 除了文本節(jié)點以外的其他節(jié)點都無法長按選中

002 - 代碼案例

<view>
  <!-- 長按文本是否可選 -->
  <text selectable='true'>web</text>
</view>

<view>
  <!-- 顯示連續(xù)空格的方式 -->
  <view>
    <text space='ensp'>H  a  c  k</text>
  </view>
  <view>
    <text space='emsp'>H  a  c  k</text>
  </view>
  <view>
    <text space='nbsp'>H  a  c  k</text>
  </view>
</view>

<view>
  <text>skyblue</text>
</view>

<view>
  <!-- 是否解碼 -->
  <text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
</view>

---

六、view視圖容器組件的用法

View 視圖容器， 類似于 HTML 中的 div

001 - 組件的屬性

注：View 的詳細文檔

002 - 代碼案例

<view hover-class='box1'>
  <view
    hover-stop-propagation='true'
    hover-class='box'
    hover-start-time='2000'
    hover-stay-time='3000'>
    box1
  </view>
</view>

---

七、button按鈕組件的用法

001 - 組件的屬性

屬性名類型默認值說明sizeStringdefault按鈕的大小typeStringdefault按鈕的樣式類型plainBooleanfalse按鈕是否鏤空，背景色透明disabledBooleanfalse是否按鈕loadingBooleanfalse名稱是否帶 loading t圖標

注：Button 組件的詳細文檔

• button 組件默認獨占一行，設置 size 為 mini 時可以在一行顯示多個

002 - 案例代碼

<button size='mini' type='primary'>前端</button>

<button size='mini' type='default' disabled='true'>前端</button>

<button size='mini' type='warn' loading='true'>前端</button>

---

八、input文本輸入框組件的用法

001 - input 組件屬性

屬性名類型默認值說明valueString.輸入框的初始內容typeString‘text’input 的類型passwordBooleanfalse是否是密碼類型placeholderSting.輸入框為空時占位符disabledBooleanfalse是否禁用maxlengthNumber140最大輸入長度，設置 -1 時不限制最大長度

注：input 組件的詳細文檔

002 - 案例代碼

<input placeholder='111' type='idcard' placeholder-style="color: skyblue" />

---

九、image圖片組件的用法

001 - image 組件常用的屬性

• src – 支持本地和網絡上的圖片
• mode – 指定圖片的裁剪、縮放的模式

注意：image 圖片組件詳細文檔

• image 組件默認的寬度是 300px 、高度是225px
• image組件中二維碼/小程序碼圖片不支持長按識別

002 - 案例代碼

<image src='/assets/5.jpg' mode='aspectFit'></image>

<image src='https://wx.qlogo.cn/mmhead/Q3auHgzwzM7teJKyb7Oicw6x2rDiaD5BkDPFP2kccFO6a566TzzUyUgA/0' mode='widthFix'></image>

---

十、wxss 中常用的樣式選擇器

WXSS 是一套樣式語言，用來決定 WXML 的組件應該怎么顯示

001 - 初始 wxss

• wxss 具有 css 大部分特性
• wxss 對 css 進行了擴充以及修改，以適應微信小程序的開發(fā)

注：wxss 詳細文檔

002 - wxss 和 css 的區(qū)別

• 尺寸單位
• 樣式導入

---

十一、什么是 wxss

001 - wxss 目前支持的選擇器

• 標簽選擇器
• id選擇器
• class選擇器
• 偽類選擇器
• data-*屬性選擇器
• :nth-of-type() 等常用的 css3 選擇器
• 其他…

注： wxss詳細文檔

002 - 案例代碼

view {
  font-size: 12px;
}

#box {
  color: skyblue;
}

.box {
  color: lightcoral;
}

.box1::before {
  content: '加油';
  color: lightgreen;
}

view:nth-of-type(4) {
  color: lightseagreen;
}

[data-color='pink'] {
  color: pink;
}

---

十二、什么是 rpx 尺寸單位

rpx： 是微信小程序獨有的，解決屏幕自適應的尺寸單位

• 可以根據屏幕寬度進行自適應，不論屏幕大小，規(guī)定屏幕寬為 750rpx
• 通過 rpx 設置元素和字體的大小，小程序在不同尺寸的屏幕上，可以實現自動適配

注：rpx 單位詳細文檔

---

十二、rpx 與 px 之間的換算

以 iPhone6 為例，iPhone6 的屏幕寬度為 375px ，共有 750 個物理像素，則 750rpx = 375px = 750 物理像素

也就是 1rpx = 0.5px = 1 物理像素

設備rpx 換算 px (屏幕寬度/750)px 換算 rpx (750/屏幕寬度)iPhone51rpx = 0.42px1px = 2.34rpxiPhone61rpx = 0.5px1px = 2rpxiPhone6 Plus1rpx = 0.552px1px = 1.81rpx

那么也就是說：如果在iPhone6上，

如果要繪制寬100px，高20px的盒子，換算成rpx單位，

寬高分別為 200rpx 和 40rpx

注：rpx 單位詳細文檔

---

十二、rpx 和 iPhone6 設計稿的關系

開發(fā)微信小程序時設計師可以用 iPhone6 作為視覺稿的標準。

官方建議：

開發(fā)微信小程序時，設計師可以用 iPhone6 作為視覺稿的標準。

如果要根據 iPhone6 的設計稿，繪制小程序頁面，可以直接把單位從 px 替換為 rpx 。

例如，假設 iPhone6 設計稿上，要繪制一個 寬高為 200px 的盒子，換算為 rpx 為 200rpx。

---

十三、 @import 樣式導入

001 - 語法解釋

• 使用 @import 語句可以導入外聯樣式表
• 語法格式：@import "wxss 樣式表文件的相對路徑"

002 - 案例代碼

@import "/assets/common/common.wxss";
/* @import "../../assets/common/common.wxss"; */

.box {
  width: 375rpx;
  height: 375rpx;
  background-color: skyblue;
}

---

十四、 全局樣式和局部樣式

001 - 全局樣式

• 定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。

002 - 局部樣式

• 在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 app.wxss 中相同的選擇器。

注意：當局部樣式的權重大于或等于全局樣式的權重時，才會覆蓋全局的樣式效果！

注：wxss 詳細文檔

---

十五、app.json 配置文件

小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置，

它決定了頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

1. 在 app.json 配置文件中，最主要的配置節(jié)點是：
   • pages 數組：配置小程序的頁面路徑
   • window 對象：用于設置小程序的狀態(tài)欄、導航條、標題、窗口背景色
   • tabBar 對象：配置小程序的tab欄效果

注：全局配置詳細文檔

---

十六、pages 數組的用法

app.json 中的 pages 數組，用來配置小程序的頁面路徑

001 - 基礎配置

• pages 用于指定小程序由哪些頁面組成，每一項都對應一個頁面的 路徑+文件名 信息。
• 文件名不需要寫文件后綴，框架會自動去尋找對應位置的 .json、 .js、 .wxml 和 .wxss 四個文件進行處理。

002 - 創(chuàng)建頁面的另一種方式

• 打開 app.json --> pages 數組節(jié)點 --> 新增頁面路徑并保存 --> 自動創(chuàng)建路徑對應的頁面

003 - 設置項目的首頁

• 打開 app.json -> pages 數組節(jié)點
• 按需調整數組中路徑的順序，即可修改默認首頁

注意事項：

• 數組的第一項代表小程序的小程序的初始頁面也就是首頁
• 小程序中新增/減少頁面，都需要對 pages 數組進行修改，否則在運行小程序時就會報錯

注：全局配置詳細文檔

---

十七、小程序窗口的組成部分

常見的屬性配置： 常見的屬性配置

十八、設置導航欄標題文字內容

• app.json --> window --> navigationBarTitleText
• 將屬性值修改即可

十九、設置導航欄背景色

• app.json --> window --> navigationBarBackgroundColor
• 將屬性值修改為指定的顏色就可以

二十、設置導航欄標題顏色

• app.json --> window --> navigationBarTextStyle
• 將屬性值修改為指定的顏色就可以

二十一、全局開啟下拉刷新功能

通過手指在屏幕上的下拉滑動操作，從而重新加載頁面數據的行為

• app.json --> window --> 把 enablePullDownRefresh 的值設置為 true

二十二、設置下拉刷新窗口的背景色

當全局開啟下拉刷新功能之后，默認的窗口背景為白色

• app.json -> window -> backgroundColor

二十三、設置下拉loading的樣式

當全局開啟下拉刷新功能之后，默認窗口的loading樣式為白色

• app.json --> window --> backgroundTextStyle

二十四、設置上拉觸底的距離

手指在屏幕上的上拉滑動操作，從而加載更多數據的行為

• app.json --> window --> onReachBottomDistance

注意： 默認距離為 50px，如果沒有特殊需求，建議使用默認值即可

二十五、tabBar 的概念

tabBar 是移動端應用常見的頁面效果，用于實現多頁面的快速切換；小程序中通常將其分為底部 tabBar 和頂部 tabBar

注意：tabBar 中，只能配置最少2個、最多5個 tab 頁簽，當渲染頂部 tabBar 的時候，不顯示 icon，只顯示文本

注： tabbar 詳細文檔

二十六、tabBar 的組成部分

• backgroundColor：導航條背景色
• selectedIconPath：選中時的圖片路徑
• borderStyle：tabBar上邊框的顏色
• iconPath：未選中時的圖片路徑
• selectedColor：tab 上的文字選中時的顏色
• color：tab 上的文字默認（未選中）顏色

二十七、tabBar 節(jié)點的配置項

001 - tabBar 節(jié)點的配置項

屬性類型必填默認值描述colorHexColor是.tab 上的文字默認顏色，僅支持十六進制顏色selectedColorHexColor是.tab 上的文字選中時的顏色，僅支持十六進制顏色backgroundColorHexColor是.tab 的背景色，僅支持十六進制顏色borderStylestring否blacktabBar 上邊框的顏色， 僅支持 black / whitelistArray是.tab 的列表，詳見 list 屬性說明，最少 2 個、最多 5 個 tabpositionstring否bottomtabBar 的位置，僅支持 bottom/ topcustomboolean否false自定義 tabBar

002 - list 節(jié)點的配置項

屬性類型必填說明pagePathstring是頁面路徑，必須在 pages 中先定義textstring是tab 上按鈕文字iconPathstring否圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81pxselectedIconPathstring否選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px

注意：

• 都不支持網絡圖片
• 當 position 為 top 時，不顯示 icon。

二十八、頁面配置

001 - 頁面配置和局部配置的關系

• app.json 中的 window 節(jié)點，可以全局配置小程序中每個頁面的窗口表現；
• 如果某些小程序頁面，想要擁有特殊的窗口表現，此時，“頁面級別的 .json 配置文件”就可以實現這種需求；

注意：頁面級別配置優(yōu)先于全局配置生效

002 - 頁面配置屬性

注： 頁面配置詳細文檔

二十九、生命周期的概念

生命周期（Life Cycle）是指一個對象從 創(chuàng)建 -> 運行 -> 銷毀 的整個階段，強調的是一個時間段。

001 - 小程序的生命周期

• 小程序的啟動，表示生命周期的開始
• 小程序的關閉，表示生命周期的結束
• 中間小程序運行的過程，就是小程序的生命周期

002 - 小程序生命周期的兩種類型

• 應用生命周期：特指小程序從啟動 --> 運行 --> 銷毀的過程；
• 頁面生命周期：特指小程序中，每個頁面的加載 --> 渲染 --> 銷毀的過程；

注意：頁面的生命周期范圍較小，應用程序的生命周期范圍較大

三十 、小程序的生命周期函數

小程序框架提供的內置函數，會伴隨著生命周期，自動按次序執(zhí)行

1. 生命周期函數的作用：

   允許程序員在特定的生命周期時間點上，執(zhí)行某些特定的操作。例如，頁面剛加載的時候，在生命周期函數中自動發(fā)起數據請求，獲取當前頁面的數據；

注意：生命周期強調的是時間段，生命周期函數強調的是時間點。

三十一、應用生命周期函數

001 - 小程序生命周期的分類

• 應用生命周期函數
• 頁面生命周期函數

002 - 應用生命周期

• app.js 是小程序執(zhí)行的入口文件，在 app.js 中必須調用 App() 函數，且只能調用一次。其中，App() 函數是用來注冊并執(zhí)行小程序的。
• App(Object) 函數接收一個 Object 參數，可以通過這個 Object 參數，指定小程序的生命周期函數。

app.js 代碼

App({

  /**
   * 當小程序初始化完成時，會觸發(fā)>: function () { },

  /**
   * 當小程序啟動，或從后臺進入前臺顯示，會觸發(fā)>: function (options) { },

  /**
   * 當小程序從前臺進入后臺，會觸發(fā)>: function () { },

  /**
   * 當小程序發(fā)生腳本錯誤，或者 api 調用失敗時，會觸發(fā)>: function (msg) { }
})

三十二、頁面生命周期函數

• 每個小程序頁面，必須擁有自己的 .js 文件，且必須調用 Page() 函數，否則報錯。其中 Page() 函數用來注冊小程序頁面。
• Page(Object) 函數接收一個 Object 參數，可以通過這個 Object 參數，指定頁面的生命周期函數。

頁面生命周期.js

//index.js
//獲取應用實例
const app = getApp()

Page({

  /**
   * 頁面的初始數據
   */
  data: { },

  /**
   * 生命周期函數--監(jiān)聽頁面加載
   */
 >: function (options) { },

  /**
   * 生命周期函數--監(jiān)聽頁面初次渲染完成
   */
 >: function () { },

  /**
   * 生命周期函數--監(jiān)聽頁面顯示
   */
 >: function () { },

  /**
   * 生命周期函數--監(jiān)聽頁面隱藏
   */
 >: function () { },

  /**
   * 生命周期函數--監(jiān)聽頁面卸載
   */
 >: function () { },

  /**
   * 頁面相關事件處理函數--監(jiān)聽用戶下拉動作
   */
 >: function () { },

  /**
   * 頁面上拉觸底事件的處理函數
   */
 >: function () { },

  /**
   * 用戶點擊右上角分享
   */
 >: function () { }
})