天天看點

微信小程式——使用者登入

在進行微信小程式綜合案例——使用者登入之前,我先将所涉及的知識點羅列一下。

微信小程式的配置分為:

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判斷使用者是否存在。還有事件的綁定。

通過一步一步摸索,到成品的完成,我學習到了一定要多去微信開發文檔,了解其屬性的作用是什麼,很幫助我們在做小程式時節省時間,還有一定要多動手,熟練掌握知識點才能使我們的邏輯更加清晰,要有迎難而上的精神,一定可以學會!