1. 程式人生 > >小程式之入門篇(一)

小程式之入門篇(一)

      大家好,我是小編,這幾天自己學習了小程式,發現真的太爽了,以下是我寫下的筆記,希望給入門的盆友提供一些幫助吧。

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()   不能私自呼叫生命週期函式