微信小程序本地存储与登录页面处理实例详细讲解

why 90 2024-09-10

实例内容

 登陆界面
 处理登陆表单数据
 处理登陆表单数据（异步）
 清除本地数据
登录界面：
在

1

app.json

中添加登陆页面

1

pages/login/login

，并设置为入口。
image.png

保存后，自动生成相关文件（挺方便的）。

image.png

修改视图文件

1

login.wxml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!--pages/login/login.wxml-->

<view class="container">

  <form bindsubmit="formSubmit">

    <view class="row">

      <text>姓 名：</text>

      <input type="text" name="userName" placeholder="请输入用户名" />

    </view>

    <view class="row">

      <text>密 码：</text>

      <input type="password" name="userPassword" placeholder="请输入密码" />

    </view>

    <view class="row">

      <button type="primary" form-type="submit">登陆</button>

    </view>

 

  </form>

</view>

修改登陆样式

1

login.wxss

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

/* 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;

}

看下样式：
image.png

form相关属性：




属性名类型说明
report-submitBoolean是否返回formId用于发送模板消息
bindsubmitEventHandle携带form中的数据触发submit事件，event.detail = { value : {"name":"value"} , formId:"" }
bindresetEventHandle表单重置时会触发reset事件

这里用到了bindsubmit ，用于处理提交的表单数据。
input 相关属性





属性名类型默认值说明
valueString
输入框的内容
typeStringtextinput的类型，有效值：text,number,idcard,digit,time,date
passwordBooleanfalse是否是密码类型
placeholderString
输入框为空时占位符
placeholder-styleString
指定placeholder的样式
placeholder-classStringinput-placeholder指定placeholder的样式类
disabledBooleanfalse是否禁用
maxlengthNumber140最大输入长度，设置为0的时候不限制最大长度
auto-focusBooleanfalse自动聚焦，拉起键盘。页面中只能有一个input设置auto-focus属性
focusBooleanfalse使得input获取焦点
bindchangeEventHandle
输入框失去焦点时，触发bindchange事件，event.detail={value:value}
bindinputEventHandle
除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail={value:value}，处理函数可以直接return一个字符串，将替换输入框的内容。
bindfocusEventHandle
输入框聚焦时触发，event.detail = {value:value}
bindblurEventHandle
输入框失去焦点时触发，event.detail = {value:value}

button 相关属性





属性名类型默认值说明
sizeStringdefault有效值default, mini
typeStringdefault按钮的样式类型，有效值primary, default, warn
plainBooleanfalse按钮是否镂空，背景色透明
disabledBooleanfalse是否禁用
loadingBooleanfalse名称前是否带 loading 图标
formTypeString无有效值：submit, reset，用于form组件，点击分别会触发submit/reset事件
hover-classStringbutton-hover指定按钮按下去的样式类。当hover-class="none"时，没有点击态效果

此Demo中将button的formType设置为submit用于激活表单提交事件。
实例二: 处理登陆表单数据
修改login.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

// pages/login/login.js

Page({

 data:{

  userName:&#39;&#39;,

  userPassword:&#39;&#39;,

 },

 

 formSubmit:function(e){

  console.log(e.detail.value);//格式 Object {userName: "user", userPassword: "password"}

 

  //获得表单数据

  var objData = e.detail.value;

 

  if(objData.userName && objData.userPassword){

   // 同步方式存储表单数据

   wx.setStorageSync(&#39;userName&#39;, objData.userName);

   wx.setStorageSync(&#39;userPassword&#39;, objData.userPassword);

 

   //跳转到成功页面

   wx.navigateTo({

    url: &#39;../index/index&#39;

   })

  }

 },

 

 //加载完后，处理事件

 // 如果有本地数据，则直接显示

 onLoad:function(options){

  //获取本地数据

  var userName = wx.getStorageSync(&#39;userName&#39;);

  var userPassword = wx.getStorageSync(&#39;userPassword&#39;);

 

  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(){

  // 页面关闭

 }

})

这里使用到了wx.getStorageSync和wx.setStorageSync，这里说一下，上面这两个方法类似于HTML5的本地存储，属于同步存储方式。
这两个方法，使用很简单，列下参数：
wx.setStorageSync(KEY,DATA)





属性名类型必填说明
keyString是本地缓存中的指定的key
dataObject/String是需要存储的内容

wx.getStorageSync





属性名类型必填说明
KEYString是本地缓存中的指定的key

修改一下login.wxml

1

2

3

4

5

6

7

8

<view class="row">

      <text>姓 名：</text>

      <input type="text" name="userName" placeholder="请输入用户名" value="{{userName}}" />

    </view>

    <view class="row">

      <text>密 码：</text>

      <input type="password" name="userPassword" placeholder="请输入密码" value="{{userPassword}}" />

    </view>

这个小实例，会在登陆的时候，将登陆信息存到本地存储，当下次登陆时，如果本地存储中有相应信息，则直接填写上。
效果（再一次运行后，自动填写上了信息）：

微信小程序 本地存储及登录页面处理实例详解
实例三: 处理登陆表单数据（异步）
这里采用异步的方式存放数据。
修改一下

1

login.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

// pages/login/login.js

Page({

 data:{

  userName:&#39;&#39;,

  userPassword:&#39;&#39;,

 },

 

 formSubmit:function(e){

  console.log(e.detail.value);//格式 Object {userName: "user", userPassword: "password"}

 

  //获得表单数据

  var objData = e.detail.value;

 

  if(objData.userName && objData.userPassword){

   // 同步方式存储表单数据

   wx.setStorage({

    key:&#39;userName&#39;,

    data:objData.userName

   });

   wx.setStorage({

    key:&#39;userPassword&#39;,

    data:objData.userPassword

   });

 

   //跳转到成功页面

   wx.navigateTo({

    url: &#39;../index/index&#39;

   })

  }

 },

 

 //加载完后，处理事件

 // 如果有本地数据，则直接显示

 onLoad:function(options){

  var that = this;

  //获取本地数据

  wx.getStorage({

   key: &#39;userName&#39;,

   success: function(res){

    console.log(res.data);

    that.setData({userName: res.data});

   }

  });

  wx.getStorage({

   key: &#39;userPassword&#39;,

   success: function(res){

    console.log(res.data);

    that.setData({userPassword: res.data});

   }

  });

 },

 onReady:function(){

  // 页面渲染完成

 },

 onShow:function(){

  // 页面显示

 },

 onHide:function(){

  // 页面隐藏

 },

 onUnload:function(){

  // 页面关闭

 }

})

wx.setStorage(OBJECT)




属性名类型必填说明keyString是本地缓存中的指定的 keydataObject/String是需要存储的内容successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）wx.getStorage(OBJECT)





属性名类型必填说明
keyString是本地缓存中的指定的 key
successFunction是接口调用的回调函数,res = {data: key对应的内容}
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

实例四: 清除本地数据
这里就不详细写了，直接介绍一下这两个清除本地数据的方法。

1

wx.clearStorage()

1

wx.clearStorageSync()

直接执行即可实现。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 实例 小程序 数据
上一篇:PHP 对接微信公众平台消息接口开发流程实例详解
下一篇:微信小程序页面间跳转监听事件详解及方法说明
相关文章

 发表评论

暂时没有评论，来抢沙发吧~