小程式入門01 - 頁面代碼組成

寫在前面：

1. 本文是單純的個人學習總結和課堂筆記整理，大部分知識點來自“開課吧”線上直播課程，以及官方資料。
2. 由于目前仍處于前端學習、入門階段，是以對于知識的掌握和了解難免會有偏差，是以該文章僅僅是個人記錄，請查閱者不要以此作為資料依據。

簡介

微信小程式是小程式中的一種，英文名 WeChat Mini Program，基于JavaScript語言開發，是一種不需要現在安裝就可以使用的應用。

小程式的主要開發語言是 JavaScript ，小程式的開發同普通的網頁開發相比有很大的相似性。對于前端開發者而言，從網頁開發遷移到小程式的開發成本并不高，但是二者還是有些許差別的。

• 網頁開發渲染線程和腳本線程是互斥的，這也是為什麼長時間的腳本運作可能會導緻頁面失去響應
• 在小程式中，二者是分開的，分别運作在不同的線程中。小程式的邏輯層和渲染層是分開的，邏輯層運作在 JSCore 中，并沒有一個完整浏覽器對象，也就是虛拟 DOM，因而缺少相關的 DOM API 和 BOM API。這一差別導緻了前端開發非常熟悉的一些庫，例如 jQuery 、 Zepto 等，在小程式中是無法運作的。同時 JSCore 的環境同 NodeJS 環境也是不盡相同，是以一些 NPM 的包在小程式中也是無法運作的。
• 網頁開發者需要面對的環境是各式各樣的浏覽器，PC 端需要面對 IE、Chrome、QQ浏覽器等，在移動端需要面對Safari、Chrome以及 iOS、Android 系統中的各式 WebView 。
• 小程式開發過程中需要面對的是兩大作業系統 iOS 和 Android 的微信用戶端，以及用于輔助開發的小程式開發者工具，小程式中三大運作環境也是有所差別的，如下表所示。

運作環境	邏輯層	渲染層
IOS	JavaScriptCore	WKWebView
Android	V8	chromium定制核心
小程式開發者工具	NWJS	Chrome WebView

代碼組成

小程式開發代碼主要由四部分組成：

1. .json 字尾的是配置檔案
2. .wxml 字尾的是模闆檔案
3. .wxss 字尾的是樣式檔案
4. .js 字尾的是腳本邏輯檔案

前端頁面主要是由 html css js 三類檔案組成，與之對應的微信小程式的開發檔案也是如此，wxml 檔案主要負責頁面結構的聲明，wxss檔案是負責頁面樣式的聲明，js檔案就是js檔案負責腳本邏輯的聲明。整體來說，大部分文法基本與原生文法一緻。

如下圖，是一個小程式的項目目錄。

JSON檔案

JSON 是一種資料格式，并不是程式設計語言，在小程式中，JSON扮演的靜态配置的角色。

可以看到，在項目根目錄下面有 app.json 、 project.config.json 、 sitemap.json 三個檔案，并且每一個 page 檔案夾内，都有一個對應的 json 配置檔案。下面一一簡單過一下每個檔案的功能。

app.json 小程式配置

{  "pages":["pages/02-page/02-page","pages/03-wxss/03-wxss","pages/04-js/04-js",  "pages/index/index","pages/logs/logs"
  ],  "window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#00acec","navigationBarTitleText": "代碼組成","navigationBarTextStyle":"white"
  },  "style": "v2",  "sitemapLocation": "sitemap.json"}複制代碼      

上面代碼中的配置項主要分兩部分：

• pages —— 用來描述目前小程式頁面的路徑，在這裡聲明好之後，微信開發者工具可以自動生成目錄和基本檔案。
• windows——定義小程式所有頁面的頂部北京顔色、文字顔色定義等。

project.config.json 工具配置

項目配置檔案，用來聲明項目中的一些個性化配置，比如編輯器的顔色、代碼上傳時自動壓縮等等一系列配置選項。這裡不再展開。

sitemap.json 索引配置

索引配置用來配置小程式以及頁面是否允許被微信索引，檔案内容是一個json對象，如果沒有聲明改檔案，則預設所有頁面都允許被索引。

{  "desc": "關于本檔案的更多資訊，請參考文檔 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",  "rules": [{  "action": "allow",  "page": "*"
  }]
}複制代碼      

更多索引配置移步官方文檔參考：https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

wxml 檔案

xwml 和 html 非常相似，都有标簽、屬性等等構成，但是也有很多不一樣的地方：

• 标簽名字不一樣
  • 比如在 html 檔案裡面，常用到的标簽是div p span等等标簽
  • 但是在 wxml 檔案裡面，标簽大部分是根據用途語義化的。如，view text等
• 屬性不一樣
  • 在 wxml 檔案中，多了類似 vue 的屬性聲明，如 wx:if 等
• 表達式不一樣
  • 多了一個插值表達式  {{ }}

接下來，我們還是用代碼說話，看一看wxml檔案的文法

資料綁定及Mustache文法

首先，所有資料都要聲明在該page目錄下的page.js檔案内。

// page.jsPage({  data: {message: 'Hello World!'
  }
})
清單渲染複制代碼      

然後在xwml檔案裡面，不需要引用在js檔案，就可以直接利用{{}}表達式插入對應的資料：

<!--wxml--><view> {{message}} </view>複制代碼      

此外，該表達是同樣支援數值計算、字元串拼接和三元運算表達式，這裡不展開了，很基礎。

條件渲染

可以用過 if elif else 的組合，實作按需渲染視圖：

<!--wxml--><view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view>複制代碼      

同樣的，條件渲染可以控制多個标簽同時渲染：

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view></block>複制代碼      

block 标簽類似 flagment 标簽，并不會實際渲染出來。

清單渲染

在元件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的資料重複渲染該元件。最好養成習慣，清單循環的時候要聲明好 wx:key

// page.jsPage({  data: {array: [{      message: 'foo',
    }, {      message: 'bar'}]
  }
})複制代碼      

// page.wxml<view wx:for="{{array}}" wx:key="index">
  {{index}}: {{item.message}}</view>複制代碼      

預設數組的目前項的下标變量名預設為 index，數組目前項的變量名預設為 item。我們可以修改預設值，如果需要的話：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}</view>複制代碼      

模闆文法

WXML提供模闆，可以在模闆中定義代碼片段，然後在不同的地方調用。

• 定義模闆，在wxml檔案裡面用 name 屬性聲明好模闆的名字，然後在template标簽内定義代碼片段。

  <template name="msgItem">
    <view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text>
    </view></template>複制代碼      

• 使用模闆，在同一個wxml檔案裡面，通過is屬性，聲明需要使用的模闆，并且将需要的資料通過data屬性傳入。

  <template is="msgItem" data="{{...item}}"/>複制代碼      

  Page({  data: {item: {      index: 0,      msg: 'this is a template',      time: '2016-09-15'}
    }
  })複制代碼      

WXSS 檔案

• 引入了新的尺寸機關rpx，rpx是把螢幕的寬度均分成了750個等份，然後1rpx就代表螢幕寬度的1/750，可以更友善的布局。
• 可以導入樣式,使用@import語句可以導入外聯樣式表，@import後跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。

/** app.wxss **/@import "common.wxss";.middle-p {  padding:15rpx;
}複制代碼      

内聯樣式

• style：靜态的樣式統一寫到 class 中。style 接收動态的樣式，在運作時會進行解析，請盡量避免将靜态的樣式寫進 style 中，以免影響渲染速度。

<view style="color:{{color}};" />複制代碼      

• class：用于指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。

<view class="normal_view" />複制代碼      

選擇器

	樣例	樣例描述
.class	.intro	選擇所有擁有 class="intro" 的元件
#id	#firstnam	選擇擁有 id="firstname" 的元件
element	view	選擇所有 view 元件
element, element	view,checkbox	選擇所有文檔的 view 元件和所有的 checkbox 元件
::after	view::after	在 view 元件後邊插入内容
::before	view::before	在 view 元件前邊插入内容