微信小程式開發（1）

• 微信小程式開發（1）
• 程式碼結構與基本配置
  • 程式碼結構與基本配置
  • 基本HelloWorld建立
  • 開發框架——基本構成
• 微信開發者工具
  • 版本控制
• WXML
  • wxml語法
    • 語法
    • 案例
  • wxml特性
    • 資料繫結
      • 案例
        • 1.文字內容繫結
        • 2.屬性繫結
        • 3.運算子繫結
      • view 標籤屬性
    • 列表渲染
      • 案例
    • 條件渲染
      • 案例
    • 模板及引用
      • 案例
        • 1.模板引用
        • 2.檔案引用
          • import
          • include
• WXSS
  • wxss特性
    • 響應式畫素
    • 樣式
      • 案例
        • 外聯樣式匯入
        • 內聯樣式
    • 選擇器
• JavaScript
  • JavaScript介紹
  • 小程式JavaScript實現
    • 不同環境中的 JavaScript 對比
    • 小程式宿主環境差異
• WXS
  • WXS 介紹
  • WXS 特性
    • 模組
    • 變數
    • 註釋
    • 運算子
    • 資料型別
    • 基礎類庫
• MINA 框架
• 小程式執行機制
  • 啟動
    • 熱啟動
    • 冷啟動
  • 載入
    • CDN
• 生命週期
  • 應用生命週期
  • 頁面生命週期
• 頁面路由

程式碼結構與基本配置

程式碼結構與基本配置

• App.js 註冊一個微信小程式
• App.json 小程式全域性配置（網路請求的超時時間、視窗表現、各個頁面的註冊路徑
• App.wxss 小程式全域性樣式
• Project.config.json 儲存微信開發者工具的配置資訊，重新安裝工具時可用
• Pages 所有頁面，每個頁面最多由四個檔案組成：

• js：處理頁面邏輯和一些資料互動
• json：頁面配置資訊
• wxml：展示頁面元素和內容
• wxss：設定頁面元素樣式

• Utils
  Util.js 存放工具函式（達到程式碼複用的目的）

基本HelloWorld建立

• App.js:註冊小程式的應用，呼叫App()函式，傳入Object型別引數 App({})

• App.json:註冊小程式所有頁面的路徑，通過pages屬性，值為list型別，list中是所有頁面的路徑

• {
  "pages": [
  ]
  }
  

• Helloworld.wxml:描述頁面的內容，view標籤。Helloworld

• Helloworld.js:註冊小程式頁面，類似於app.js,通過page()函式,傳入object型別引數（頁面的生命週期鉤子、時間處理函式、頁面的預設資料等等）

• Page({})

• Helloworld.json:helloworld的頁面一些配置

• {}

• Helloworld.wxss:描述小程式頁面的樣式

開發框架——基本構成

微信開發者工具

版本控制

• console：列印小程式頁面除錯log資訊
• sources：所有指令碼檔案，可進行斷點除錯
• network：展示各個網路請求的狀態資訊、所請求資源的響應資料

WXML

wxml語法

wxml（weixin markup language）是框架設計的一套標籤語言，結合元件、 wxs和時間系統，可以構建處頁面的結構。

語法

<標籤名 屬性名="屬性名1" 屬性名="屬性名2" …>

//屬性值大小寫敏感 …

</標籤名>

案例

<!-- index.wxml -->
<view class="classname" data-name="A">
	Hello woeld!
	<view>
		Hello China!
	</view>
</view>

注意：

① view標籤必須嚴格閉合

② 屬性值大小寫敏感

wxml特性

四個主要特性：資料繫結、列表渲染、條件渲染、模板引用

資料繫結

實現對資料的實時更新，使我們擁有動態改變頁面的能力

案例

1.文字內容繫結

<!--index.wxml-->
<view>
	<text>{{message}}</text>
</view>

{{Mustache}} 繫結語法，把變數包起來

//index.js
Page({
    data:{
        message:"Hello world"
    }
})

2.屬性繫結

<!--index.wxml-->
<view>
	<text data-name="{{theName}}">
    </text>
</view>

注意：所有的元件和屬性都必須是小寫

//index.js
Page({
    data:{
        theName:"Jack"
    }
})

頁面渲染結果：

3.運算子繫結

<!--index.wxml-->
<view hidden="{{flag ? true : false}}">
	Hidden
</view>

hidden屬性：值為 true 時隱藏 view 標籤內容

//index.js
Page({
    data:{
        flag: false
    }
})

view 標籤屬性

列表渲染

案例

<!--index.wxml-->
<view>
	<block wx:for="{{items}}" wx:for-item="item" wx:key="index">
    	<view>{{index}}:{{item.name}}</view>
    </block>
</view>

• 用 wx:for 繫結陣列，從而使用列表渲染特性；
• index 變數：當前元素在陣列中的下標
• item 變數：當前元素
• wx:key 列表中的唯一識別符號，若是靜態列表，或不需要維護列表狀態，可忽略該屬性
• block 標籤：不是元件，而是包裝元素，在頁面渲染時不會被渲染

//index.js
Page({
    data:{
        items:[
			{name:"商品A"}，
			{name:"商品B"}，
			{name:"商品C"}，
			{name:"商品D"}，
			{name:"商品A"}
        ]
    }
})

條件渲染

案例

<!--index.wxml-->
<view>今天吃什麼？</view>
<view wx:if="{{condition === 1}}">
	餃子
</view>
<view wx:elif="{{condition === 2}}">
	米飯
</view>
<view wx:else>
	麵食
</view>

• condition 傳入 1-3 隨機整數
• hidden 始終渲染，wx:if 在切換程式碼塊時區域性渲染；相比之下，hidden 有更高的初始化渲染消耗，wx:if 有更高的切換消耗，因此，當元素需要頻繁切換顯示時，使用 hidden 屬性更好。

//index.js
Page({
    data:{
        condition: Math.floor(Math.random()*3+1)
    }
})

模板及引用

在模板中自定義程式碼片段，在不同的地方呼叫或引用

案例

1.模板引用

<!--index.wxml-->
<template name="tempItem">
	<view>
    	<view>收件人：{{name}}</view>
        <view>聯絡方式：{{phone}}</view>
        <view>地址：{{address}}</view>
    </view>
</template>

<template is="template" data="{{...item}}"></template>

• is 屬性：進行動態繫結模板
• data 屬性：向模板中傳入資料資訊，模板擁有自己的作用域，只能通過 data 屬性傳值

//index.js
Page({
    data:{
        item:{
            name:"張三",
            phone:"11122223333",
            address:"中國"
        }
    }
})

2.檔案引用

import

• import 只能引用模板檔案中的模板內容塊

<!--index.wxml-->
<import src="a.wxml"></import>
<template is="a"></template>

• src 屬性：宣告模板檔案路徑
• is 屬性：宣告所引用的模板名

<!--a.wxml-->
<view>Hello world</view>
<template name="a">
	Hello,World!
</template>

• import 作用域：只能引用目標檔案中定義的 template 模板，如果目標檔案中還嵌套了其他檔案的 template 模板，那麼其他檔案中的模板就不會被引用

<!--index.wxml-->
<import src="a.wxml"></import>
<template is="a"></template>

<!--a.wxml-->
<import src="b.wxml"></import>
<template name="a">
	This is a.wxml
</template>
<template is="b"></template>

<!--b.wxml-->
<template name="b">
	This is b.wxml
</template>

include

include 是把目標檔案內除了模板程式碼塊之外的所有程式碼都引入，相當於將程式碼拷貝到了 include 的位置

<!--index.wxml-->
<include src="a.wxml"></include>
<template is="a"></template>

<!--a.wxml-->
<template name="a">
	<view>
    	This is a.wxml
    </view>
</template>
<view>Hello,world</view>

執行之後可以發現，並沒有將 a.wxml 檔案中的 a 模板渲染出來。

WXSS

WXSS(WeiXin Style Sheets) 是一套樣式語言，用於描述 WXML 的元件樣式，與 Web 開發中的 CSS(Cascading Style Sheets) 極為相似，為了適合小程式的開發， wxss 對 css 做了一定的修改和補充。

• 尺寸單位 rpx
• 樣式匯入
• 內聯樣式
• 選擇器

wxss特性

響應式畫素

• 裝置畫素（device pixels）：裝置螢幕的畫素點，即螢幕解析度

• css 畫素（css pixels）：css樣式程式碼中所使用的邏輯畫素

• PPI/DPI（pixel per inch）：每英寸的畫素數，數值越大，表示顯示屏能以越高的密度顯示影象，計算公式如下：

$$
螢幕解析度：x * y
$$

$$
PPI = √（x² + y²) / 螢幕尺寸
$$

​ 以 iPhone6 為例：
$$
PPI = √（750² + 1334²) / 4.7 =325.6
$$
​ iPhone6 的螢幕尺寸為 4.7 英寸，計算得出 PPI=325.6，約等於官方值 326 。

• DPR（device pixel Ratio）：指手機在某一方向上的裝置畫素與 css 畫素之比

• rpx ：微信團隊規定手機螢幕寬度為 750rpx ，從而可以根據螢幕寬度實現自適應

樣式

案例

外聯樣式匯入

<!--index.wxml-->
<view class="container">
	Hello,world!
</view>

/** index.wxss **/
@import './assets.wxss';
.container {
    color: red;
}

/** assets.wxss **/
.container {
    border: 1px solid #000;
}

注意：樣式檔案執行順序為”從上到下，從左到右“，若將 index.wxss 中 container 的 border 顏色設定為 yellow，那麼就會覆蓋 assets.wxss 中的border 設定

內聯樣式

<!--index.wxml-->
<view style="width:500rpx; height:30px; background-color:{{colorValue}};">
	Hello,world!
</view>

• class ：靜態樣式
• style ：動態樣式

//index.js
Page({
    data:{
        colorValue: 'red'
    }
})

選擇器

選擇器優先順序

!important 權重最高，會破壞掉樣式表中固有的權重值比較規則，使得除錯 bug 變得更加困難，因此使用時應當謹慎

!important 使用案例：

/** index.wxss **/
.title {
    color: red !important;
}

JavaScript

JavaScript介紹

​ JavaScript是一種輕量的、解釋型的、面向物件的頭等函式語言，是一種動態的基於原型的多正規化的指令碼語言，支援面向物件、命令式和函式式的程式設計風格。

圖書推薦：

小程式JavaScript實現

不同環境中的 JavaScript 對比

Nodejs 中的 JavaScript

• ECMAScript
• Native：原生模組，通過 Native 使用 JavaScript 不具備的能力
• NPM：包管理系統

小程式中的 JavaScript

• ECMAScript
• 小程式框架
• 小程式API
• 無法使用 jQuery 和 Nodejs 中的 Native 、NPM

瀏覽器中的 JavaScript

• ECMAScript
• DOM：瀏覽器的文件物件模型，是 HTML 和 xml 的應用程式介面，通過 js 讀取當前網頁的 DOM 物件
• BOM：瀏覽器的物件模型，處理瀏覽器的視窗和框架

小程式宿主環境差異

WXS

WXS 介紹

​ wxs（WeiXin Script），和 wxml 共同構建頁面檢視的結構內容

WXS 特性

模組

wxs 有獨立的作用域，其中定義的變數和函式預設是私有的

<!--index.wxml-->
<wxs module="m1">
	module.exports = {
    	message: 'Hello,world!'
    }
</wxs>

<view> {{m1.message}} </view>

module.exports 屬性：將 wxs 中的變數暴露，讓外部可呼叫

<!--index.wxml-->
<wxs src="./m2.wxs" module="m2"></wxs>
<view> {{m2.message}} </view>

// m2.wxs
module.exports = require('./m1.wxs')

// m1.wxs
module.exports= {
    message: "hello world!"
}

• src ：宣告外部 wxs 檔案路徑
• module ：宣告所使用的外部 wxs 檔案中的模組名
• require() 函式 ：在 wxs 中引用其他 wxs 檔案

注意：儘量不要重複宣告模組名，否則後面定義的模組會覆蓋前面的模組

變數

與 ES5 標準的 JavaScript 變數用法一致

註釋

<!--index.wxml-->
<wxs module+"m3">
	var v = 1;
    module.exports.value = v;
    //單行註釋
    /*多行註釋
    v += 1;
    */
    console.log(v);
    /*
    var d = 3;
    console.log(d);
    */
</wxs>
<view> {{m3.value}} </view>

運算子

wxs 中運算子語句與 JavaScript 基本一致，但不支援 try ... catch 語句

資料型別

• 生成 date 物件使用 getdate() 函式
• 生成 regexp 物件使用 getregexp() 函式

基礎類庫

與 ES5 標準的 JavaScript 基礎類庫基本一致，區別在於：

• console 基礎類庫只提供 console.log()

• date 基礎類庫只提供

  ​ date.pase() ：解析字串形式的日期時間，返回 UNIX 時間戳

  ​ date.now() ：返回當前日期時間的 UNIX 時間戳

  ​ date.utc() ：返回指定時間的 UNIX 時間戳

MINA 框架

小程式開發框架

小程式執行機制

啟動

熱啟動

將後臺切換到前臺

冷啟動

首次啟動或被微信銷燬後再次啟動

若冷啟動時發現有新版本，則非同步下載新版程式碼包

載入

小程式啟動時，向 CDN 請求最新的程式碼包，首次啟動時，需等待程式碼包下載完畢，並注入到 web view 容器內執行之後，才能看到小程式的頁面；客戶端會將程式碼包快取到本地，下次啟動時，首先從 CDN 請求是否有最新版本程式碼包，若有，執行舊版本程式碼包的同時，非同步下載最新版程式碼包。

CDN

內容分發網路，作用是將請求的內容分發到最近的網路節點伺服器，提高使用者訪問的響應速度和成功率，解決頻寬、伺服器效能帶來的延遲問題

生命週期

應用生命週期

首次啟動時，客戶端會初始化小程式的執行環境，同時從 CDN 下載，或從本地快取拿到程式碼包，並注入到執行環境；

onLaunch：初始化完畢後，客戶端會給邏輯層 App.js 的 app 例項派發 onLaunch 事件

onHide：當點選小程式右上角關閉，或點選手機 Home 鍵時，小程式被切入後臺，這時呼叫 onHide

onShow：從後臺重新開啟小程式時，呼叫 onShow

onError：發生指令碼錯誤，或 API 呼叫失敗時，呼叫 onError，這時會給 onError 方法中傳入一些錯誤資訊

globalData：表示小程式應用的全域性資料

頁面生命週期

onLoad：頁面初次載入時，客戶端派發 onLoad 事件，在頁面被銷燬之前，只調用一次

onShow：頁面開啟後，或從另一個頁面返回當前頁面時，當前頁的 onShow 方法被呼叫

onReady：當頁面初次渲染完之後，呼叫 onReady 方法，在頁面被銷燬之前，只調用一次；onReady 觸發之後，邏輯層就可以和檢視層進行互動了

onHide：當開啟新頁面時，當前頁的 onHide 方法被呼叫

onUnload：關閉當前頁面時呼叫

data：表示當前小程式的頁面資料

案例

頁面路由

在一個多頁面的小程式中，所有頁面路由由框架進行管理，框架以棧的形式維護小程式的頁面

路由觸發方式以及對應頁面生命週期函式