1.小程序項目的結構

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

說明：

• app.js 是小程序的入口文件，運行小程序，第一個被運行的就是 app.js
• app.json 是小程序的全局配置文件，對小程序每個頁面生效
• app.wxss 是小程序的全局樣式文件，對小程序每個頁面生效
  注意：
• 對于小程序運行而言，app.js 和 app.json 是必不可少的
• 對于小程序頁面而言， .js 和 .html 文件是必不可少的

2.小程序頁面的結構

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

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

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

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

3.創(chuàng)建小程序頁面

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

注意：

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

4.修改小程序項目的默認首頁

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

5.text文本組件的用法

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

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

001 - text 組件的屬性

注： 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>

6.view視圖容器組件的用法

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

001 - 組件的屬性

image.png

002 - 代碼案例

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

7.button按鈕組件的用法

001 - 組件的屬性

注：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>

8.input文本輸入框組件的用法

001 - input 組件屬性

注：input 組件的詳細文檔

002 - 案例代碼

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

9.image圖片組件的用法

001 - image 組件常用的屬性

• src -- 支持本地和網(wǎng)絡上的圖片
• 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(WeiXin Style Sheets)是一套樣式語言，用來決定 WXML 的組件應該怎么顯示；
WXSS 具有 CSS 大部分特性；
WXSS 對 CSS 進行了擴充以及修改，以適應微信小程序的開發(fā)；
與 CSS 相比，WXSS 擴展的特性有：

• 尺寸單位

• 樣式導入

  
  
  image.png

WXSS目前支持的選擇器

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

案例代碼

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（responsive pixel）: 是微信小程序獨有的、解決屏幕自適應的尺寸單位。

• 可以根據(jù)屏幕寬度進行自適應。不論大小屏幕，規(guī)定屏幕寬為750rpx。
• 通過rpx設置元素和字體的大小，小程序在不同尺寸的屏幕上，可以實現(xiàn)自動適配
  注：rpx 單位詳細文檔

rpx與px之間的換算

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

那么也就是說：如果在iPhone6上，
如果要繪制寬100px，高20px的盒子，換算成rpx單位，
寬高分別為 200rpx 和 40rpx
注：rpx 單位詳細文檔

rpx 和 iPhone6 設計稿的關系

開發(fā)微信小程序時設計師可以用 iPhone6 作為視覺稿的標準。
官方建議：
開發(fā)微信小程序時，設計師可以用 iPhone6 作為視覺稿的標準。
如果要根據(jù) iPhone6 的設計稿，繪制小程序頁面，可以直接把單位從 px 替換為 rpx 。
例如，假設 iPhone6 設計稿上，要繪制一個 寬高為 200px 的盒子，換算為 rpx 為 200rpx。

語法解釋

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

@import 樣式導入

語法解釋

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

案例代碼

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

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

局樣式和局部樣式

• 1. 全局樣式
     定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。
• 2. 局部樣式
     在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 app.wxss 中相同的選擇器。
     注意：當局部樣式的權重大于或等于全局樣式的權重時，才會覆蓋全局的樣式效果！