這篇文章主要介紹了微信小程序 視圖層（xx.xml)和邏輯層(xx.js)詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
微信小程序可以理解為云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)。用戶購買應(yīng)用所支付的費(fèi)用由蘋果與應(yīng)用開發(fā)商3：7分成。如果微信小程序商城也采用類似的分傭模式，那8億多的用戶將是一個(gè)非常大的無形資產(chǎn)，成為騰訊繼游戲、會(huì)員、廣告后的另一個(gè)掘金源。
微信小程序允許人們無需進(jìn)行下載安裝就使用App。用戶可以在微信上掃描二維碼來打開程序。微信小程序可以應(yīng)用在安卓和iOS等不同系統(tǒng)上，也可以在不同的平臺(tái)上分享，因?yàn)樗旧砭皖愃埔粋€(gè)網(wǎng)站頁面。
小程序視圖層（xx.xml)和邏輯層(xx.js)
整個(gè)系統(tǒng)分為兩塊視圖層（View）和邏輯層（App Service）
框架可以讓數(shù)據(jù)與視圖非常簡(jiǎn)單地保持同步。當(dāng)做數(shù)據(jù)修改的時(shí)候，只需要在邏輯層修改數(shù)據(jù)，視圖層就會(huì)做相應(yīng)的更新。
通過這個(gè)簡(jiǎn)單的例子來看：
<!-- 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ā)者通過框架將邏輯層數(shù)據(jù)中的 name 與視圖層的 name 進(jìn)行了綁定，所以在頁面一打開的時(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ù)來填充視圖層，視圖層觸發(fā)邏輯層中的事件，邏輯層返回并改變視圖層的內(nèi)容。
邏輯層(App Service)
小程序開發(fā)框架的邏輯層是由JavaScript編寫。
邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。 在 JavaScript 的基礎(chǔ)上，我們做了一些修改，以方便地開發(fā)小程序。
增加 App 和 Page 方法，進(jìn)行程序和頁面的注冊(cè)。
提供豐富的 API，如掃一掃，支付等微信特有能力。
每個(gè)頁面有獨(dú)立的作用域，并提供模塊化能力。
由于框架并非運(yùn)行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用，如 document，window 等。
開發(fā)者寫的所有代碼最終將會(huì)打包成一份 JavaScript，并在小程序啟動(dòng)的時(shí)候運(yùn)行，直到小程序銷毀。類似 ServiceWorker，所以邏輯層也稱之為 App Service。
初始化數(shù)據(jù)
初始化數(shù)據(jù)將作為頁面的第一次渲染。data 將會(huì)以 JSON 的形式由邏輯層傳至渲染層，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成 JSON 的格式：字符串，數(shù)字，布爾值，對(duì)象，數(shù)組。
渲染層可以通過 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 無效，無法改變頁面的狀態(tài)，還會(huì)造成數(shù)據(jù)不一致。
2.單次設(shè)置的數(shù)據(jù)不能超過1024kB，請(qǐng)盡量避免一次設(shè)置過多的數(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 編寫，由組件來進(jìn)行展示。
將邏輯層的數(shù)據(jù)反應(yīng)成視圖，同時(shí)將視圖層的事件發(fā)送給邏輯層。
WXML(WeiXin Markup language)用于描述頁面的結(jié)構(gòu)。
WXSS(WeiXin Style Sheet)用于描述頁面的樣式。
組件(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ì)在該頁面對(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ā)者可以通過組合這些基礎(chǔ)組件進(jìn)行快速開發(fā)。
什么是組件：
組件是視圖層的基本組成單元。
組件自帶一些功能與微信風(fēng)格的樣式。
一個(gè)組件通常包括開始標(biāo)簽和結(jié)束標(biāo)簽，屬性用來修飾這個(gè)組件，內(nèi)容在兩個(gè)標(biāo)簽之內(nèi)。
<tagname property="value"> Content goes here ... </tagename>
注意：所有組件與屬性都是小寫，以連字符-連接
【相關(guān)推薦】
4.?小程序開發(fā)之利用co處理異步流程的實(shí)例教程
Atas ialah kandungan terperinci 詳解微信開發(fā)中視圖層（xx.xml)和邏輯層(xx.js). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Pembangunan PHP WeChat: Bagaimana untuk melaksanakan penyulitan dan penyahsulitan mesej
May 13, 2023 am 11:40 AM
PHP ialah bahasa skrip sumber terbuka yang digunakan secara meluas dalam pembangunan web dan pengaturcaraan sisi pelayan, terutamanya dalam pembangunan WeChat. Hari ini, semakin banyak syarikat dan pembangun mula menggunakan PHP untuk pembangunan WeChat kerana ia telah menjadi bahasa pembangunan yang benar-benar mudah dipelajari dan mudah digunakan. Dalam pembangunan WeChat, penyulitan dan penyahsulitan mesej merupakan isu yang sangat penting kerana ia melibatkan keselamatan data. Untuk mesej tanpa kaedah penyulitan dan penyahsulitan, penggodam boleh mendapatkan data dengan mudah, menimbulkan ancaman kepada pengguna.
Pembangunan PHP WeChat: Bagaimana untuk melaksanakan fungsi pengundian
May 14, 2023 am 11:21 AM
Dalam pembangunan akaun awam WeChat, fungsi pengundian sering digunakan. Fungsi undian ialah cara yang bagus untuk pengguna mengambil bahagian dalam interaksi dengan pantas, dan ia juga merupakan alat penting untuk mengadakan acara dan meninjau pendapat. Artikel ini akan memperkenalkan anda cara menggunakan PHP untuk melaksanakan fungsi undian WeChat. Dapatkan kebenaran akaun rasmi WeChat Pertama, anda perlu mendapatkan kebenaran akaun rasmi WeChat. Pada platform awam WeChat, anda perlu mengkonfigurasi alamat API akaun awam WeChat, akaun rasmi dan token yang sepadan dengan akaun awam. Dalam proses pembangunan kami menggunakan bahasa PHP, kami perlu menggunakan PH yang disediakan secara rasmi oleh WeChat
Menggunakan PHP untuk membangunkan alat pemesejan massa WeChat
May 13, 2023 pm 05:00 PM
Dengan populariti WeChat, semakin banyak syarikat mula menggunakannya sebagai alat pemasaran. Fungsi pemesejan kumpulan WeChat ialah salah satu cara penting bagi perusahaan untuk menjalankan pemasaran WeChat. Walau bagaimanapun, jika anda hanya bergantung pada penghantaran manual, ia adalah tugas yang sangat memakan masa dan susah payah untuk pemasar. Oleh itu, adalah amat penting untuk membangunkan alat pemesejan massa WeChat. Artikel ini akan memperkenalkan cara menggunakan PHP untuk membangunkan alat penghantaran massa WeChat. 1. Kerja penyediaan Untuk membangunkan alat pemesejan massa WeChat, kita perlu menguasai perkara teknikal berikut: Pengetahuan asas PHP WeChat alat pembangunan platform awam: Sub
Pembangunan PHP WeChat: Bagaimana untuk melaksanakan pengurusan tetingkap sembang perkhidmatan pelanggan
May 13, 2023 pm 05:51 PM
WeChat kini merupakan salah satu platform sosial dengan pangkalan pengguna terbesar di dunia Dengan populariti Internet mudah alih, semakin banyak syarikat mula menyedari kepentingan pemasaran WeChat. Apabila menjalankan pemasaran WeChat, perkhidmatan pelanggan adalah bahagian yang penting. Untuk mengurus tetingkap sembang perkhidmatan pelanggan dengan lebih baik, kami boleh menggunakan bahasa PHP untuk pembangunan WeChat. 1. Pengenalan kepada pembangunan PHP WeChat PHP ialah bahasa skrip bahagian pelayan sumber terbuka yang digunakan secara meluas dalam bidang pembangunan Web. Digabungkan dengan antara muka pembangunan yang disediakan oleh platform awam WeChat, kami boleh menggunakan bahasa PHP untuk menjalankan WeChat
Pembangunan PHP WeChat: Bagaimana untuk melaksanakan pengurusan tag pengguna
May 13, 2023 pm 04:31 PM
Dalam pembangunan akaun awam WeChat, pengurusan tag pengguna ialah fungsi yang sangat penting, yang membolehkan pembangun memahami dan mengurus pengguna mereka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan fungsi pengurusan teg pengguna WeChat. 1. Dapatkan openid pengguna WeChat Sebelum menggunakan fungsi pengurusan tag pengguna WeChat, kita perlu mendapatkan openid pengguna terlebih dahulu. Dalam pembangunan akaun awam WeChat, adalah amalan biasa untuk mendapatkan openid melalui kebenaran pengguna. Selepas kebenaran pengguna selesai, kami boleh mendapatkan pengguna melalui kod berikut
Pembangunan PHP WeChat: Bagaimana untuk melaksanakan rekod penghantaran mesej kumpulan
May 13, 2023 pm 04:31 PM
Memandangkan WeChat menjadi alat komunikasi yang semakin penting dalam kehidupan orang ramai, fungsi pemesejan tangkasnya digemari oleh sebilangan besar perusahaan dan individu. Bagi perusahaan, membangunkan WeChat menjadi platform pemasaran telah menjadi trend, dan kepentingan pembangunan WeChat secara beransur-ansur menjadi lebih menonjol. Antaranya, fungsi penghantaran kumpulan lebih banyak digunakan Jadi, sebagai pengaturcara PHP, bagaimana untuk melaksanakan rekod penghantaran mesej kumpulan? Berikut akan memberi anda pengenalan ringkas. 1. Memahami pengetahuan pembangunan yang berkaitan dengan akaun awam WeChat Sebelum memahami cara melaksanakan rekod penghantaran mesej kumpulan, I
Langkah untuk melaksanakan pembangunan akaun awam WeChat menggunakan PHP
Jun 27, 2023 pm 12:26 PM
Cara menggunakan PHP untuk membangunkan akaun awam WeChat Akaun awam WeChat telah menjadi saluran penting untuk promosi dan interaksi bagi banyak syarikat, dan PHP, sebagai bahasa Web yang biasa digunakan, juga boleh digunakan untuk membangunkan akaun awam WeChat. Artikel ini akan memperkenalkan langkah khusus untuk menggunakan PHP untuk membangunkan akaun awam WeChat. Langkah 1: Dapatkan akaun pembangun akaun rasmi WeChat Sebelum memulakan pembangunan akaun rasmi WeChat, anda perlu memohon akaun pembangun akaun rasmi WeChat. Untuk proses pendaftaran khusus, sila rujuk laman web rasmi platform awam WeChat
Bagaimana untuk menggunakan PHP untuk pembangunan WeChat?
May 21, 2023 am 08:37 AM
Dengan pembangunan Internet dan peranti pintar mudah alih, WeChat telah menjadi bahagian yang amat diperlukan dalam bidang sosial dan pemasaran. Dalam era yang semakin digital ini, cara menggunakan PHP untuk pembangunan WeChat telah menjadi tumpuan ramai pembangun. Artikel ini terutamanya memperkenalkan mata pengetahuan yang berkaitan tentang cara menggunakan PHP untuk pembangunan WeChat, serta beberapa petua dan langkah berjaga-jaga. 1. Persediaan persekitaran pembangunan Sebelum membangunkan WeChat, anda perlu menyediakan persekitaran pembangunan yang sepadan terlebih dahulu. Secara khusus, anda perlu memasang persekitaran operasi PHP dan platform awam WeChat
