在進行微信小程式綜合案例——使用者登入之前,我先将所涉及的知識點羅列一下。
微信小程式的配置分為:
app的頁面配置,app的視窗配置,app的taBar配置,網絡逾時配置及debug開啟配置,頁面配置。
建立一個新的項目,取一個項目名稱。我們需要借助微信的開發文檔來了解它,點開文檔的架構,然後點配置。
app的頁面配置:頁面的配置在app.json
我們注意在這裡不需要添加字尾名,第一個頁面就是我們程式啟動時的第一個頁面。
app的視窗配置:我們可以打開微信開發文檔,可以了解到有的屬性是導航欄背景顔色,标題顔色,标題文字内容,視窗的背景色等
在app.json中我們可以根據屬性來修改内容
其效果為:
這裡要注意的是navigationBarTextStyle僅支援black/white,和backgroundTextStyle僅支援dark/light。
app的taBar配置:在微信開發文檔中有事例代碼,我們可以複制事例代碼在app.json儲存
在完成後會出現不顯示的情況,這是為什麼呢?原因是這樣的,taBar裡對應的頁面應該是首頁,否則我們是看不到的。在配置中除了複制的幾項外還有其他的配置,我們可以在微信開發文檔中檢視。
例如:
結果為:
網絡逾時配置及debug開啟配置:在微信開發文檔也給了事例代碼。但需要注意幾點,request隻影響到了發起請求,connectsocket隻影響到它的逾時等。
頁面配置:index.json這個配置可以覆寫app.json的全局配置。他隻能覆寫window這一部分的配置。
微信小程式的生命周期
生命周期:在app.js中我們可以看到調用了app的一個方法有資料和參數。onLaunch屬于app的一個環節之一,除了它還有onShow,onHide。注意在背景才執行onHide,前台執行onShow。它的作用是例如在我們進行遊戲時,當我們把遊戲經行背景時,我們可以利用onHide将遊戲關閉。當進入前台時再把onShow設為繼續。
微信小程式頁面的生命周期和參數傳遞包括頁面的生命周期。
頁面的生命周期:在首頁index.wxml中進行删除和修改其他頁面同理如:
羅列完知識點之後,要進行關于這部分知識的綜合案例——使用者登陸
項目的需求為:
整體的頁面結構為:
使用者中心邏輯的實作:使用者中心,在我們初次進入使用者中心時沒有使用者資訊,需要我們進入到登陸頁面,登陸之後需要我們傳回使用者中心。
在app.js編譯使用者資訊,在登陸頁面設計一個邏輯,在這裡我遇到了一個問題,點選使用者中心确實跳轉到了登陸頁面,但是還可以傳回。通過查詢我知道了,不能用navigateTo這個方法要改為redirectTo,他們參數一樣。
login.wxml:在按鈕綁定一個事件,并把這個事件寫在代碼裡。在這裡我遇到了問題在taBar中它的内容沒有顯示在首頁,通過反複檢查,結合知識點我知道了taBar裡對應的頁面應該是首頁,否則我們是看不到的。
在輸入框綁定一個input事件密碼等。
在這個綜合案例中我們運用到了配置頁面,windoe,以及taBAr。每個頁面裡還有配置,以至于覆寫掉全局配置。還用到了生命周期,在onLoad判斷使用者是否存在。還有事件的綁定。
通過一步一步摸索,到成品的完成,我學習到了一定要多去微信開發文檔,了解其屬性的作用是什麼,很幫助我們在做小程式時節省時間,還有一定要多動手,熟練掌握知識點才能使我們的邏輯更加清晰,要有迎難而上的精神,一定可以學會!