這篇文章主要介紹了微信小程序前端源碼詳解及實例分析的相關(guān)資料,需要的朋友可以參考下
微信小程序前端源碼邏輯和工作流
看完微信小程序的前端代碼真的讓我熱血沸騰啊，代碼邏輯和設(shè)計一目了然，沒有多余的東西，真的是大道至簡。
廢話不多說，直接分析前端代碼。個人觀點，難免有疏漏，僅供參考。
文件基本結(jié)構(gòu)：
先看入口app.js，app(obj)注冊一個小程序。接受一個 object 參數(shù)，其指定小程序的生命周期函數(shù)等。其他文件可以通過全局方法getApp()獲取app實例，進而直接調(diào)用它的屬性或方法，例如（getApp().globalData）
//app.js
App({
onLaunch: function () {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//調(diào)用登錄接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})我理解app.js為入口初始化文件，也是提供全局API拓展的地方。下邊分析下自帶的幾個方法和屬性
onLaunch鉤子函數(shù)會在小程序初始化完成后會自動執(zhí)行一次，然后在小程序生命周期里如果你不主動調(diào)用onLaunch，它就不會在執(zhí)行。
var logs = wx.getStorageSync('logs') || []獲取本地緩存中的logs屬性，如果值為空，那么設(shè)置logs=[] 與HTML5中的localStorage作用相似
logs.unshift(Date.now()) 當前登錄時間添加到數(shù)組中
wx.setStorageSync('logs', logs) 將數(shù)據(jù)存入本地緩存，因為wx為全局對象，所以可以在其他文件中直接調(diào)用wx.getStorageSync('logs')獲取本地緩存數(shù)據(jù)
getUserInfo函數(shù)，顧名思義就是獲取登錄用戶信息，相當于此函數(shù)提供了獲取用戶信息的接口，其他頁面不調(diào)用自然不會執(zhí)行。其他頁面通過getApp().getUserInfo(function(userinfo){console.log(userinfo);})這種方式調(diào)用該方法，獲取用戶信息。
getUserInfo:function(cb){//參數(shù)為cb,類型為函數(shù)
var that = this
if(this.globalData.userInfo){//用戶信息不為空
typeof cb == "function" && cb(this.globalData.userInfo)//如果參數(shù)cb的類型為函數(shù)，那么執(zhí)行cb,獲取用戶信息；
}else{//如果用戶信息為空，也就是說第一次調(diào)用getUserInfo，會調(diào)用用戶登錄接口。
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
console.log(res)
that.globalData.userInfo = res.userInfo//把用戶信息賦給globalData，如果再次調(diào)用getUserInfo函數(shù)的時候，不需要調(diào)用登錄接口
typeof cb == "function" && cb(that.globalData.userInfo)//如果參數(shù)cb類型為函數(shù)，執(zhí)行cb,獲取用戶信息
}
})
}
})
}
}globalData對象用來存儲全局數(shù)據(jù)，在其他地方調(diào)用
然后簡要分析下app.json文件,該文件作用是對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等、
最重要的是pages屬性，必填，為數(shù)組，數(shù)組內(nèi)的元素為字符串性文件路徑，指定小程序由哪些頁面組成，第一項必須是小程序初始頁面。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}然后來看下項目index和logs文件夾。微信小程序初始項目把每個頁面相關(guān)的js、wxss、wxml放在各自的文件，這樣看起來結(jié)構(gòu)清晰明朗很多。
先來看index文件夾，即小程序初始頁面。index文件夾下為index.js、index.wxml、index.wxss三個小文件。小程序把js、css、html代碼分離開來，放在獨自的文件里，各司其職。js和樣式表文件名必須與當前文件夾的wxml文件名保持一致，這樣才能保證js和樣式表的效果能夠在頁面中顯現(xiàn)出來。我很欣賞這樣的設(shè)計理念，整齊劃一，職責明確，減輕代碼設(shè)計復雜度。
index.wxml，這就是常見的模板文件，數(shù)據(jù)驅(qū)動，有過前端mvc、mvvm項目開發(fā)的對這個一定不會陌生，畢竟這是基于react開發(fā)的?！ ?/span>
<!--index.wxml-->
<view class="container">//視圖容器
<view bindtap="bindViewTap" class="userinfo">//bindtap為容器綁定點擊觸摸事件，在觸摸離開時觸發(fā)bindViewTap事件處理函數(shù)，bindViewTap通過index.js page()設(shè)置添加
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>//大雙括號的變量來自于index.js的data對象解析成對應(yīng)的值，而且是實時的
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>index.js，與reaact用法幾無二異，換湯不換藥。page()來注冊一個頁面。接受一個 OBJECT 參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
var app = getApp() // 獲取入口文件app的應(yīng)用實例
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//自定義事件處理函數(shù)，點擊.userinfo的容易觸發(fā)此函數(shù)
bindViewTap: function() {
wx.navigateTo({//全局對象wx的跳轉(zhuǎn)頁面方法
url: '../logs/logs'
})
},
onLoad: function () {//發(fā)生頁面加載時，自動觸發(fā)該生命周期函數(shù)
console.log('onLoad')
var that = this
//調(diào)用應(yīng)用實例的方法獲取全局數(shù)據(jù)
app.getUserInfo(function(userInfo){
//更新數(shù)據(jù)，頁面自動渲染
that.setData({
userInfo:userInfo
})
})
}
})index.wxss文件只渲染當前所屬頁面，會覆蓋全局app.wxss同一樣式。
再分析下logs日志文件夾，logs文件夾下為logs.wxml、logs.js、logs.wxss、logs.json，同理保證同名，才能完成效果渲染。
logs.wxml文件
<!--logs.wxml-->
<view class="container log-list">
<block wx:for="{{logs}}" wx:for-item="log">//block容器作用，無其他實際含義。wx:for作用：遍歷logs數(shù)組，遍歷多少次，block塊就會復制多少次，for-item等同于為<br>遍歷元素起一個變量名，方便引用。<br>
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>logs.js 文件
//logs.js
var util = require('../../utils/util.js') //util.js相當于一個函數(shù)庫，我們可以在這個文件內(nèi)自定義擴展和封裝一些常用的函數(shù)和方法
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {//通過wx.getStorageSync獲取本地緩存的logs日志數(shù)據(jù)
return util.formatTime(new Date(log))//日期格式化
})
})
}
})logs.json文件
{
"navigationBarTitleText": "查看啟動日志" //當前頁面配置文件，設(shè)置window當前頁面頂部導航欄標題等相關(guān)內(nèi)容
}基本頁面結(jié)構(gòu)和邏輯就這么簡單，暴露給我們的沒有一點令人費解的東西。
更多詳解微信小程序前端源碼和實例分析相關(guān)文章請關(guān)注PHP中文網(wǎng)！
相關(guān)文章：
Atas ialah kandungan terperinci 詳解微信小程序前端源碼和實例分析. 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)
Program mini Xianyu WeChat dilancarkan secara rasmi
Feb 10, 2024 pm 10:39 PM
Program mini WeChat rasmi Xianyu telah dilancarkan secara senyap-senyap Dalam program mini, anda boleh menghantar mesej peribadi untuk berkomunikasi dengan pembeli/penjual, melihat maklumat dan pesanan peribadi, mencari item, dsb. Jika anda ingin tahu apakah program mini Xianyu WeChat. dipanggil, lihat sekarang. Apakah nama applet Xianyu WeChat Jawapan: Xianyu, transaksi terbiar, jualan terpakai, penilaian dan kitar semula. 1. Dalam program mini, anda boleh menghantar mesej terbiar, berkomunikasi dengan pembeli/penjual melalui mesej peribadi, melihat maklumat dan pesanan peribadi, mencari item yang ditentukan, dsb. 2. Pada halaman program mini, terdapat halaman utama, berdekatan, post idle, messages, and mine 5 functions; 3. Jika anda ingin menggunakannya, anda mesti mengaktifkan pembayaran WeChat sebelum anda boleh membelinya;
Laksanakan kesan penapis imej dalam program mini WeChat
Nov 21, 2023 pm 06:22 PM
Melaksanakan kesan penapis gambar dalam program mini WeChat Dengan populariti aplikasi media sosial, orang ramai semakin gemar menggunakan kesan penapis pada foto untuk meningkatkan kesan artistik dan daya tarikan foto. Kesan penapis gambar juga boleh dicapai dalam program mini WeChat, menyediakan pengguna dengan fungsi penyuntingan foto yang lebih menarik dan kreatif. Artikel ini akan memperkenalkan cara melaksanakan kesan penapis imej dalam program mini WeChat dan memberikan contoh kod khusus. Pertama, kita perlu menggunakan komponen kanvas dalam applet WeChat untuk memuatkan dan mengedit imej. Komponen kanvas boleh digunakan pada halaman
Laksanakan kesan menu lungsur dalam applet WeChat
Nov 21, 2023 pm 03:03 PM
Untuk melaksanakan kesan menu lungsur dalam Program Mini WeChat, contoh kod khusus diperlukan Dengan populariti Internet mudah alih, Program Mini WeChat telah menjadi bahagian penting dalam pembangunan Internet, dan semakin ramai orang telah mula memberi perhatian kepada dan. gunakan Program Mini WeChat. Pembangunan program mini WeChat adalah lebih mudah dan pantas daripada pembangunan APP tradisional, tetapi ia juga memerlukan penguasaan kemahiran pembangunan tertentu. Dalam pembangunan program mini WeChat, menu lungsur ialah komponen UI biasa, yang mencapai pengalaman pengguna yang lebih baik. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan kesan menu lungsur dalam applet WeChat dan menyediakan praktikal
Apakah nama applet WeChat Xianyu?
Feb 27, 2024 pm 01:11 PM
Program mini WeChat rasmi Xianyu telah dilancarkan secara senyap-senyap Ia menyediakan pengguna dengan platform yang mudah yang membolehkan anda menerbitkan dan berdagang item terbiar dengan mudah. Dalam program mini, anda boleh berkomunikasi dengan pembeli atau penjual melalui mesej peribadi, melihat maklumat peribadi dan pesanan, dan mencari item yang anda inginkan. Jadi apa sebenarnya yang dipanggil Xianyu dalam program mini WeChat ini akan memperkenalkannya kepada anda secara terperinci Pengguna yang ingin tahu, sila ikuti artikel ini dan teruskan membaca! Apakah nama applet Xianyu WeChat Jawapan: Xianyu, transaksi terbiar, jualan terpakai, penilaian dan kitar semula. 1. Dalam program mini, anda boleh menghantar mesej terbiar, berkomunikasi dengan pembeli/penjual melalui mesej peribadi, melihat maklumat dan pesanan peribadi, mencari item yang ditentukan, dsb. 2. Pada halaman program mini, terdapat halaman utama, berdekatan, post melahu, mesej, dan 5 fungsi;
Applet WeChat melaksanakan fungsi muat naik imej
Nov 21, 2023 am 09:08 AM
Applet WeChat melaksanakan fungsi muat naik gambar Dengan perkembangan Internet mudah alih, applet WeChat telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Program mini WeChat bukan sahaja menyediakan pelbagai senario aplikasi, tetapi juga menyokong fungsi yang ditentukan oleh pembangun, termasuk fungsi muat naik imej. Artikel ini akan memperkenalkan cara untuk melaksanakan fungsi muat naik imej dalam applet WeChat dan memberikan contoh kod khusus. 1. Kerja persediaan Sebelum mula menulis kod, kita perlu memuat turun dan memasang alat pembangun WeChat dan mendaftar sebagai pembangun WeChat. Pada masa yang sama, anda juga perlu memahami WeChat
Laksanakan kesan putaran imej dalam applet WeChat
Nov 21, 2023 am 08:26 AM
Untuk melaksanakan kesan putaran imej dalam Program Mini WeChat, contoh kod khusus diperlukan Program Mini WeChat ialah aplikasi ringan yang menyediakan pengguna dengan fungsi yang kaya dan pengalaman pengguna yang baik. Dalam program mini, pembangun boleh menggunakan pelbagai komponen dan API untuk mencapai pelbagai kesan. Antaranya, kesan putaran gambar merupakan kesan animasi biasa yang boleh menambah minat dan kesan visual pada program mini. Untuk mencapai kesan putaran imej dalam program mini WeChat, anda perlu menggunakan API animasi yang disediakan oleh program mini. Berikut ialah contoh kod khusus yang menunjukkan cara untuk
Gunakan applet WeChat untuk mencapai kesan penukaran karusel
Nov 21, 2023 pm 05:59 PM
Gunakan applet WeChat untuk mencapai kesan penukaran karusel WeChat applet ialah aplikasi ringan dengan ciri pembangunan dan penggunaan yang mudah dan cekap. Dalam program mini WeChat, adalah keperluan biasa untuk mencapai kesan penukaran karusel. Artikel ini akan memperkenalkan cara menggunakan applet WeChat untuk mencapai kesan penukaran karusel dan memberikan contoh kod khusus. Mula-mula, tambahkan komponen karusel pada fail halaman applet WeChat. Contohnya, anda boleh menggunakan teg <swiper> untuk mencapai kesan penukaran karusel. Dalam komponen ini, anda boleh lulus b
Laksanakan fungsi padam gelongsor dalam program mini WeChat
Nov 21, 2023 pm 06:22 PM
Melaksanakan fungsi padam gelongsor dalam program mini WeChat memerlukan contoh kod khusus Dengan populariti program mini WeChat, pembangun sering menghadapi masalah pelaksanaan beberapa fungsi biasa semasa proses pembangunan. Antaranya, fungsi padam gelongsor adalah keperluan fungsi yang biasa dan biasa digunakan. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan fungsi padam gelongsor dalam applet WeChat dan memberikan contoh kod khusus. 1. Analisis keperluan Dalam program mini WeChat, pelaksanaan fungsi pemadaman gelongsor melibatkan perkara berikut: Paparan senarai: Untuk memaparkan senarai yang boleh diluncurkan dan dipadam, setiap item senarai perlu disertakan
