微信小程序开发项目教程慕课版教案 1211页.docx
- 文档编号:6916691
- 上传时间:2023-01-12
- 格式:DOCX
- 页数:21
- 大小:73.69KB
微信小程序开发项目教程慕课版教案 1211页.docx
《微信小程序开发项目教程慕课版教案 1211页.docx》由会员分享,可在线阅读,更多相关《微信小程序开发项目教程慕课版教案 1211页.docx(21页珍藏版)》请在冰豆网上搜索。
微信小程序开发项目教程慕课版教案1211页
第6章莫凡商城的注册、登录功能
课时内容
注册、登录功能实战1
课时
2
教学目标
掌握登录功能、“我的”界面列表式导航功能
(2)的实现
教学重点
登录功能、“我的”界面列表式导航功能
(2)的实现
教学难点
登录功能、“我的”界面列表式导航功能
(2)的实现
教学设计
1.教学思路:
通过实战实现登录功能、“我的”界面列表式导航功能
(2)。
2.教学手段:
多媒体+计算机
3.教学资料:
教材、多媒体课件
教学内容
6.6项目实战:
任务3—实现登录功能
1.任务目标
通过实现莫凡商城的登录功能,学会登录功能要应用到的组件和API接口的使用方法,并能举一反三,实现其他类似的登录功能。
莫凡商城登录功能提供两种登录方式:
账号密码登录和手机快捷登录。
通过页签的切换,可以选择使用哪种方式进行登录,如图所示。
账号密码登录手机快捷登录
2.任务实施
下面我们一起来实现莫凡商城登录功能。
(1)在app.json文件里添加注册页面路径“pages/login/login”。
(2)在login.json文件里配置导航标题,示例代码如下。
{
"navigationBarTitleText":
"登录"
}
(3)在login.wxml页面文件里进行登录表单布局,需要使用view容器组件、form表单组件、swiper滑块视图容器组件和button按钮组件,示例代码如下。
'select': 'default'}}"data-current="0"bindtap="switchNav">账号密码登录 'select': 'default'}}"data-current="1"bindtap="switchNav">手机快捷登录 {{winHeight}}px"> 注册 if="{{flag==true}}">{{yzmvalue}} else>{{timevalue}}s 注册 (4)在login.wxss样式文件里对登录表单布局进行样式渲染,示例代码如下。 .loginTitle{ display: flex; flex-direction: row; width: 100%; font-size: 15px; } .select{ color: #009966; width: 50%; text-align: center; height: 48px; line-height: 48px; border-bottom: 5rpxsolid#009966; font-weight: bold; } .default{ margin: 0auto; padding: 15px; } .hr{ height: 1px; width: 100%; background-color: #666666; opacity: 0.2; } .account{ display: flex; flex-direction: row; } .ac{ padding: 15px; font-size: 15px; font-weight: bold; color: #666666; } .ipt{ padding-top: 10px; } .iptinput{ text-align: left; width: 200px; color: #000000; } .placeholder-style{ font-size: 14px; color: #cccccc; } .login{ margin: 0auto; text-align: center; padding-top: 10px; } .loginbutton{ width: 96%; color: #ffffff; background: #009966; } .fp{ font-size: 13px; color: #3e13da; padding: 5px; text-align: right; margin-right: 10px; margin-top: 10px; } .btn{ position: absolute; right: 10px; top: 10px; width: 90px; font-size: 12px; color: #666666; background-color: #f2f2f2; } .tip{ margin-top: 10px; font-size: 12px; color: #D53E37; } (5)在login.js业务逻辑处理文件中,进行登录表单切换、登录表单验证,然后将登录表单提交到后台服务器中进行登录,示例代码如下。 varapp=getApp(); varhost=app.globalData.host; vartimer; vartimeSecond=false,sendBolen=false; Page({ data: { currentTab: 0, winWidth: 0, winHeight: 0, tip: '', form_info: '', yzmvalue: '获取验证码', mobile: '', timevalue: 60, flag: true, verifyCode: '' }, onLoad: function(options){ varuserId=wx.getStorageSync("userId"); if(userId==""){ this.checklogin(); }else{ wx.reLaunch({ url: '../index/index', }) } varpage=this; wx.getSystemInfo({ success: function(res){ console.log(res); page.setData({winWidth: res.windowWidth}); page.setData({winHeight: res.windowHeight}); } }) }, switchNav: function(e){ varthat=this; if(this.data.currentTab==e.target.dataset.current){ returnfalse; }else{ that.setData({currentTab: e.target.dataset.current}); that.setData({tip: ''}); that.setData({form_info: ''}); } }, toRegister: function(e){ wx.navigateTo({ url: '../register/register' }) }, formSubmit: function(e){ varthat=this; varloginName=e.detail.value.loginName; varmobile=e.detail.value.mobile; varloginPassword=e.detail.value.loginPassword; varverifyCode=e.detail.value.verifyCode; varloginType=that.data.currentTab; varcode=app.globalData.code; //验证表单输入 varret=that.checkLogin(loginName,mobile,loginPassword,verifyCode,loginType); if(ret){ wx.request({ url: host+'/api/user/swxLogin', method: 'GET', data: {'loginName': loginName,'mobile': mobile,'loginPassword': loginPassword,'verifyCode': verifyCode,'loginType': loginType,'code': code}, header: { 'Content-Type': 'application/json' }, success: function(res){ console.log(res); varcode=res.data.code; varmsg=res.data.data; if(code=='0000'){ app.globalData.userId=res.data.data.user.userId; wx.setStorageSync('userId',res.data.data.user.id); wx.setStorageSync('nickName',res.data.data.user.nickName) wx.setStorageSync('swx_session',res.data.data.swx_session); wx.setStorageSync('userMobile',res.data.data.user.mobile); wx.setStorageSync('openId',res.data.data.openId); wx.setStorageSync('token',res.data.data.token); wx.reLaunch({ url: '../index/index' }) console.log("2") }else{ that.setData({tip: msg}); returnfalse } } }) } }, checkLogin: function(loginName,mobile,loginPassword,verifyCode,loginType){ varthat=this; if(loginType==0){ if(loginName==""){ that.setData({tip: '用户名不能为空! '}); returnfalse } if(loginPassword==''){ that.setData({tip: '密码不能为空! '}); returnfalse } }else{ if(mobile==''){ that.setData({tip: '手机号不能为空! '}); returnfalse } varmyreg=/^[1][3,4,5,7,8][0-9]{9}$/; if(! myreg.test(mobile)){ that.setData({tip: '手机号不合法! '}); returnfalse; } if(verifyCode==''){ that.setData({tip: '验证码不能为空! '}); returnfalse } } that.setData({tip: ''}); returntrue }, checklogin: function(){//登录页面进行一次获取新的code wx.login({ success: function(data){ console.log(data) app.globalData.code=data.code; } }) }, getcode: function(e){ varthat=this; if(that.data.mobile==""){ that.setData({tip: '请输入手机号'}); returnfalse; } varmyreg=/^[1][3,4,5,7,8][0-9]{9}$/; if(! myreg.test(that.data.mobile)){ that.setData({tip: '手机号不合法! '}); returnfalse; } that.setData({tip: ''});//去除提示 that.setData({flag: false});//显示时间 timer=setInterval(that.settime,1000);//验证码倒计时 wx.request({ url: host+'/api/user/getVerifyCode', method: 'GET', data: { 'mobile': this.data.mobile }, header: { 'Content-Type': 'application/json' }, success: function(res){ console.log(res); varcode=res.data.code; varmsg=res.data.data; if(code=='0000'){ clearInterval(timer); that.setData({verifyCode: msg}); }else{ clearInterval(timer); that.setData({ yzmvalue: '获取验证码', timevalue: 60, flag: true }); that.setData({tip: msg}); returnfalse } } }) }, getMobile: function(e){ this.setData({ mobile: e.detail.value }) }, settime: function(){ vartimevalue=this.data.timevalue; if(timevalue==0){ clearInterval(timer) this.setData({ yzmvalue: '重新获取', timevalue: 60, flag: true }) timeSecond=false; sendBolen=false; return; } timevalue--; timeSecond=true; sendBolen=true; this.setData({ timevalue: timevalue, flag: false }) }, }) 登录功能是很常用的功能,我们可以通过莫凡商城项目学会登录功能的设计及实现方法,通过综合应用view容器组件、form表单组件、swiper滑块视图容器组件、button按钮组件进一步理解组件的使用;同时,我们还应用了wx.request网络请求API、setInterval定时器API及缓存相关API接口,这些都是常用的功能。 6.7项目实战: 任务4—实现“我的”界面列表式导航功能 (2) 1.任务目标 通过实现莫凡商城“我的”界面列表式导航功能,学会列表式导航设计的方式。 很多App都会采用列表式导航设计,本任务的实现对其他类似项目的设计都有借鉴作用。 莫凡商城“我的”界面包括账号登录区域、我的订单区域、列表式导航区域,如图所示。 “我的”界面 2.任务实施 下面我们一起来实现莫凡商城“我的”界面列表式导航功能。 (1)在app.json文件里添加我的页面路径“pages/me/me”。 (2)在me.wxml页面文件里进行账号区域布局设计、我的订单区域布局设计、列表式导航布局设计,示例代码如下。 70px;height: 70px;"> flex;flex-direction: row;"> 28px;height: 25px;"> 36px;height: 27px;">
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 微信小程序开发项目教程慕课版教案 1211页 微信小 程序 开发 项目 教程 慕课版 教案 1211