微信小程式開發中走過的坑(二)
阿新 • • 發佈:2019-01-07
》》》遇到的坑
(3)註冊頁面的實現
需求:使用者點選註冊按鈕,進入註冊頁面,輸入註冊資訊,完成註冊動作。
動畫演示:
程式碼實現:
register.wxml
<!--註冊第一步-->
<view wx:if="{{step == 1}}" class="container">
<view class="field">
<input name="cellphone" bindinput="input_acceptVal" placeholder-class="placeholder" placeholder="輸入手機號/E-mail" />
</view>
<view class="field second_input inputCode">
<input class='identifyCode' type="number" bindinput="input_identifyCode" placeholder-class="placeholder" placeholder="輸入驗證碼" />
<view class="view_identifyCode">
<button bindtap="reqIdentifyCode" disabled ="{{identifyCode_btn}}" class="reqIdentifyCode">{{button_reqIdentifyCode}}</button>
</view>
</view>
<view class="text nextStep">如手機獲取不到驗證碼,請用E-mail註冊</view>
<view class='bottom'>
<button style="background:black;margin-top:6%;width: 80%;" type="primary" size="default" bindtap="nextStep_code">下一步</button>
</view>
<view class="text login">已經是快拍會員?</view>
<button style="background:#ff9966;margin-top:5%;width: 80%;" type="primary" size="default" bindtap="login">登入</button>
</view>
<!--註冊第二步-->
<view wx:if="{{step==2}}" class="container">
<view class="avatar">
<image src="{{avatarUrl}}" bindtap="chooseAvatar"></image>
</view>
<view class="text nextStep">溫馨提示:註冊請先上傳頭像</view>
<view class="field nickname">
<input bindchange="input_nickname" placeholder-class="placeholder" placeholder="暱稱" />
</view>
<view class="field password">
<input bindchange="input_password" placeholder-class="placeholder" placeholder="密碼" password/>
</view>
<view class="field second_input">
<input bindchange="input_rePassword" placeholder-class="placeholder" placeholder="確認密碼" password/>
</view>
<button style="background:black;margin-top:20%;width: 80%;" type="primary" size="default" bindtap="nextStep_nickname">下一步</button>
</view>
register.js(部分)
data: {
avatarUrl: '',
identifyCode_btn: true,
button_reqIdentifyCode: '獲取驗證碼'
},
onLoad: function (options) {
this.setData({
step: 1
})
},
// 輸入手機號或郵箱
input_acceptVal: function (e) {
acceptVal = e.detail.value;
if (common.checkIsNotNull(acceptVal)) {
this.setData({
acceptVal: acceptVal,
identifyCode_btn: false
})
} else {
this.setData({
identifyCode_btn: true
})
}
},
// 獲取驗證碼按鈕動作
reqIdentifyCode: function (e) {
var that = this;
var countdown = 60;
var mobile = /^(13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/;
var email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
// 校驗手機或郵箱
if (!mobile.test(acceptVal) && !email.test(acceptVal)) {
common.showTip("請填寫正確的手機號碼或郵箱", "loading", 1000);
} else {
this.setData({
button_reqIdentifyCode: '傳送中'
})
// 獲取驗證碼
wx.request({
url: app.globalData.server,
data: {
accept: this.data.acceptVal
}
},
method: "POST",
success: function (res) {
console.log(res)
// 結果不為空
if (common.checkIsNotNull(res)) {
common.showTip(res.data.msg, "loading", 1000);
if (res.data.code == 100 && countdown > 0) {
interval = setInterval(function () {
that.setData({
button_reqIdentifyCode: '重新獲取(' + countdown + 's)'
});
countdown--;
if (countdown <= 0) {
countdown = -1
that.setData({
button_reqIdentifyCode: '獲取驗證碼'
});
clearInterval(interval)
}
}, 1000)
} else {
that.setData({
button_reqIdentifyCode: '獲取驗證碼'
});
}
}
},
fail: function () {
common.showTip("請求失敗", "loading", 1000);
}
})
}
}
(4)登入功能,後臺獲取openid
需求:使用者授權,獲取使用者資訊及openid;使用者登入後,將微信體系和自身平臺體系的使用者繫結。
參考:微信小程式之使用者資料解密(七),講的很詳細,分析很到位。
補充:
①在呼叫wx.login介面時,會彈出微信自帶的授權頁面,如果使用者拒絕授權,是獲取不到微信體系的使用者資訊,程式碼實現中預設使用者已授權;
②要獲取unionId,需繫結開放平臺才行。
也可關注我的微信公眾號『TyronToCoder』,一起交流學習。