微信小程式前端原始碼邏輯和工作流

2022-10-06 21:18:15 字數 2352 閱讀 5646

廢話不多說,直接分析前端**。

檔案基本結構:

先看入口app.js,app(obj)註冊乙個小程式。接受乙個 object 引數,其指定小程式的生命週期函式等。其他檔案可以通過全域性方法getapp()獲取app例項,進而直接呼叫它的屬性或方法,例如(getapp().globaldata)

app(,

getuserinfo:function(cb)else})}

})}},globaldata:

})我理解app.js為入口初始化檔案,也是提供全域性api拓展的地方。下邊分析下自帶的幾個方法和屬性

onlaunch鉤子函式會在小程式初始化完成後會自動執行一次,然後在小程式生命週期裡如果你不主動呼叫onlaunch,它就不會在執行。

var logs = wx.getstoragesync('logs') || 獲取本地快取中的logs屬性,如果值為空,那麼設定logs= 與html5中的localstorage作用相似logs.unshift(date.now()) 當前登入時間新增到陣列中wx.setstoragesync('logs', logs) 將資料存入本地快取,因為wx為全域性物件,所以可以在其他檔案中直接呼叫wx.getstoragesync('logs')獲取本地快取資料

getuserinfo函式,顧名思義就tinyaxda是獲取登入使用者資訊,相當於此函式提供了獲取使用者資訊的介面,其他頁面不呼叫自然不會執行。其他頁面通過getapp().getuserinfo(function(userinfo))這種方式呼叫該方法,獲取使用者資訊。

getuserinfo:function(cb)else})}

})}}

globaldata物件用來儲存全域性資料,在其他地方呼叫

然後簡要分析下app.json檔案,該檔案作用是對微信小程式進行全域性配置,決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等、

最重要的是pages屬性,必填,為陣列,陣列內的元素為字串性檔案路徑,指定小程式由哪些頁面組成,第一項必須是小程式初始頁面。

}然後來看下專案index和logs資料夾。微信小程式初始專案把每個頁面相關的js、wxss、wxml放在各自的檔案,這樣看起來結構清晰明朗很多。

先來看index資料夾,即小程式初始頁面。index資料夾下為index.js、index.wxml、index.wxss三個小檔案。小程式把js、css、html**分離開來,放在獨自的檔案裡,各司其職。js和樣式表檔名必須與當前資料夾的wxml檔名保持一致,這樣才能保證js和樣式表的效果能夠在頁面中顯現出來。我很欣賞這樣的設計理念,整齊劃一,職責明確,減輕**設計複雜度。

index.wxml,這就是常見的模板檔案,資料驅動,有過前端mvc、mvvm專案開發的對這個一定不會陌生,畢竟這是基於react開發的。  

//檢視容器

//bindtap為容器繫結點選觸控事件,在觸控離開時觸發bindviewtap事件處理函式,bindviewtap通過index.js page()設定新增

//大雙括號的變數來自於index.js的data物件解析成對應的值,而且是實時的}}

index.js,與reaact用法幾無二異,換湯不換藥。page()來註冊乙個頁面。接受乙個 object 引數,其指定頁面的初始資料、生命週期函式、事件處理函式等。

var app = getapp() // 獲取入口檔案app的應用例項

page(

},//自定義事件處理函式,點選.userinfo的容易觸發此函式

bwww.cppcns.comindviewtap: function() )

},onload: function () )})}

})index.wxss檔案只渲染當前所屬頁面,會覆蓋全域性app.wxss同一樣式。

再分析下logs日誌資料夾,logs資料夾下為logs.wxml、logs.js、logs.wxss、logs.json,同理保證同名,才能完成效果渲染。

logs.wxml檔案

//block容器作用,無其他實際含義。wx:for作用:遍歷logs陣列,遍歷多少次,block塊就會複製多少次,for-item等同於為

遍歷元素起乙個變數名,方便引用。

}. }

logs.js 檔案

var util = require('../../utils/util.js') 相當於乙個函式庫,我們可以在這個檔案內自定義擴充套件和封裝一些常用的函式和方法

page(,程式設計客棧

onload: function () )})}

})logs.json檔案

基本頁面結構和邏輯就這麼簡單,暴露給我們的沒有一點令人費解的東西。

小程式還提供了很多官方元件和api等待我們深挖,加油吧,少年!小程式官方文件位址

本文標題: 微信小程式前端原始碼邏輯和工作流

本文位址:

微信小程式原始碼丟失了如何找回微信小程式原始碼?

然後就找各種辦法資料恢復,但是種種原因恢復不過來了。涼涼。繼續想解決辦法,結果呢想到了反編譯,對,就這樣反編譯!先看下最終結果吧 記得要安裝最新版本的node.js哦 使用模擬器或者越獄的蘋果手機,獲得root許可權的安卓手機來抓取wxapkg包 我的是使用蘋果手機來抓取包的,需要越獄。這裡就不多說...

微信小程式實現左滑刪除原始碼

clear左滑刪除 從技術上來說,實現這個效果並不困難,響應一下滑動操作,移動一下元件,再加上些座標計算,狀態記錄就可以了。也有一些文章介紹了在小程式上如何實現這一效果,不過我基本可以確定這些開發者沒有在真機上詳細測試,因為經我實踐發現,在小程式上想要完美實現這個效果幾乎是不可能完成的任務。這一切要...

微信小程式 邏輯層

初始資料 data 是頁面第一次渲染使用的初始資料 因為頁面載入時,data將會以json 字串的形式由邏輯層傳到渲染層,因此data 中的資料必須時可以轉成 json 的型別 字串 數字 布林值 物件 陣列 同大多數 mvvm 框架語言一樣,也可以實現邏輯層到渲染層的雙向繫結。生命週期 函式 有 ...