纯静态企业网站,百度收录快速提交,学校网站建设实训总结,查域名备案文章目录 1. 官方文档教程2. 注册实现3. 登录实现4. 关于作者其它项目视频教程介绍 1. 官方文档教程
https://developers.weixin.qq.com/miniprogram/dev/framework/路由跳转的几种方式#xff1a; https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab… 文章目录 1. 官方文档教程2. 注册实现3. 登录实现4. 关于作者其它项目视频教程介绍 1. 官方文档教程
https://developers.weixin.qq.com/miniprogram/dev/framework/路由跳转的几种方式 https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.htmlToast弹框提示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布局页面
!--pages/register/register.wxml--
navigation-bar title back{{true}} colorwhite background#ffb241/view classlogin-containerview classlogo-containerimage classlogo src../../assets/img_login_bg.png mode /
/viewview classlogin-parent-containertext classlogin-title-tips注册/textview classlogin-username-containerimage src../../assets/img_username.png mode /input placeholder请输入用户名 bindinputeventUsernameHandle //viewview classlogin-password-containerimage src../../assets/img_password.png mode /input placeholder请输入密码 passwordtrue bindinputeventPasswordHandle //viewview classlogin-btn-container button bind:taponRegisterHandle注册/button/view/view/viewnavigation-bar是微信创建项目只带的顶部导航栏直接拿过来使用即可 注意事项 自定义组件需要注册之后才能使用 所以需要在register.json文件中注册自定义组件
{usingComponents: {navigation-bar: /components/navigation-bar/navigation-bar}
}register.js 实现注册
在这里使用wx.setStorageSync来保存用户名和密码
// pages/register/register.js
Page({/*** 页面的初始数据*/data: {username: ,password: },/*** 生命周期函数--监听页面加载*/onLoad(options) {},eventUsernameHandle(options) {this.setData({username: options.detail.value})},eventPasswordHandle(options) {this.setData({password: options.detail.value})},/*** 注册*/onRegisterHandle() {if (this.data.username.trim() ) {wx.showToast({title: 请输入用户名,icon: error})return}if (this.data.password.trim() ) {wx.showToast({title: 请输入密码,icon: error})return}//保存用户名和密码wx.setStorageSync(username, this.data.username)wx.setStorageSync(password, this.data.password)wx.showToast({title: 注册成功,icon: success,success: () {setTimeout(() {wx.navigateBack()}, 1000);}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})实现效果
3. 登录实现
编写login.wxml
!--pages/login/login.wxml--
navigation-bar title back{{false}} color#ffffff background#ffb241 /view classlogin-containerview classlogo-containerimage classlogo src../../assets/img_login_bg.png mode //viewview classlogin-parent-containertext classlogin-title-tips登录/textview classlogin-username-containerimage src../../assets/img_username.png mode /input placeholder请输入用户名 bindinputeventUsernameHandle value{{username}} //viewview classlogin-password-containerimage src../../assets/img_password.png mode /input placeholder请输入密码 passwordtrue bindinputeventPasswordHandle value{{password}} //viewview classforget-pwd-containerview classforget-pwd-left-containerswitch typecheckbox checked{{checked}} bindchangecheckboxChange /text记住密码/text/viewview classforget-pwd-right-container bind:taponRegisterHandletext classtips还没有账号/texttext classregister-text注册/text/view/viewview classlogin-btn-container button bind:taponLoginHandle登录/button/view/view/viewlogin.js 实现登录
// pages/login/login.js
Page({/*** 页面的初始数据*/data: {username: ,password: ,checked: false},/*** 生命周期函数--监听页面加载*/onLoad(options) {if (wx.getStorageSync(checked)) {this.setData({username: wx.getStorageSync(username),password: wx.getStorageSync(password),})this.setData({checked:wx.getStorageSync(checked)})}},/*** 点击记住密码*/checkboxChange(event) {this.setData({checked: event.detail.value})wx.setStorageSync(checked, this.data.checked)},eventUsernameHandle(options) {this.setData({username: options.detail.value})},eventPasswordHandle(options) {this.setData({password: options.detail.value})},/*** 注册*/onLoginHandle() {if (this.data.username.trim() ) {wx.showToast({title: 请输入用户名,icon: error})return}if (this.data.password.trim() ) {wx.showToast({title: 请输入密码,icon: error})return}if (this.data.username wx.getStorageSync(username) this.data.password wx.getStorageSync(password)) {wx.showToast({title: 登录成功,icon: success,success: () {setTimeout(() {wx.navigateBack()}, 1000);}})} else {wx.showToast({title: 用户名或密码错误,icon: error,})}},/*** 注册*/onRegisterHandle() {wx.navigateTo({url: /pages/register/register,})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})运行效果 4. 关于作者其它项目视频教程介绍
本人在b站录制的一些视频教程项目免费供大家学习
Android新闻资讯app实战https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source984bb03f768809c7d33f20179343d8c8Androidstudio开发购物商城实战https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source984bb03f768809c7d33f20179343d8c8Android开发备忘录记事本实战https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source984bb03f768809c7d33f20179343d8c8spm_id_from333.788.videopod.sectionsAndroidstudio底部导航栏实现https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from333.337.search-card.all.clickvd_source984bb03f768809c7d33f20179343d8c8Android使用TabLayoutViewPager2实现左右滑动切换https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from333.337.search-card.all.clickvd_source984bb03f768809c7d33f20179343d8c8
