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

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

1.1 渲染層和邏輯層

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

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

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

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

邏輯層與渲染層分離

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

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

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

app.js 小程序邏輯

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

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

包含內(nèi)容：

全局變量 globalData:{}

生命周期函數(shù)

定義事件函數(shù)

pages.js 頁面邏輯

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

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

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

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

1.3 邏輯層javascript

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

小程序javascript的三個特點：

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

console.log(window) ->undefined

console.log(document) ->undefined

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

App()方法 用于定義應(yīng)用程序?qū)嵗龑ο?/p>

Page()方法 用于定義頁面對象

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

wx 對象 提供核心API

// xxx.jsconst appInstance = getApp()

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

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

module.exports={} 導出

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

模塊化

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

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

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

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

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

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

界面

邏輯

data

簡單綁定

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

內(nèi)容

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

{{}}語法用途

表達式 獲取變量 綁定class屬性

特殊地方：

1.4.2 列表渲染

wx:for

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

默認數(shù)組的當前項的下標變量名默認為 index，數(shù)組當前項的變量名默認為 item

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

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

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

1.4.3 條件渲染

wx:if

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

因為 wx:if 是一個控制屬性，需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽，可以使用一個 <block/> 標簽將多個組件包裝起來，并在上邊使用 wx:if 控制屬性。

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

wx:if vs hidden

因為 wx:if 之中的模板也可能包含數(shù)據(jù)綁定，所以當 wx:if 的條件值切換時，框架有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。

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

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

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

二、事件處理

2.1 什么是事件

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

事件的使用方式

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

如bindtap，當用戶點擊該組件的時候會在該頁面對應(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 事件分類

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

冒泡事件：當一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞。

非冒泡事件：當一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞。

2.2.2 綁定并阻止事件冒泡

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

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

2.3 事件傳參

dataset

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

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

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

示例：

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

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

index.wxml

模板使用

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

3.1 定義模板

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

3.2 使用模板

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

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

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

效果圖：

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

總結(jié)

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

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