您好,登錄后才能下訂單哦!
小編給大家分享一下微信小程序中本地存儲(chǔ)及登錄頁(yè)面處理的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
登錄界面:
在
app.json
中添加登陸頁(yè)面
pages/login/login
,并設(shè)置為入口。
保存后,自動(dòng)生成相關(guān)文件(挺方便的)。
修改視圖文件
login.wxml
<!--pages/login/login.wxml--> <view class="container"> <form bindsubmit="formSubmit"> <view class="row"> <text>姓 名:</text> <input type="text" name="userName" placeholder="請(qǐng)輸入用戶名" /> </view> <view class="row"> <text>密 碼:</text> <input type="password" name="userPassword" placeholder="請(qǐng)輸入密碼" /> </view> <view class="row"> <button type="primary" form-type="submit">登陸</button> </view> </form> </view>
修改登陸樣式
login.wxss
/* pages/login/login.wxss */ .container{ padding: 1rem; font-size: 0.9rem; line-height: 1.5rem; border-shadow: 1px 1px #0099CC; } .row{ display: flex; align-items: center; margin-bottom: 0.8rem; } .row text{ flex-grow: 1; text-align: right; } .row input{ font-size: 0.7rem; color: #ccc; flex-grow: 3; border: 1px solid #0099CC; display: inline-block; border-radius: 0.3rem; box-shadow: 0 0 0.15rem #aaa; padding: 0.3rem; } .row button{ padding: 0 2rem; }
看下樣式:
form相關(guān)屬性:
屬性名 | 類型 | 說(shuō)明 |
---|---|---|
report-submit | Boolean | 是否返回formId用于發(fā)送模板消息 |
bindsubmit | EventHandle | 攜帶form中的數(shù)據(jù)觸發(fā)submit事件,event.detail = { value : {"name":"value"} , formId:"" } |
bindreset | EventHandle | 表單重置時(shí)會(huì)觸發(fā)reset事件 |
這里用到了bindsubmit ,用于處理提交的表單數(shù)據(jù)。
input 相關(guān)屬性
屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 |
---|---|---|---|
value | String | 輸入框的內(nèi)容 | |
type | String | text | input的類型,有效值:text,number,idcard,digit,time,date |
password | Boolean | false | 是否是密碼類型 |
placeholder | String | 輸入框?yàn)榭諘r(shí)占位符 | |
placeholder-style | String | 指定placeholder的樣式 | |
placeholder-class | String | input-placeholder | 指定placeholder的樣式類 |
disabled | Boolean | false | 是否禁用 |
maxlength | Number | 140 | 最大輸入長(zhǎng)度,設(shè)置為0的時(shí)候不限制最大長(zhǎng)度 |
auto-focus | Boolean | false | 自動(dòng)聚焦,拉起鍵盤(pán)。頁(yè)面中只能有一個(gè)input設(shè)置auto-focus屬性 |
focus | Boolean | false | 使得input獲取焦點(diǎn) |
bindchange | EventHandle | 輸入框失去焦點(diǎn)時(shí),觸發(fā)bindchange事件,event.detail={value:value} | |
bindinput | EventHandle | 除了date/time類型外的輸入框,當(dāng)鍵盤(pán)輸入時(shí),觸發(fā)input事件,event.detail={value:value},處理函數(shù)可以直接return一個(gè)字符串,將替換輸入框的內(nèi)容。 | |
bindfocus | EventHandle | 輸入框聚焦時(shí)觸發(fā),event.detail = {value:value} | |
bindblur | EventHandle | 輸入框失去焦點(diǎn)時(shí)觸發(fā),event.detail = {value:value} |
button 相關(guān)屬性
屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 |
---|---|---|---|
size | String | default | 有效值default, mini |
type | String | default | 按鈕的樣式類型,有效值primary, default, warn |
plain | Boolean | false | 按鈕是否鏤空,背景色透明 |
disabled | Boolean | false | 是否禁用 |
loading | Boolean | false | 名稱前是否帶 loading 圖標(biāo) |
formType | String | 無(wú) | 有效值:submit, reset,用于form組件,點(diǎn)擊分別會(huì)觸發(fā)submit/reset事件 |
hover-class | String | button-hover | 指定按鈕按下去的樣式類。當(dāng)hover-class="none"時(shí),沒(méi)有點(diǎn)擊態(tài)效果 |
此Demo中將button的formType設(shè)置為submit用于激活表單提交事件。
實(shí)例二: 處理登陸表單數(shù)據(jù)
修改login.js
// pages/login/login.js Page({ data:{ userName:'', userPassword:'', }, formSubmit:function(e){ console.log(e.detail.value);//格式 Object {userName: "user", userPassword: "password"} //獲得表單數(shù)據(jù) var objData = e.detail.value; if(objData.userName && objData.userPassword){ // 同步方式存儲(chǔ)表單數(shù)據(jù) wx.setStorageSync('userName', objData.userName); wx.setStorageSync('userPassword', objData.userPassword); //跳轉(zhuǎn)到成功頁(yè)面 wx.navigateTo({ url: '../index/index' }) } }, //加載完后,處理事件 // 如果有本地?cái)?shù)據(jù),則直接顯示 onLoad:function(options){ //獲取本地?cái)?shù)據(jù) var userName = wx.getStorageSync('userName'); var userPassword = wx.getStorageSync('userPassword'); console.log(userName); console.log(userPassword); if(userName){ this.setData({userName: userName}); } if(userPassword){ this.setData({userPassword: userPassword}); } }, onReady:function(){ // 頁(yè)面渲染完成 }, onShow:function(){ // 頁(yè)面顯示 }, onHide:function(){ // 頁(yè)面隱藏 }, onUnload:function(){ // 頁(yè)面關(guān)閉 } })
這里使用到了wx.getStorageSync和wx.setStorageSync,這里說(shuō)一下,上面這兩個(gè)方法類似于HTML5的本地存儲(chǔ),屬于同步存儲(chǔ)方式。
這兩個(gè)方法,使用很簡(jiǎn)單,列下參數(shù):
wx.setStorageSync(KEY,DATA)
屬性名 | 類型 | 必填 | 說(shuō)明 |
---|---|---|---|
key | String | 是 | 本地緩存中的指定的key |
data | Object/String | 是 | 需要存儲(chǔ)的內(nèi)容 |
wx.getStorageSync
屬性名 | 類型 | 必填 | 說(shuō)明 |
---|---|---|---|
KEY | String | 是 | 本地緩存中的指定的key |
修改一下login.wxml
<view class="row"> <text>姓 名:</text> <input type="text" name="userName" placeholder="請(qǐng)輸入用戶名" value="{{userName}}" /> </view> <view class="row"> <text>密 碼:</text> <input type="password" name="userPassword" placeholder="請(qǐng)輸入密碼" value="{{userPassword}}" /> </view>
這個(gè)小實(shí)例,會(huì)在登陸的時(shí)候,將登陸信息存到本地存儲(chǔ),當(dāng)下次登陸時(shí),如果本地存儲(chǔ)中有相應(yīng)信息,則直接填寫(xiě)上。
效果(再一次運(yùn)行后,自動(dòng)填寫(xiě)上了信息):
實(shí)例三: 處理登陸表單數(shù)據(jù)(異步)
這里采用異步的方式存放數(shù)據(jù)。
修改一下
login.js
// pages/login/login.js Page({ data:{ userName:'', userPassword:'', }, formSubmit:function(e){ console.log(e.detail.value);//格式 Object {userName: "user", userPassword: "password"} //獲得表單數(shù)據(jù) var objData = e.detail.value; if(objData.userName && objData.userPassword){ // 同步方式存儲(chǔ)表單數(shù)據(jù) wx.setStorage({ key:'userName', data:objData.userName }); wx.setStorage({ key:'userPassword', data:objData.userPassword }); //跳轉(zhuǎn)到成功頁(yè)面 wx.navigateTo({ url: '../index/index' }) } }, //加載完后,處理事件 // 如果有本地?cái)?shù)據(jù),則直接顯示 onLoad:function(options){ var that = this; //獲取本地?cái)?shù)據(jù) wx.getStorage({ key: 'userName', success: function(res){ console.log(res.data); that.setData({userName: res.data}); } }); wx.getStorage({ key: 'userPassword', success: function(res){ console.log(res.data); that.setData({userPassword: res.data}); } }); }, onReady:function(){ // 頁(yè)面渲染完成 }, onShow:function(){ // 頁(yè)面顯示 }, onHide:function(){ // 頁(yè)面隱藏 }, onUnload:function(){ // 頁(yè)面關(guān)閉 } })
wx.setStorage(OBJECT)
屬性名類型必填說(shuō)明keyString是本地緩存中的指定的 keydataObject/String是需要存儲(chǔ)的內(nèi)容successFunction否接口調(diào)用成功的回調(diào)函數(shù)failFunction否接口調(diào)用失敗的回調(diào)函數(shù)completeFunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會(huì)執(zhí)行)wx.getStorage(OBJECT)
屬性名 | 類型 | 必填 | 說(shuō)明 |
---|---|---|---|
key | String | 是 | 本地緩存中的指定的 key |
success | Function | 是 | 接口調(diào)用的回調(diào)函數(shù),res = {data: key對(duì)應(yīng)的內(nèi)容} |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會(huì)執(zhí)行) |
實(shí)例四: 清除本地?cái)?shù)據(jù)
這里就不詳細(xì)寫(xiě)了,直接介紹一下這兩個(gè)清除本地?cái)?shù)據(jù)的方法。
wx.clearStorage()
wx.clearStorageSync()
直接執(zhí)行即可實(shí)現(xiàn)。
以上是“微信小程序中本地存儲(chǔ)及登錄頁(yè)面處理的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。