主要內(nèi)容數(shù)據(jù)綁定、渲染、界面層數(shù)據(jù)渲染和事件處理。

一、數(shù)據(jù)綁定

1.1 渲染層和邏輯層

小程序宿主環(huán)境

我們稱微信客戶端給小程序所提供的環(huán)境為宿主環(huán)境。小程序借助宿主環(huán)境提供的能力，可以完成許多普通網(wǎng)頁(yè)無(wú)法完成的功能。

小程序開發(fā)框架的目標(biāo)是通過盡可能簡(jiǎn)單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生 APP 體驗(yàn)的服務(wù)。

整個(gè)小程序框架系統(tǒng)分為兩部分：邏輯層（App Service）和 視圖層（View）

邏輯層與渲染層分離

首先，我們來簡(jiǎn)單了解下小程序的運(yùn)行環(huán)境。小程序的運(yùn)行環(huán)境分成渲染層和邏輯層，其中 WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。

小程序的渲染層和邏輯層分別由2個(gè)線程管理：渲染層的界面使用了WebView 進(jìn)行渲染；邏輯層采用JsCore線程運(yùn)行JS腳本。一個(gè)小程序存在多個(gè)界面，所以渲染層存在多個(gè) WebView線程，這兩個(gè)線程的通信會(huì)經(jīng)由微信客戶端（下文中也會(huì)采用Native來代指微信客戶端）做中轉(zhuǎn)，邏輯層發(fā)送網(wǎng)絡(luò)請(qǐng)求也經(jīng)由Native轉(zhuǎn)發(fā)，小程序的通信模型下圖所示。

1.2 邏輯文件介紹app.js pages.js

app.js 小程序邏輯

每個(gè)小程序都需要在 app.js 中調(diào)用 App 方法注冊(cè)小程序?qū)嵗?#xff0c;綁定生命周期回調(diào)函數(shù)、錯(cuò)誤監(jiān)聽和頁(yè)面不存在監(jiān)聽函數(shù)等

生命周期回調(diào)函數(shù):小程序從創(chuàng)建到銷毀的整個(gè)過程，自動(dòng)創(chuàng)建的一些函數(shù)

包含內(nèi)容：

全局變量 globalData:{}

生命周期函數(shù)

定義事件函數(shù)

pages.js 頁(yè)面邏輯

對(duì)于小程序中的每個(gè)頁(yè)面，都需要在頁(yè)面對(duì)應(yīng)的 js 文件中進(jìn)行注冊(cè)，指定頁(yè)面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等

data界面視圖的數(shù)據(jù)內(nèi)容

2.自己的生命周期函數(shù)

3.自定義事件的函數(shù)

1.3 邏輯層javascript

我們先看下小程序的javascript和普通頁(yè)面的javascript區(qū)別

小程序javascript的三個(gè)特點(diǎn)：

1.小程序不是運(yùn)行在瀏覽器中，沒有BOM和DOM

console.log(window) ->undefined

console.log(document) ->undefined

2.小程序的js有一些額外的成員

App()方法 用于定義應(yīng)用程序?qū)嵗龑?duì)象

Page()方法 用于定義頁(yè)面對(duì)象

getApp()方法 用于獲取全局的應(yīng)用程序?qū)ο?/p>

wx 對(duì)象 提供核心API

// xxx.jsconst appInstance = getApp()

console.log(appInstance.globalData) // I am global data

3.小程序的js支持Commonjs規(guī)范

module.exports={} 導(dǎo)出

var data=require(./data.js) 引入

模塊化

可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的 js 文件，作為一個(gè)模塊。模塊通過 module.exports 對(duì)外暴露接口。

在需要使用這些模塊的文件中，使用 require 將公共代碼引入

在 JavaScript 文件中聲明的變量和函數(shù)只在該文件中有效 不同的文件中可以聲明相同名字的變量和函數(shù)，不會(huì)互相影響

1.4 界面層數(shù)據(jù)綁定

1.4.1 數(shù)據(jù)綁定

WXML 中的動(dòng)態(tài)數(shù)據(jù)均來自對(duì)應(yīng) Page 的 data。

界面

邏輯

data

簡(jiǎn)單綁定

數(shù)據(jù)綁定使用 Mustache 語(yǔ)法（雙大括號(hào)）將變量包起來，可以作用于：

內(nèi)容

組件屬性(需要在雙引號(hào)之內(nèi))

{{}}語(yǔ)法用途

表達(dá)式 獲取變量 綁定class屬性

特殊地方：

1.4.2 列表渲染

wx:for

在組件上使用 wx:for 控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。

默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item

使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名，

使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名：

類似 block wx:if，也可以將 wx:for 用在<block/>標(biāo)簽上，以渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。例如：

1.4.3 條件渲染

wx:if

在框架中，使用 wx:if="" 來判斷是否需要渲染該代碼塊：

因?yàn)?wx:if 是一個(gè)控制屬性，需要將它添加到一個(gè)標(biāo)簽上。如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用一個(gè) <block/> 標(biāo)簽將多個(gè)組件包裝起來，并在上邊使用 wx:if 控制屬性。

注意： <block/> 并不是一個(gè)組件，它僅僅是一個(gè)包裝元素，不會(huì)在頁(yè)面中做任何渲染，只接受控制屬性。

wx:if vs hidden

因?yàn)?wx:if 之中的模板也可能包含數(shù)據(jù)綁定，所以當(dāng) wx:if 的條件值切換時(shí)，框架有一個(gè)局部渲染的過程，因?yàn)樗鼤?huì)確保條件塊在切換時(shí)銷毀或重新渲染。

同時(shí) wx:if 也是惰性的，如果在初始渲染條件為 false，框架什么也不做，在條件第一次變成真的時(shí)候才開始局部渲染。

相比之下，hidden 就簡(jiǎn)單的多，組件始終會(huì)被渲染，只是簡(jiǎn)單的控制顯示與隱藏。

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好。

二、事件處理

2.1 什么是事件

• 事件是視圖層到邏輯層的通訊方式。
• 事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
• 事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。
• 事件對(duì)象可以攜帶額外信息，如 id, dataset, touches

事件的使用方式

在組件中綁定一個(gè)事件處理函數(shù)。

如bindtap，當(dāng)用戶點(diǎn)擊該組件的時(shí)候會(huì)在該頁(yè)面對(duì)應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

在相應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù)，參數(shù)是event。

2.2 事件冒泡

2.2.1 事件分類

事件分為冒泡事件和非冒泡事件：

冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞。

非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞。

2.2.2 綁定并阻止事件冒泡

除 bind 外，也可以用 catch 來綁定事件。與 bind 不同， catch 會(huì)阻止事件向上冒泡。

例如在下邊這個(gè)例子中，點(diǎn)擊 inner view 會(huì)先后調(diào)用handleTap3和handleTap2(因?yàn)閠ap事件會(huì)冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父節(jié)點(diǎn)傳遞)，點(diǎn)擊 middle view 會(huì)觸發(fā)handleTap2，點(diǎn)擊 outer view 會(huì)觸發(fā)handleTap1。

2.3 事件傳參

dataset

在組件節(jié)點(diǎn)中可以附加一些自定義數(shù)據(jù)。這樣，在事件中可以獲取這些自定義的節(jié)點(diǎn)數(shù)據(jù)，用于事件的邏輯處理。

在 WXML 中，這些自定義數(shù)據(jù)以 data- 開頭，多個(gè)單詞由連字符 - 連接。這種寫法中，連字符寫法會(huì)轉(zhuǎn)換成駝峰寫法，而大寫字符會(huì)自動(dòng)轉(zhuǎn)成小寫字符。如：

• data-element-type ，最終會(huì)呈現(xiàn)為 event.currentTarget.dataset.elementType ；
• data-elementType ，最終會(huì)呈現(xiàn)為 event.currentTarget.dataset.elementtype 。

示例：

2.4單數(shù)數(shù)據(jù)流

實(shí)現(xiàn)數(shù)據(jù)同步修改

index.wxml

模板使用

WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調(diào)用。

3.1 定義模板

使用 name 屬性，作為模板的名字。然后在<template/>內(nèi)定義代碼片段，如：

3.2 使用模板

使用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入，如：

is 屬性可以使用 Mustache 語(yǔ)法，來動(dòng)態(tài)決定具體需要渲染哪個(gè)模板：

三、網(wǎng)易云精選案例

效果圖：

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的小程序多个echars_小程序界面与逻辑的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。