這篇文章主要介紹微信小程序如何實(shí)現(xiàn)form表單本地儲(chǔ)存數(shù)據(jù)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司主營(yíng)洛江網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件定制開發(fā),洛江h(huán)5成都小程序開發(fā)搭建,洛江網(wǎng)站營(yíng)銷推廣歡迎洛江等地區(qū)企業(yè)咨詢

微信小程序?qū)崿F(xiàn)form表單本地儲(chǔ)存數(shù)據(jù)的具體內(nèi)容如下

效果圖：

主要利用小程序的getStorage來(lái)實(shí)現(xiàn)異步本地儲(chǔ)存。

小程序目錄結(jié)構(gòu)如下：

新建項(xiàng)目前，為了簡(jiǎn)化操作可直接右鍵新建目錄，這樣建出來(lái)的文件會(huì)直接寫在app.json中，無(wú)需手動(dòng)添加。

login.wxml代碼：

<!--pages/login/login.wxml-->
<view class='container'>
 <form bindsubmit='submit'>
 <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='passWord' placeholder='請(qǐng)輸入密碼' value='{{passWord}}'/>
 </view>
 <view>
  <button form-type='submit' type='primary'>登陸</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;
}

重點(diǎn)login.js來(lái)了：

// pages/login/login.js
Page({
 
 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 userName:'',
 passWord:''
 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
 */
 onLoad: function (options) {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
 */
 onShow: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
 */
 onHide: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
 */
 onUnload: function () {
 
 },
 
 /**
 * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
 */
 onPullDownRefresh: function () {
 
 },
 
 /**
 * 頁(yè)面上拉觸底事件的處理函數(shù)
 */
 onReachBottom: function () {
 
 },
 
 /**
 * 用戶點(diǎn)擊右上角分享
 */
 onShareAppMessage: function () {
 
 }
})

點(diǎn)擊登陸時(shí)，觸發(fā)submit函數(shù)，如下：

submit:function(e){
 console.log(e.detail.value);
 //表單數(shù)據(jù)
 var objData = e.detail.value;
 if (objData.userName && objData.passWord){
  //異步方式儲(chǔ)存表單數(shù)據(jù)
  wx.setStorage({
  key: 'userName',
  data: objData.userName,
  })
  wx.setStorage({
  key: 'passWord',
  data: objData.passWord,
  })
  wx.navigateTo({
  url: '../detail/detail',
  })
 }
 
 },

儲(chǔ)存好數(shù)據(jù)后，下次再打開該頁(yè)面，先判斷是否含有數(shù)據(jù)，有就填充。

onLoad: function (options) {
 var that = this
 wx.getStorage({
  key: 'userName',
  success: function(res) {
  that.setData({ userName: res.data })
  },
 })
 wx.getStorage({
  key: 'passWord',
  success: function (res) {
  console.log(res.data)
  that.setData({ passWord: res.data })
  },
 })
 },

以上是“微信小程序如何實(shí)現(xiàn)form表單本地儲(chǔ)存數(shù)據(jù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：微信小程序如何實(shí)現(xiàn)form表單本地儲(chǔ)存數(shù)據(jù)
網(wǎng)頁(yè)鏈接：http://aaarwkj.com/article0/gihsio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、動(dòng)態(tài)網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、ChatGPT、網(wǎng)站排名、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)