微信小程序开发项目教程慕课版教案 1211页.docx

1、微信小程序开发项目教程慕课版教案 1211页第6章 莫凡商城的注册、登录功能课时内容注册、登录功能实战1课时2教学目标掌握登录功能、“我的”界面列表式导航功能（2）的实现教学重点登录功能、“我的”界面列表式导航功能（2）的实现教学难点登录功能、“我的”界面列表式导航功能（2）的实现教学设计1.教学思路：通过实战实现登录功能、“我的”界面列表式导航功能（2）。2.教学手段：多媒体+计算机3.教学资料：教材、多媒体课件教学内容6.6 项目实战：任务3实现登录功能1任务目标通过实现莫凡商城的登录功能，学会登录功能要应用到的组件和API接口的使用方法，并能举一反三，实现其他类似的登录功能。莫凡商城登录

2、功能提供两种登录方式：账号密码登录和手机快捷登录。通过页签的切换，可以选择使用哪种方式进行登录，如图所示。 账号密码登录 手机快捷登录2任务实施下面我们一起来实现莫凡商城登录功能。 （1）在app.json文件里添加注册页面路径“pages/login/login”。（2）在login.json文件里配置导航标题，示例代码如下。 navigationBarTitleText: 登录（3） 在login.wxml页面文件里进行登录表单布局，需要使用view容器组件、form表单组件、swiper滑块视图容器组件和button按钮组件，示例代码如下。 账号密码登录 手机快捷登录 账号 密码 登录

3、没有账号？注册 tip 手机号 yzmvalue timevalues 验证码 登录 没有账号？注册 tip （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:5rpx solid #009966; font-

4、weight: bold;.default margin: 0 auto; 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;.ipt input text-align: left; width: 200px; c

5、olor: #000000;.placeholder-style font-size: 14px; color: #cccccc;.login margin: 0 auto; text-align: center; padding-top:10px; .login button width: 96%; color: #ffffff; background: #009966;.fp font-size: 13px; color: #3e13da; padding:5px; text-align: right; margin-right:10px; margin-top:10px; .btn po

6、sition: 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业务逻辑处理文件中，进行登录表单切换、登录表单验证，然后将登录表单提交到后台服务器中进行登录，示例代码如下。var app = getApp();var host = app.globalData.host;var timer;var ti

7、meSecond = false, sendBolen = false;Page( data: currentTab: 0, winWidth: 0, winHeight: 0, tip: , form_info: , yzmvalue: 获取验证码, mobile: , timevalue: 60, flag: true, verifyCode: , onLoad: function (options) var userId = wx.getStorageSync(userId); if (userId = ) this.checklogin(); else wx.reLaunch( url

8、: ./index/index, ) var page = this; wx.getSystemInfo( success: function (res) console.log(res); page.setData( winWidth: res.windowWidth ); page.setData( winHeight: res.windowHeight ); ) , switchNav: function (e) var that = this; if (this.data.currentTab = e.target.dataset.current) return false; else

9、 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) var that = this; var loginName = e.detail.value.loginName; var mobile = e.detail.value.mobile; var

10、loginPassword = e.detail.value.loginPassword; var verifyCode = e.detail.value.verifyCode; var loginType = that.data.currentTab; var code = app.globalData.code; /验证表单输入 var ret = that.checkLogin(loginName, mobile, loginPassword, verifyCode, loginType); if (ret) wx.request( url: host + /api/user/swxLo

11、gin, 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); var code = res.data.code; var msg = res.data.data; if (code = 0000

12、) 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(openI

13、d, res.data.data.openId); wx.setStorageSync(token, res.data.data.token); wx.reLaunch( url: ./index/index ) console.log(2) else that.setData( tip: msg ); return false ) , checkLogin: function (loginName, mobile, loginPassword, verifyCode, loginType) var that = this; if (loginType = 0) if (loginName =

14、 ) that.setData( tip: 用户名不能为空！ ); return false if (loginPassword = ) that.setData( tip: 密码不能为空！ ); return false else if (mobile = ) that.setData( tip: 手机号不能为空！ ); return false var myreg = /13, 4, 5, 7, 80-99$/; if (!myreg.test(mobile) that.setData( tip: 手机号不合法！ ); return false; if (verifyCode = ) th

15、at.setData( tip: 验证码不能为空！ ); return false that.setData( tip: ); return true , checklogin: function () /登录页面进行一次获取新的code wx.login( success: function (data) console.log(data) app.globalData.code = data.code; ) , getcode: function (e) var that = this; if (that.data.mobile = ) that.setData( tip: 请输入手机号

16、); return false; var myreg = /13, 4, 5, 7, 80-99$/; if (!myreg.test(that.data.mobile) that.setData( tip: 手机号不合法！ ); return false; that.setData( tip: );/去除提示 that.setData( flag: false );/显示时间 timer = setInterval(that.settime, 1000);/验证码倒计时 wx.request( url: host + /api/user/getVerifyCode, method: GET,

17、 data: mobile: this.data.mobile , header: Content-Type: application/json , success: function (res) console.log(res); var code = res.data.code; var msg = res.data.data; if (code = 0000) clearInterval(timer); that.setData( verifyCode: msg ); else clearInterval(timer); that.setData( yzmvalue: 获取验证码, ti

18、mevalue: 60, flag: true ); that.setData( tip: msg ); return false ) , getMobile: function (e) this.setData( mobile: e.detail.value ) , settime: function () var timevalue = this.data.timevalue; if (timevalue = 0) clearInterval(timer) this.setData( yzmvalue: 重新获取, timevalue: 60, flag: true ) timeSecon

19、d = 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接口，这些都是常用

20、的功能。6.7 项目实战：任务4实现“我的”界面列表式导航功能（2）1任务目标通过实现莫凡商城“我的”界面列表式导航功能，学会列表式导航设计的方式。很多App都会采用列表式导航设计，本任务的实现对其他类似项目的设计都有借鉴作用。莫凡商城“我的”界面包括账号登录区域、我的订单区域、列表式导航区域，如图所示。 “我的”界面2任务实施下面我们一起来实现莫凡商城“我的”界面列表式导航功能。 （1）在app.json文件里添加我的页面路径“pages/me/me”。（2）在me.wxml页面文件里进行账号区域布局设计、我的订单区域布局设计、列表式导航布局设计，示例代码如下。 nickName 我的订单 待付款 待收货 image src=/pages/images/icon/dpj.