微信小程序 視圖層(xx.xml)和邏輯層(xx.js)詳細(xì)介紹
微信小程序可以理解為云OS的概念,微信生態(tài)本身就是一個(gè)OS。加上微信公眾平臺(tái)和微信開發(fā)平臺(tái)本身已經(jīng)是非常成熟的架構(gòu),能夠完美媲美App的功能,同時(shí)在交互體驗(yàn)方面也能夠做到極致,大有取代App之勢(shì)。蘋果App Store模式的意義在于為第三方軟件的提供者提供了方便而又高效的一個(gè)軟件銷售平臺(tái)。用戶購(gòu)買應(yīng)用所支付的費(fèi)用由蘋果與應(yīng)用開發(fā)商3:7分成。如果微信小程序商城也采用類似的分傭模式,那8億多的用戶將是一個(gè)非常大的無(wú)形資產(chǎn),成為騰訊繼游戲、會(huì)員、廣告后的另一個(gè)掘金源。
微信小程序允許人們無(wú)需進(jìn)行下載安裝就使用App。用戶可以在微信上掃描二維碼來(lái)打開程序。微信小程序可以應(yīng)用在安卓和iOS等不同系統(tǒng)上,也可以在不同的平臺(tái)上分享,因?yàn)樗旧砭皖愃埔粋€(gè)網(wǎng)站頁(yè)面。
小程序視圖層(xx.xml)和邏輯層(xx.js)
整個(gè)系統(tǒng)分為兩塊視圖層(View)和邏輯層(App Service)
框架可以讓數(shù)據(jù)與視圖非常簡(jiǎn)單地保持同步。當(dāng)做數(shù)據(jù)修改的時(shí)候,只需要在邏輯層修改數(shù)據(jù),視圖層就會(huì)做相應(yīng)的更新。
通過(guò)這個(gè)簡(jiǎn)單的例子來(lái)看:
<!-- This is our View --> <view> Hello {{name}}! </view> <button bindtap="changeName"> Click me! </button> // This is our App Service. // This is our data. var helloData = { name: 'WeChat' } // Register a Page. Page({ data: helloData, changeName: function(e) { // sent data change to view this.setData({ name: 'MINA' }) } })
- 開發(fā)者通過(guò)框架將邏輯層數(shù)據(jù)中的 name 與視圖層的 name 進(jìn)行了綁定,所以在頁(yè)面一打開的時(shí)候會(huì)顯示 Hello WeChat!
- 當(dāng)點(diǎn)擊按鈕的時(shí)候,視圖層會(huì)發(fā)送 changeName 的事件給邏輯層,邏輯層找到對(duì)應(yīng)的事件處理函數(shù)
- 邏輯層執(zhí)行了 setData 的操作,將 name 從 WeChat 變?yōu)?MINA,因?yàn)樵摂?shù)據(jù)和視圖層已經(jīng)綁定了,從而視圖層會(huì)自動(dòng)改變?yōu)?Hello MINA! 。
視圖層為 xx.xml
邏輯層為 xx.js
讀取時(shí)會(huì)先看邏輯層初始數(shù)據(jù)來(lái)填充視圖層,視圖層觸發(fā)邏輯層中的事件,邏輯層返回并改變視圖層的內(nèi)容。
邏輯層(App Service)
小程序開發(fā)框架的邏輯層是由JavaScript編寫。
邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層,同時(shí)接受視圖層的事件反饋。 在 JavaScript 的基礎(chǔ)上,我們做了一些修改,以方便地開發(fā)小程序。
- 增加 App 和 Page 方法,進(jìn)行程序和頁(yè)面的注冊(cè)。
- 提供豐富的 API,如掃一掃,支付等微信特有能力。
- 每個(gè)頁(yè)面有獨(dú)立的作用域,并提供模塊化能力。
- 由于框架并非運(yùn)行在瀏覽器中,所以 JavaScript 在 web 中一些能力都無(wú)法使用,如 document,window 等。
- 開發(fā)者寫的所有代碼最終將會(huì)打包成一份 JavaScript,并在小程序啟動(dòng)的時(shí)候運(yùn)行,直到小程序銷毀。類似 ServiceWorker,所以邏輯層也稱之為 App Service。
初始化數(shù)據(jù)
初始化數(shù)據(jù)將作為頁(yè)面的第一次渲染。data 將會(huì)以 JSON 的形式由邏輯層傳至渲染層,所以其數(shù)據(jù)必須是可以轉(zhuǎn)成 JSON 的格式:字符串,數(shù)字,布爾值,對(duì)象,數(shù)組。
渲染層可以通過(guò) WXML 對(duì)數(shù)據(jù)進(jìn)行綁定。
示例代碼:
<view>{{text}}</view> <view>{{array[0].msg}}</view> Page({ data: { text: 'init data', array: [{msg: '1'}, {msg: '2'}] } })
Page.prototype.setData()
setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層,同時(shí)改變對(duì)應(yīng)的 this.data 的值。
注意:
1.直接修改 this.data 無(wú)效,無(wú)法改變頁(yè)面的狀態(tài),還會(huì)造成數(shù)據(jù)不一致。
2.單次設(shè)置的數(shù)據(jù)不能超過(guò)1024kB,請(qǐng)盡量避免一次設(shè)置過(guò)多的數(shù)據(jù)
setData() 參數(shù)格式
接受一個(gè)對(duì)象,以 key,value 的形式表示將 this.data 中的 key 對(duì)應(yīng)的值改變成 value。
其中 key 可以非常靈活,以數(shù)據(jù)路徑的形式給出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中預(yù)先定義。
示例代碼:
<!--index.wxml--> <view>{{text}}</view> <button bindtap="changeText"> Change normal data </button> <view>{{array[0].text}}</view> <button bindtap="changeItemInArray"> Change Array data </button> <view>{{obj.text}}</view> <button bindtap="changeItemInObject"> Change Object data </button> <view>{{newField.text}}</view> <button bindtap="addNewField"> Add new data </button> //index.js Page({ data: { text: 'init data', array: [{text: 'init data'}], object: { text: 'init data' } }, changeText: function() { // this.data.text = 'changed data' // bad, it can not work this.setData({ text: 'changed data' }) }, changeItemInArray: function() { // you can use this way to modify a danamic data path this.setData({ 'array[0].text':'changed data' }) }, changeItemInObject: function(){ this.setData({ 'object.text': 'changed data' }); }, addNewField: function() { this.setData({ 'newField.text': 'new data' }) } })
視圖層
框架的視圖層由 WXML 與 WXSS 編寫,由組件來(lái)進(jìn)行展示。
將邏輯層的數(shù)據(jù)反應(yīng)成視圖,同時(shí)將視圖層的事件發(fā)送給邏輯層。
WXML(WeiXin Markup language)用于描述頁(yè)面的結(jié)構(gòu)。
WXSS(WeiXin Style Sheet)用于描述頁(yè)面的樣式。
組件(Component)是視圖的基本組成單元。
什么是事件
- 事件是視圖層到邏輯層的通訊方式。
- 事件可以將用戶的行為反饋到邏輯層進(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="MINA" bindtap="tapName"> Click me! </view> 在相應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù),參數(shù)是event。 Page({ tapName: function(event) { console.log(event) } })
基礎(chǔ)組件
框架為開發(fā)者提供了一系列基礎(chǔ)組件,開發(fā)者可以通過(guò)組合這些基礎(chǔ)組件進(jìn)行快速開發(fā)。
什么是組件:
- 組件是視圖層的基本組成單元。
- 組件自帶一些功能與微信風(fēng)格的樣式。
- 一個(gè)組件通常包括開始標(biāo)簽和結(jié)束標(biāo)簽,屬性用來(lái)修飾這個(gè)組件,內(nèi)容在兩個(gè)標(biāo)簽之內(nèi)。
<tagname property="value"> Content goes here ... </tagename>
注意:所有組件與屬性都是小寫,以連字符-連接
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
關(guān)于js typeof 與 instanceof 判斷數(shù)據(jù)類型區(qū)別及開發(fā)使用
我們經(jīng)常會(huì)遇到判斷一個(gè)變量的數(shù)據(jù)類型或該變量是否為空值的情況,你是如何去選擇判斷類型操作符的?本文來(lái)記錄一下我們開發(fā)人員必須掌握關(guān)于 typeof 和 instanceof 的知識(shí)點(diǎn)及在開發(fā)中的使用建議,同時(shí)在面試過(guò)程中也經(jīng)常會(huì)遇到這樣的問(wèn)題,需要的朋友可參考下文章內(nèi)容2021-10-10微信小程序 按鈕滑動(dòng)的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序 按鈕滑動(dòng)的實(shí)現(xiàn)方法的相關(guān)資料,希望通過(guò)本文能幫助到大家實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-09-09詳解無(wú)界微前端是如何渲染子應(yīng)用的demo解析
這篇文章主要為大家介紹了詳解無(wú)界微前端是如何渲染子應(yīng)用demo解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04