小程序04 小程序框架

時間 2019-11-13

標籤程序框架简体版

原文原文鏈接

小程序框架

基本概念

小程序開發框架的目標是經過儘量簡單、高效的方式讓開發者能夠在微信中開發具備原生 APP 體驗的服務。javascript

框架提供了本身的視圖層描述語言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，並在視圖層與邏輯層間提供了數據傳輸和事件系統，讓開發者可以專一於數據與邏輯。css

框架結構

WXMLhtml	WXSS前端
WXSjava	JavaScriptnode

WXS：WeiXin Script是小程序的一套腳本語言，能夠對請求到的數據進行過濾或者計算；結合 WXML，能夠構建出頁面的結構android

WXML

概念

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、WXS、事件系統，能夠構建出頁面的結構。css3

語法結構

<標籤名屬性名1=」屬性值1」屬性名2=」屬性值2」 …>web

…內容（或者其餘wxml標籤）小程序

</標籤名>

標籤內能夠是內容文本，或者其餘wxml標籤。

注意：標籤必須閉合；屬性大小寫敏感。

示例代碼：

主要特性

包括：數據綁定、列表渲染、條件渲染、模板引用。

數據綁定

1) 簡單數據綁定

數據來源於js文件，頁面使用Mustache（」{{變量名}}」）綁定數據。例如：

2) 屬性值的綁定

3) 運算符的綁定

hidden屬性用於隱藏或者顯示頁面元素。

小程序標籤屬性

數據渲染

1) 列表渲染

把集合中的數據以列表的形式渲染到視圖層。示例：

wxml視圖代碼：

<view>

<view>{{index}}:{{item.name}}</view>

</block>

</view>

js文件邏輯層數據：

data: {

items: [

{ name: "蘋果" },

{ name: "菠蘿" },

{ name: "香蕉" },

{ name: "芭樂" }

]

}

測試效果：

說明：

index變量：當前數組元素的索引。

item變量：數組當前元素。

wx:key：能夠確保頁面元素從新排序，而不是從新渲染，提升頁面渲染效率。

block：包裝元素。頁面你不會渲染該標籤。

2) 條件渲染

視圖示例代碼：

<view>抽獎小遊戲</view>

<view wx:if="{{result==1}}">中獎一臺iphoneX</view>

<view wx:elif="{{result==2}}">中獎一臺ipad</view>

<view wx:elif="{{result==3}}">中獎一個U盤</view>

邏輯層示例代碼：

// pages/index/index.js

data: {

result:Math.floor(Math.random()*4+1)

注意：

if和hidden的比較：if會選擇性渲染元素，hidden會始終渲染元素。若是一個元素須要頻繁在視圖上顯示和隱藏，建議使用hidden屬性，提升渲染性能。

模板引用

1) 代碼塊的引用

WXML支持定義代碼片斷，在頁面不一樣的地方進行引用。使用name屬性定義模板名稱。

視圖示例代碼：

<view>

</view>

</template>

is屬性支持動態引入模板。「…」爲擴展運算符，遍歷對象屬性。

邏輯層數據定義：

// pages/index/index.js

Page({

data: {

student:{

id:2018007,

name:"tom",

age:21

}

測試效果：

2) 文件的引用

WXML文件引用提供了import和include方法。

import：只能引用文件中的模板代碼。

示例代碼，定義模板文件tmp.wxml：

<view>

</view>

</template>

定義邏輯層數據：

data: {

student:{

id:2018007,

name:"tom",

age:21

}

視圖層引用模板文件：

測試效果：

import做用域的問題：

定義a.wxml和b.wxml文件

修改a.wxml文件，引入b模板。

在index.wxml中引入模板a.wxml。

index.wxml中只渲染a模板中定義的代碼片斷。避免模板引用的死循環，import只引用文件中的模板代碼塊，忽略import遞歸。

include：引用文件的代碼塊，除了模板代碼。

修改示例代碼，使用include引入tmp.wxml文件：

測試輸出效果：

WXSS

概述

WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式。WXSS 用來決定 WXML 的組件應該怎麼顯示。爲了適應廣大的前端開發者，WXSS 具備 CSS 大部分特性。同時爲了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改。

與 CSS 相比，WXSS 擴展的特性有：

尺寸單位
樣式導入
內聯樣式
選擇器

尺寸單位

css3中的rem表示根據html根下的font-size進行相對尺寸的計算。微信小程序中，rem失效，因此微信小程序定義rpx做爲尺寸單位。最終rpx仍是會轉換爲rem。

1) 基本概念

定義	說明
設備像素（device pixels）	顯示設備顯示信息的最小物理單位。顯示器上的像素點。
CSS像素（CSS pixels）	CSS樣式表中使用的邏輯像素。
PPI/DPI（pixel per inch）	顯示器每英寸擁有的像素數量。
DPR（devicepixelRatio）	在手機某一方向上，設備像素和CSS像素的比例。

PPI/DPI計算方式：X、Y表示設備在橫向和縱向上的設備像素。屏幕尺寸指對角線長度。

DPR說明：

在IDE中切換設備能夠查看到設備的DPR信息。在手機上進行縮放操做的時候，元素設置的CSS像素(如width:300px)是始終不變的，而一個CSS像素對應多少個設備像素是根據當前的縮放比例來決定的。DPR(devicePixelRatio)是默認縮放爲100%的狀況下，設備像素和CSS像素的比值。

rpx：responsive pixel，能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。