目錄

前言：

?一.框架基本介紹

1.整體結(jié)構(gòu)：

2.頁(yè)面結(jié)構(gòu)：

3.生命周期：

4.事件系統(tǒng)：

5.數(shù)據(jù)綁定：

6.組件系統(tǒng)：

7.API：

8.路由：

9.模塊化：

10.全局配置：

二.視圖層詳解

1.WXML（WeiXin Markup Language）：

1.1 列表渲染

1.2條件渲染

1.3 模板

2.WXSS（WeiXin Style Sheet）：

3.數(shù)據(jù)綁定：

5.事件綁定：

6.全局樣式和局部樣式：

三.邏輯層詳解

1.小程序生命周期

2.App(Object object)

參數(shù)

3.頁(yè)面跳轉(zhuǎn)

1.一級(jí)跳二級(jí)

2.二級(jí)跳一級(jí)

3.二級(jí)跳二級(jí)

前言：

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

整個(gè)小程序框架系統(tǒng)分為兩部分：邏輯層（App Service）和 視圖層（View）。小程序提供了自己的視圖層描述語(yǔ)言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開(kāi)發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯。

?一.框架基本介紹

1.整體結(jié)構(gòu)：

小程序框架遵循一種組織結(jié)構(gòu)，包括app.json、app.js、app.wxss等文件。這些文件用于定義小程序的全局配置、全局邏輯和全局樣式。

2.頁(yè)面結(jié)構(gòu)：

小程序的頁(yè)面由四個(gè)文件組成，分別是.json（配置文件）、.js（邏輯文件）、.wxml（模板文件）和.wxss（樣式文件）。這些文件協(xié)同工作來(lái)定義頁(yè)面的結(jié)構(gòu)、邏輯和樣式。

3.生命周期：

微信小程序框架定義了一系列生命周期函數(shù)，包括onLoad、onReady、onShow、onHide、onUnload等。這些函數(shù)用于管理頁(yè)面的初始化、顯示和隱藏等生命周期事件。

4.事件系統(tǒng)：

框架提供了事件系統(tǒng)，支持事件綁定和處理，以實(shí)現(xiàn)用戶交互和數(shù)據(jù)傳遞。

5.數(shù)據(jù)綁定：

微信小程序支持雙向數(shù)據(jù)綁定，開(kāi)發(fā)者可以使用{{}}語(yǔ)法將頁(yè)面上的數(shù)據(jù)與JavaScript中的數(shù)據(jù)關(guān)聯(lián)，實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)展示和更新。

6.組件系統(tǒng)：

小程序框架提供了一系列基本組件，如<view>、<text>、<button>等，以及自定義組件的開(kāi)發(fā)能力。開(kāi)發(fā)者可以通過(guò)組件來(lái)構(gòu)建小程序界面。

7.API：

微信小程序框架提供了一系列API，用于實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求、本地存儲(chǔ)、位置信息、設(shè)備信息、多媒體處理、支付等功能。開(kāi)發(fā)者可以通過(guò)API實(shí)現(xiàn)各種小程序功能。

8.路由：

框架支持小程序頁(yè)面的路由跳轉(zhuǎn)，開(kāi)發(fā)者可以使用wx.navigateTo、wx.redirectTo等方法進(jìn)行頁(yè)面之間的導(dǎo)航。

9.模塊化：

微信小程序支持模塊化開(kāi)發(fā)，可以將代碼分割為多個(gè)模塊，提高代碼的可維護(hù)性和復(fù)用性。

10.全局配置：

通過(guò)app.json可以配置小程序的全局屬性，如窗口樣式、頁(yè)面路徑、tabBar等。

二.視圖層詳解

1.WXML（WeiXin Markup Language）：

WXML是一種類(lèi)似于XML的標(biāo)記語(yǔ)言，用于描述小程序的結(jié)構(gòu)。在WXML中，開(kāi)發(fā)者可以使用類(lèi)似HTML的標(biāo)簽來(lái)構(gòu)建頁(yè)面的骨架，例如<view>、<text>、<image>等。WXML支持?jǐn)?shù)據(jù)綁定，通過(guò){{}}語(yǔ)法可以將JavaScript中的數(shù)據(jù)動(dòng)態(tài)渲染到頁(yè)面上。例如，<view>{{message}}</view>將會(huì)顯示JavaScript中message變量的值。

WXML中的數(shù)據(jù)綁定我們?cè)谏弦黄谝呀?jīng)進(jìn)行講解，詳情參考上期微信小程序入門(mén)

?補(bǔ)充：

1.1 列表渲染

在wxml頁(yè)面中添加視圖層代碼

<view wx:for="{{array}}"> {{item}} </view>

?在對(duì)應(yīng)頁(yè)面層中xxx.js中的data中添加數(shù)據(jù)

 /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    array:[1,2,3,4]
  },  

頁(yè)面效果

1.2條件渲染

<view wx:if="{{view == '1'}}"> WEBVIEW </view>
<view wx:elif="{{view == '2'}}"> APP </view>
<view wx:else="{{view == '3'}}"> MINA </view>

在xxx.js中定義一個(gè)變量view，通過(guò)判斷view的值輸出展示不同的結(jié)果

 data: {
    view:1,
  },  

?效果展示，我們?cè)谳敵鲋禃r(shí)對(duì)應(yīng)的是1，輸出時(shí)應(yīng)該未WEBVIEW

1.3 模板

?（1）定義模板

<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

?（2）使用模板

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

?（3）創(chuàng)造模板數(shù)據(jù)

Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

效果展示

?

2.WXSS（WeiXin Style Sheet）：

WXSS用于定義小程序的樣式，類(lèi)似于CSS。開(kāi)發(fā)者可以在WXSS中設(shè)置頁(yè)面元素的樣式，包括顏色、字體、布局等。WXSS也支持類(lèi)似于CSS的選擇器，用于選擇并樣式化特定的頁(yè)面元素。樣式文件與模板文件是相互獨(dú)立的，通過(guò)類(lèi)名和ID等方式進(jìn)行關(guān)聯(lián)。

3.數(shù)據(jù)綁定：

視圖層支持雙向數(shù)據(jù)綁定，可以將JavaScript中的數(shù)據(jù)綁定到WXML中。當(dāng)JavaScript中的數(shù)據(jù)發(fā)生變化時(shí)，視圖層會(huì)自動(dòng)更新以反映最新的數(shù)據(jù)。這使得頁(yè)面能夠?qū)崟r(shí)響應(yīng)用戶的操作和動(dòng)態(tài)數(shù)據(jù)的變化。

5.事件綁定：

視圖層可以通過(guò)WXML中的事件綁定來(lái)響應(yīng)用戶的交互操作，比如點(diǎn)擊、滑動(dòng)等。事件綁定通過(guò)bind或catch前綴來(lái)實(shí)現(xiàn)，如<button bindtap="handleTap">點(diǎn)擊我</button>。

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

通過(guò)在xxx.js?中定義方法進(jìn)行點(diǎn)擊觸發(fā)

  tapName: function(event) {
    console.log(event)
  },

在頁(yè)面上進(jìn)行點(diǎn)擊并展示控制臺(tái)信息

6.全局樣式和局部樣式：

WXSS支持全局樣式和局部樣式，可以在app.wxss中定義全局樣式，也可以在頁(yè)面的樣式文件中定義局部樣式。

三.邏輯層詳解

小程序開(kāi)發(fā)框架的邏輯層使用 JavaScript 引擎為小程序提供開(kāi)發(fā)者 JavaScript 代碼的運(yùn)行環(huán)境以及微信小程序的特有功能。

邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。

開(kāi)發(fā)者寫(xiě)的所有代碼最終將會(huì)打包成一份 JavaScript 文件，并在小程序啟動(dòng)的時(shí)候運(yùn)行，直到小程序銷(xiāo)毀。這一行為類(lèi)似 ServiceWorker，所以邏輯層也稱(chēng)之為 App Service。

在 JavaScript 的基礎(chǔ)上，我們?cè)黾恿艘恍┕δ?，以方便小程序的開(kāi)發(fā)：

• 增加 App 和 Page 方法，進(jìn)行程序注冊(cè)和頁(yè)面注冊(cè)。

• 增加 getApp 和 getCurrentPages 方法，分別用來(lái)獲取 App 實(shí)例和當(dāng)前頁(yè)面棧。

• 提供豐富的 API，如微信用戶數(shù)據(jù)，掃一掃，支付等微信特有能力。

• 提供模塊化能力，每個(gè)頁(yè)面有獨(dú)立的作用域。

注意：小程序框架的邏輯層并非運(yùn)行在瀏覽器中，因此 JavaScript 在 web 中一些能力都無(wú)法使用，如 window，document 等。

1.小程序生命周期

????????

2.App(Object object)

注冊(cè)小程序。接受一個(gè)?Object?參數(shù)，其指定小程序的生命周期回調(diào)等。

App() 必須在?app.js?中調(diào)用，必須調(diào)用且只能調(diào)用一次。不然會(huì)出現(xiàn)無(wú)法預(yù)期的后果。

參數(shù)

Object object

onLaunch(Object object)

小程序初始化完成時(shí)觸發(fā)，全局只觸發(fā)一次。參數(shù)也可以使用?wx.getLaunchOptionsSync?獲取。

參數(shù)：與?wx.getLaunchOptionsSync?一致

onShow(Object object)

小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示時(shí)觸發(fā)。也可以使用?wx.onAppShow?綁定監(jiān)聽(tīng)。

參數(shù)：與?wx.onAppShow?一致

onHide()

小程序從前臺(tái)進(jìn)入后臺(tái)時(shí)觸發(fā)。也可以使用?wx.onAppHide?綁定監(jiān)聽(tīng)。

onError(String error)

小程序發(fā)生腳本錯(cuò)誤或 API 調(diào)用報(bào)錯(cuò)時(shí)觸發(fā)。也可以使用?wx.onError?綁定監(jiān)聽(tīng)。

參數(shù)：與?wx.onError?一致

onPageNotFound(Object object)

基礎(chǔ)庫(kù) 1.9.90 開(kāi)始支持，低版本需做兼容處理。

小程序要打開(kāi)的頁(yè)面不存在時(shí)觸發(fā)。也可以使用?wx.onPageNotFound?綁定監(jiān)聽(tīng)。注意事項(xiàng)請(qǐng)參考?wx.onPageNotFound。

3.頁(yè)面跳轉(zhuǎn)

依次為先后執(zhí)行的方法

1.一級(jí)跳二級(jí)

a->b

a:onload,onshow,onready

b:a先onHide b onload,onshow,onready

2.二級(jí)跳一級(jí)

a->c

a.onHide,c.onload,onshow,onready

c->a

c.onload,onshow

3.二級(jí)跳二級(jí)

c->d

c.onHide,d.onload,onshow,onready

d->c

d.unonload,c.onshow

c->b

c.unonload,b.onshow

小結(jié)：

1.一級(jí)不會(huì)銷(xiāo)毀

2.二級(jí)層級(jí)深跳到層級(jí)低的會(huì)銷(xiāo)毀

3.二級(jí)層級(jí)低跳到層級(jí)高的只會(huì)隱藏

4.隔代跳轉(zhuǎn)中間所有的頁(yè)面會(huì)進(jìn)行銷(xiāo)毀

今天的分享到這里就結(jié)束了，感謝各位大大的觀看，各位大大的三連是博主更新的動(dòng)力，感謝謝謝謝謝謝謝謝謝各位的支持?。。。?！?

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-713510.html

到了這里，關(guān)于微信小程序--小程序框架的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！