微信小步伐实现登录注册

1. 官方文档教程

• https://developers.weixin.qq.com/miniprogram/dev/framework/
  
• 路由跳转的几种方式： https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html
  
• Toast弹框提示：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
  
• 数据缓存：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html
  

2. 注册实现

• 编写register.wxml布局页面
  

1. <!--pages/register/register.wxml-->
2. <navigation-bar title="" back="{{true}}" color="white" background="#ffb241"/>
5. <view class="login-container">
7. <view class="logo-container">
8.         <image class="logo" src="../../assets/img_login_bg.png" mode="" />
9. </view>
11. <view class="login-parent-container">
12.         <text class="login-title-tips">注册</text>
13.         <view class="login-username-container">
14.                 <image src="../../assets/img_username.png" mode="" />
15.                 <input placeholder="请输入用户名" bindinput="eventUsernameHandle" />
16.         </view>
18.         <view class="login-password-container">
19.                 <image src="../../assets/img_password.png" mode="" />
20.                 <input placeholder="请输入密码" password="true" bindinput="eventPasswordHandle" />
21.         </view>
24.         <view class="login-btn-container"> <button bind:tap="onRegisterHandle">注册</button></view>
27. </view>
29. </view>

复制代码

  navigation-bar是微信创建项目只带的顶部导航栏，直接拿过来使用即可
  留意事项： 自界说组件需要注册之后才能使用， 以是需要在register.json文件中，注册自界说组件

1. {
2.   "usingComponents": {
3.     "navigation-bar": "/components/navigation-bar/navigation-bar"
4.   }
5. }

复制代码

• register.js 实现注册
  

在这里使用wx.setStorageSync来生存用户名和密码

1. // pages/register/register.js
2. Page({
4.   /**
5.    * 页面的初始数据
6.    */
7.   data: {
8.     username: "",
9.     password: ""
10.   },
12.   /**
13.    * 生命周期函数--监听页面加载
14.    */
15.   onLoad(options) {
17.   },
19.   eventUsernameHandle(options) {
20.     this.setData({
21.       username: options.detail.value
22.     })
24.   },
27.   eventPasswordHandle(options) {
28.     this.setData({
29.       password: options.detail.value
30.     })
31.   },
33.   /**
34.    * 注册
35.    */
36.   onRegisterHandle() {
37.     if (this.data.username.trim() === '') {
38.       wx.showToast({
39.         title: '请输入用户名',
40.         icon: "error"
41.       })
42.       return
43.     }
45.     if (this.data.password.trim() === '') {
46.       wx.showToast({
47.         title: '请输入密码',
48.         icon: "error"
49.       })
50.       return
51.     }
53.     //保存用户名和密码
54.     wx.setStorageSync('username', this.data.username)
55.     wx.setStorageSync('password', this.data.password)
57.     wx.showToast({
58.       title: '注册成功',
59.       icon: 'success',
60.       success: () => {
61.           setTimeout(() => {
62.             wx.navigateBack()
63.           }, 1000);
64.       }
65.     })
66.   },
68.   /**
69.    * 生命周期函数--监听页面初次渲染完成
70.    */
71.   onReady() {
73.   },
75.   /**
76.    * 生命周期函数--监听页面显示
77.    */
78.   onShow() {
80.   },
82.   /**
83.    * 生命周期函数--监听页面隐藏
84.    */
85.   onHide() {
87.   },
89.   /**
90.    * 生命周期函数--监听页面卸载
91.    */
92.   onUnload() {
94.   },
96.   /**
97.    * 页面相关事件处理函数--监听用户下拉动作
98.    */
99.   onPullDownRefresh() {
101.   },
103.   /**
104.    * 页面上拉触底事件的处理函数
105.    */
106.   onReachBottom() {
108.   },
110.   /**
111.    * 用户点击右上角分享
112.    */
113.   onShareAppMessage() {
115.   }
116. })

复制代码

• 实现效果
  
  
  
  

3. 登录实现

• 编写login.wxml
  

1. <!--pages/login/login.wxml-->
2. <navigation-bar title="" back="{{false}}" color="#ffffff" background="#ffb241" />
4. <view class="login-container">
6.         <view class="logo-container">
7.                 <image class="logo" src="../../assets/img_login_bg.png" mode="" />
8.         </view>
10.         <view class="login-parent-container">
11.                 <text class="login-title-tips">登录</text>
12.                 <view class="login-username-container">
13.                         <image src="../../assets/img_username.png" mode="" />
14.                         <input placeholder="请输入用户名"  bindinput="eventUsernameHandle" value="{{username}}" />
15.                 </view>
17.                 <view class="login-password-container">
18.                         <image src="../../assets/img_password.png" mode="" />
19.                         <input placeholder="请输入密码" password="true" bindinput="eventPasswordHandle" value="{{password}}" />
20.                 </view>
22.                 <view class="forget-pwd-container">
23.                          <view class="forget-pwd-left-container">
24.                                 <switch  type="checkbox"  checked="{{checked}}"  bindchange="checkboxChange" />
25.                                 <text>记住密码</text>
26.                          </view>
27.                         <view class="forget-pwd-right-container" bind:tap="onRegisterHandle">
28.                    <text class="tips">还没有账号？</text>
29.                          <text class="register-text">注册</text>
30.                 </view>
32.                 </view>
34.                 <view class="login-btn-container"> <button bind:tap="onLoginHandle">登录</button></view>
36.         </view>
38. </view>

复制代码

• login.js 实现登录
  

1. // pages/login/login.js
2. Page({
4.   /**
5.    * 页面的初始数据
6.    */
7.   data: {
8.     username: "",
9.     password: "",
10.     checked: false
11.   },
13.   /**
14.    * 生命周期函数--监听页面加载
15.    */
16.   onLoad(options) {
17.     if (wx.getStorageSync("checked")) {
18.       this.setData({
19.         username: wx.getStorageSync("username"),
20.         password: wx.getStorageSync("password"),
21.       })
22.       this.setData({checked:wx.getStorageSync('checked')})
23.     }
24.   },
28.   /**
29.    * 点击记住密码
30.    */
31.   checkboxChange(event) {
32.     this.setData({
33.       checked: event.detail.value
34.     })
35.     wx.setStorageSync('checked', this.data.checked)
36.   },
39.   eventUsernameHandle(options) {
40.     this.setData({
41.       username: options.detail.value
42.     })
44.   },
47.   eventPasswordHandle(options) {
48.     this.setData({
49.       password: options.detail.value
50.     })
51.   },
53.   /**
54.    * 注册
55.    */
56.   onLoginHandle() {
57.     if (this.data.username.trim() === '') {
58.       wx.showToast({
59.         title: '请输入用户名',
60.         icon: "error"
61.       })
62.       return
63.     }
65.     if (this.data.password.trim() === '') {
66.       wx.showToast({
67.         title: '请输入密码',
68.         icon: "error"
69.       })
70.       return
71.     }
74.     if (this.data.username === wx.getStorageSync("username") && this.data.password === wx.getStorageSync("password")) {
75.       wx.showToast({
76.         title: '登录成功',
77.         icon: 'success',
78.         success: () => {
79.           setTimeout(() => {
80.             wx.navigateBack()
81.           }, 1000);
82.         }
83.       })
84.     } else {
85.       wx.showToast({
86.         title: '用户名或密码错误',
87.         icon: 'error',
89.       })
90.     }
91.   },
94.   /**
95.    * 注册
96.    */
97.   onRegisterHandle() {
99.     wx.navigateTo({
100.       url: '/pages/register/register',
101.     })
102.   },
105.   /**
106.    * 生命周期函数--监听页面初次渲染完成
107.    */
108.   onReady() {
110.   },
112.   /**
113.    * 生命周期函数--监听页面显示
114.    */
115.   onShow() {
117.   },
119.   /**
120.    * 生命周期函数--监听页面隐藏
121.    */
122.   onHide() {
124.   },
126.   /**
127.    * 生命周期函数--监听页面卸载
128.    */
129.   onUnload() {
131.   },
133.   /**
134.    * 页面相关事件处理函数--监听用户下拉动作
135.    */
136.   onPullDownRefresh() {
138.   },
140.   /**
141.    * 页面上拉触底事件的处理函数
142.    */
143.   onReachBottom() {
145.   },
147.   /**
148.    * 用户点击右上角分享
149.    */
150.   onShareAppMessage() {
152.   }
153. })

复制代码

• 运行效果
  

4. 关于作者其它项目视频教程先容

本人在b站录制的一些视频教程项目，免费供大家学习

• Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
  
• Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
  
• Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
  
• Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
  
• Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。