微信小程序开发项目教程慕课版教案 1211页Word文档下载推荐.docx
《微信小程序开发项目教程慕课版教案 1211页Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《微信小程序开发项目教程慕课版教案 1211页Word文档下载推荐.docx（21页珍藏版）》请在冰豆网上搜索。
formSubmit"
bindreset="
formReset"
>
viewclass="
content"
<
loginTitle"
{{currentTab==0?
'
select'
default'
}}"
data-current="
0"
bindtap="
switchNav"
账号密码登录<
/view>
{{currentTab==1?
1"
手机快捷登录<
hr"
swipercurrent="
{{currentTab}}"
style="
height:
{{winHeight}}px"
swiper-item>
accountType"
account"
ac"
账号<
ipt"
inputname="
loginName"
focus="
false"
placeholder="
请输入用户名"
class="
placeholder-style"
value='
{{form_info}}'
/>
密码<
loginPassword"
type="
text"
请输入密码"
login"
buttonform-type="
submit"
登录<
/button>
fp"
bindtap='
toRegister'
没有账号？
注册<
tip"
{{tip}}<
/swiper-item>
mobileType"
手机号<
mobile"
仅支持中国大陆手机号"
bindinput='
getMobile'
buttonclass="
btn"
getcode"
wx:
if="
{{flag==true}}"
{{yzmvalue}}<
else>
{{timevalue}}s<
验证码<
verifyCode"
请输入验证码"
{{verifyCode}}'
/swiper>
/form>
（4）在login.wxss样式文件里对登录表单布局进行样式渲染，示例代码如下。
.loginTitle{
display:
flex;
flex-direction:
row;
width:
100%;
font-size:
15px;
.select{
color:
#009966;
50%;
text-align:
center;
height:
48px;
line-height:
border-bottom:
5rpxsolid#009966;
font-weight:
bold;
.default{
margin:
0auto;
padding:
.hr{
1px;
background-color:
#666666;
opacity:
0.2;
.account{
.ac{
15px;
.ipt{
padding-top:
10px;
.iptinput{
left;
200px;
#000000;
.placeholder-style{
14px;
#cccccc;
.login{
.loginbutton{
96%;
#ffffff;
background:
.fp{
13px;
#3e13da;
5px;
right;
margin-right:
margin-top:
.btn{
position:
absolute;
right:
10px;
top:
90px;
12px;
#f2f2f2;
.tip{
#D53E37;
（5）在login.js业务逻辑处理文件中，进行登录表单切换、登录表单验证，然后将登录表单提交到后台服务器中进行登录，示例代码如下。
varapp=getApp（）;
varhost=app.globalData.host;
vartimer;
vartimeSecond=false,sendBolen=false;
Page（{
data:
{
currentTab:
0,
winWidth:
winHeight:
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;
that.setData（{currentTab:
e.target.dataset.current}）;
that.setData（{tip:
}）;
that.setData（{form_info:
toRegister:
wx.navigateTo（{
../register/register'
formSubmit:
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（{
host+'
/api/user/swxLogin'
method:
GET'
{'
loginName'
loginName,'
mobile'
mobile,'
loginPassword'
loginPassword,'
verifyCode'
verifyCode,'
loginType'
loginType,'
code'
code},
header:
Content-Type'
application/json'
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）;
nickName'
res.data.data.user.nickName）
swx_session'
res.data.data.swx_session）;
userMobile'
res.data.data.user.mobile）;
openId'
res.data.data.openId）;
token'
res.data.data.token）;
console.log（"
2"
）
msg}）;
returnfalse
checkLogin:
function（loginName,mobile,loginPassword,verifyCode,loginType）{
if（loginType==0）{
if（loginName=="
用户名不能为空！
if（loginPassword=='
密码不能为空！
if（mobile=='
手机号不能为空！
varmyreg=/^[1][3,4,5,7,8][0-9]{9}$/;
if（!
myreg.test（mobile））{
手机号不合法！
if（verifyCode=='
验证码不能为空！
returntrue
checklogin:
function（）{//登录页面进行一次获取新的code
wx.login（{
function（data）{
console.log（data）
app.globalData.code=data.code;
getcode:
if（that.data.mobile=="
请输入手机号'
myreg.test（that.data.mobile））{
//去除提示
that.setData（{flag:
false}）;
//显示时间
timer=setInterval（that.settime,1000）;
//验证码倒计时
/api/user/getVerifyCode'
this.data.mobile
clearInterval（timer）;
that.setData（{verifyCode:
that.setData（{
true
getMobile:
this.setData（{
e.detail.value
settime:
function（）{
vartimevalue=this.data.timevalue;
if（timevalue==0）{
clearInterval（timer）
重新获取'
timeSecond=false;
sendBolen=false;
return;
timevalue--;
timeSecond=true;
sendBolen=true;
timevalue,
false
}）
登录功能是很常用的功能，我们可以通过莫凡商城项目学会登录功能的设计及实现方法，通过综合应用view容器组件、form表单组件、swiper滑块视图容器组件、button按钮组件进一步理解组件的使用；
同时，我们还应用了wx.request网络请求API、setInterval定时器API及缓存相关API接口，这些都是常用的功能。
6.7项目实战：
任务4—实现“我的”界面列表式导航功能
（2）
通过实现莫凡商城“我的”界面列表式导航功能，学会列表式导航设计的方式。
很多App都会采用列表式导航设计，本任务的实现对其他类似项目的设计都有借鉴作用。
莫凡商城“我的”界面包括账号登录区域、我的订单区域、列表式导航区域，如图所示。
“我的”界面
下面我们一起来实现莫凡商城“我的”界面列表式导航功能。
（1）在app.json文件里添加我的页面路径“pages/me/me”。
（2）在me.wxml页面文件里进行账号区域布局设计、我的订单区域布局设计、列表式导航布局设计，示例代码如下。
head"
headIcon"
imagesrc="
/pages/images/icon/head.jpg"
style="
width:
70px;
/image>
navigatorurl="
../login/login"
hover-class="
navigator-hover"
{{nickName}}<
/navigator>
detail"
text>
/text>
viewstyle="
display:
flex;
flex-direction:
row;
order"
我的订单<
detail2"
line"
nav"
nav-item"
id="
data-status='
1'
view>
/pages/images/icon/dfk.png"
28px;
25px;
待付款<
3'
/pages/images/icon/dsh.png"
36px;
27px;
待收货<
4'
/pages/images/icon/dpj.
升级会员 