微信小程序 本地存儲(chǔ)及登錄頁面處理實(shí)例詳解
更新時(shí)間：2017年01月11日 15:27:28 投稿：lqh
這篇文章主要介紹了微信小程序 本地存儲(chǔ)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
實(shí)例內(nèi)容
- 登陸界面
- 處理登陸表單數(shù)據(jù)
- 處理登陸表單數(shù)據(jù)（異步）
- 清除本地?cái)?shù)據(jù)
登錄界面：
在app.json中添加登陸頁面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)屬性：
| 屬性名 | 類型 | 說明 |
|---|---|---|
| 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)值 | 說明 |
|---|---|---|---|
| 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 | 最大輸入長度，設(shè)置為0的時(shí)候不限制最大長度 |
| auto-focus | Boolean | false | 自動(dòng)聚焦，拉起鍵盤。頁面中只能有一個(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)鍵盤輸入時(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} |
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| 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 | 無 | 有效值：submit, reset，用于form組件，點(diǎn)擊分別會(huì)觸發(fā)submit/reset事件 |
| hover-class | String | button-hover | 指定按鈕按下去的樣式類。當(dāng)hover-class="none"時(shí)，沒有點(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)到成功頁面
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(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
}
})
這里使用到了wx.getStorageSync和wx.setStorageSync，這里說一下，上面這兩個(gè)方法類似于HTML5的本地存儲(chǔ)，屬于同步存儲(chǔ)方式。
這兩個(gè)方法，使用很簡單，列下參數(shù)：
wx.setStorageSync(KEY,DATA)
| 屬性名 | 類型 | 必填 | 說明 |
|---|---|---|---|
| key | String | 是 | 本地緩存中的指定的key |
| data | Object/String | 是 | 需要存儲(chǔ)的內(nèi)容 |
wx.getStorageSync
| 屬性名 | 類型 | 必填 | 說明 |
|---|---|---|---|
| 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)信息，則直接填寫上。
效果（再一次運(yùn)行后，自動(dòng)填寫上了信息）：
實(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)到成功頁面
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(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
}
})
wx.setStorage(OBJECT)
| 屬性名 | 類型 | 必填 | 說明 |
|---|---|---|---|
| key | String | 是 | 本地緩存中的指定的 key |
| data | Object/String | 是 | 需要存儲(chǔ)的內(nèi)容 |
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
wx.getStorage(OBJECT)
| 屬性名 | 類型 | 必填 | 說明 |
|---|---|---|---|
| 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ì)寫了，直接介紹一下這兩個(gè)清除本地?cái)?shù)據(jù)的方法。
wx.clearStorage()
wx.clearStorageSync()
直接執(zhí)行即可實(shí)現(xiàn)。
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
JavaScript實(shí)現(xiàn)隊(duì)列結(jié)構(gòu)過程
這篇文章主要介紹了JavaScript實(shí)現(xiàn)隊(duì)列結(jié)構(gòu)的過程,隊(duì)列即Queue，它是受限的線性表，先進(jìn)先出，受限之處在于它只允許在表的前端進(jìn)行刪除操作，下面我們一起進(jìn)入文章學(xué)習(xí)更加詳細(xì)內(nèi)容,需要的朋友也可以參考一下2021-12-12
Javascript繼承(上)——對(duì)象構(gòu)建介紹
Javascript中除了基本數(shù)據(jù)（Undefined、Null、Boolean、Number、String），其他都是對(duì)象（Object）2012-11-11
微信小程序 input輸入及動(dòng)態(tài)設(shè)置按鈕的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 input輸入及動(dòng)態(tài)設(shè)置按鈕的實(shí)現(xiàn)的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了微信小程序 開發(fā)之全局配置的相關(guān)資料,需要的朋友可以參考下2017-05-05
JavaScript 運(yùn)行機(jī)制詳解再淺談Event Loop
這篇文章主要介紹了JavaScript 運(yùn)行機(jī)制詳解及淺談了Event Loop，感興趣的小伙伴可以和小編一起閱讀下面文章的具體內(nèi)容2021-09-09
JavaScript是一門腳本語言，不同于Python的是，它是一門瀏覽器腳本語言，而Python則是服務(wù)器腳本語言，我們不光要會(huì)Python，還要會(huì)JavaScript，因?yàn)樗鼘?duì)做網(wǎng)頁方面是有很大作用的。本篇內(nèi)容小編就來詳細(xì)解說JavaScript常用的對(duì)象,需要的朋友可以參考一下2021-10-10
一說到JavaScript的數(shù)組，大家基本都能馬上想起pop()、push()、shift()、unshift()、indexof()等等，今天小編就給大家分享幾個(gè)開發(fā)中常用的js數(shù)組方法即他們的用法。需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
lodash內(nèi)部方法getFuncName及setToString剖析詳解
本篇章我們主要是通過了解lodash里的兩個(gè)內(nèi)部方法getFuncName方法和setToString方法，在實(shí)際開發(fā)中我們也可以借鑒方法的實(shí)現(xiàn)思路，在需要的時(shí)候簡單封裝一下，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了 微信小程序（二十）slider組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了基于JavaScript阻止事件冒泡,事件冒泡?開始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到到?DOM?最頂層節(jié)點(diǎn)。更多詳細(xì)內(nèi)容請(qǐng)需要的小伙伴參考下面文章的具體內(nèi)容希望對(duì)你有所幫助2021-12-12