小程式之入門篇(一)
大家好,我是小編,這幾天自己學習了小程式,發現真的太爽了,以下是我寫下的筆記,希望給入門的盆友提供一些幫助吧。
app.js 用於監聽並處理小程式的生命週期函式,宣告全域性變數,呼叫框架,提供豐富的API
同步儲存:wx.setStorageSync()
同步讀取本地資料的API:wx.getStorageSync()
app.json : 對整個小程式的全域性配置
app.wxss: 整個小程式的公共樣式表
注:.wxml與.js檔案是頁面所必需的 .wxss 與.json 檔案則是可選的
每一個頁面的“路徑+頁面名” 都需要寫在app.json的pages中 ,且pages中的第一個頁面
是小程式的首頁
<block/>並不是一個元件,僅僅是一個包裝元素,不會在頁面做任何渲染,只
接受控制屬性(wx:for或wx:if)
小程式執行的生命週期:
app.onLaunch(啟動,初始化)->app.onShow(進入前臺,觸發執行的操作)->page1.onLoad
(page1頁面載入執行初始化)->page1.onShow->page1.onReady(頁面就緒)->
page1.onHide(頁面隱藏)->page2.onLoad->page2,onShow->page2.onReady->page2.onUnload
(page2頁面關閉)->page1.onShow(page1頁面顯示)->...-> app.onUnload(退出小程式)
-------------------------------------------
每個小程式分為2個執行緒: ①view : 負責解析渲染頁面(wxml 和 wxss )
②appServer:負責執行js
小程式的開發步驟: ①建立小程式例項:編寫3個app字首的檔案
小程式例項將由appServer執行緒執行
②建立頁面(頁面結構與事務處理邏輯)
小程式頁面由view執行緒來執行
---------------------------------------------------
MINA框架 : 有著接近原生App的執行速度,做了大量的框架層面的優化設計,對Android端和
ios端做出了高度一致的呈現
邏輯層: 事務邏輯處理的地方(所有.js指令碼檔案的集合)
小程式邏輯層由js編寫,但並非執行在瀏覽器中
檢視層:由wxml和wxss編寫,由元件來進行展示(所有.wxml檔案與.wxss檔案的集合)
資料層:臨時資料或快取,檔案儲存,網路儲存與呼叫
①頁面臨時資料或快取 setData
②檔案儲存: wx.getStorage 本地資料快取
wx.setStorage 設定本地資料快取
wx.clearStorage 清理本地資料快取
3、網路儲存或呼叫 wx.request 發起網路請求
wx.uploadFile 上傳檔案
wx.downloadFile 下載檔案
呼叫url的api介面
wx.navigateTo 新視窗開啟頁面
wx.redirectTo 原視窗開啟頁面
------------------------------------
小程式入口: (使用者端)
1.給定二維碼,掃描進入
2.關注小程式後進入,或可自定義儲存在桌面上
3.其他公眾號圖文、朋友圈廣告、朋友分享等連結進入
(開發者)
1.電腦上執行“微信Web開發者工具”,直接模擬使用
2.使用手機微信掃碼進行預覽
小程式的介面與操作具有以下特點:
1.介面開發成本低,速度快
2.風格可控
3.操作簡單
4.操作效能佳(具有接近原生App的效能)
小程式與H5區別:
1.javascript的限制(小程式中沒有cookie)
2.改進優化:登陸方面-- H5 通過微信授權一般採用URL重定向的方式獲取code
小程式 通過wx.login 獲取code 避免了登陸重定向
儲存方面: 小程式用storage(5M)替代了H5的localstorage,
sessionstorage。支援同步非同步
微信支付路徑不再受限
不方便之處: ①每個頁面需要手動在app.json中進行註冊
②開啟頁面有5個限制,開發時需控制開啟頁面的數量
---------------------------------------------
頁面.json檔案配置比app.json配置簡單(頁面的.json會覆蓋app.json的內容)
onLaunch 函式全域性只觸發一次
App() 方法必須在app.js中註冊,且不能註冊多個
獲取小程式例項: var appInstance = getApp() 不能私自呼叫生命週期函式