微信小程序?qū)崿F(xiàn)活動(dòng)報(bào)名登記功能(實(shí)例代碼)
自2020年以來，在疫情的影響下，越來越多的活動(dòng)選擇了線上進(jìn)行。各式各樣的微信小程序也出現(xiàn)在了我們生活的方方面面中。本篇將介紹使用微信小程序?qū)崿F(xiàn)發(fā)起一個(gè)活動(dòng)報(bào)名的設(shè)計(jì)，以此為基礎(chǔ)，我們可以掌握微信小程序表單的基本用法，進(jìn)而在諸如疫情信息登記、出入報(bào)備等場(chǎng)景中使用小程序進(jìn)行開發(fā)，滿足相關(guān)的需求。
01、實(shí)現(xiàn)目標(biāo)
設(shè)計(jì)如圖 1所示的頁面，實(shí)現(xiàn)輸入活動(dòng)名稱、設(shè)定活動(dòng)的開始/結(jié)束/報(bào)名截止時(shí)間、在地圖上選擇活動(dòng)地點(diǎn)、輸入活動(dòng)簡(jiǎn)介和活動(dòng)參與人數(shù)上限以及根據(jù)費(fèi)用的情況來判斷是否允許用戶上傳微信收款二維碼。注意需要對(duì)輸入的時(shí)間進(jìn)行校驗(yàn)，以及給予必要的交互提示。
▍圖1 發(fā)起新活動(dòng)
02、案例分析
本文以發(fā)起活動(dòng)報(bào)名為示例場(chǎng)景，涉及小程序表單文本組件、選擇器組件、地圖組件的使用。同時(shí)要求對(duì)輸入的數(shù)據(jù)進(jìn)行合法性校驗(yàn)，又綜合了小程序事件處理、選擇渲染等內(nèi)容。掌握此案例，可以較好地泛化學(xué)習(xí)其余表單的類似用法。
03、代碼實(shí)現(xiàn)
1. 時(shí)間合法性檢測(cè)
頁面加載時(shí)，即會(huì)默認(rèn)顯示當(dāng)前時(shí)間，以活動(dòng)開始時(shí)間為例，頁面的onLoad函數(shù)如下：
//newactivity.js
onLoad () {
this.setData({
acStartDate:util.formatDate(),
acStartTime: util.formatTime(),
acEndDate:util.formatDate(),
acEndTime: util.formatTime(),
signEndDate: util.formatDate(),
signEndTime: util.formatTime(),
});
},其中，util.formatDate()，util.formatTime()來自自定義的公共函數(shù)。主要功能是將Unix的時(shí)間戳格式化成標(biāo)準(zhǔn)的年月日時(shí)分秒的格式。
在前端以開始時(shí)間部分為例，代碼如下：
<!--newactivity.wxml-->
<view>
<view>
<text >開始時(shí)間</text>
</view>
<picker name="acStartDate" mode="date" start="2000-01-01" end="2100-12-31" value="{{acStartDate}}" bindchange="acStartDateChange">
<view >
{{acStartDate}}
</view>
</picker>
<picker name="acStartTime" mode="time" start="00:00" end="23:59" value="{{acStartTime}}" bindchange="acStartTimeChange">
<view >
{{acStartTime}}
</view>
</picker>
</view>日期和時(shí)間分別是兩個(gè)帶有默認(rèn)值的picker組件，每個(gè)picker組件還綁定了對(duì)應(yīng)的change事件，用于獲取設(shè)定的值。以acStartDateChange函數(shù)為例，函數(shù)內(nèi)容如下：
acStartDateChange:function(e){
console.log('開始日期',e.detail.value);
this.setData({
acStartDate:e.detail.value,
signEndDate:e.detail.value,
acEndDate:e.detail.value,
});
},改變開始日期的同時(shí)，也會(huì)改變活動(dòng)結(jié)束日期和報(bào)名截止日期，減少用戶調(diào)節(jié)的次數(shù)。
為了確保時(shí)間的合法性，在修改活動(dòng)結(jié)束時(shí)間以及報(bào)名截止時(shí)間時(shí)，均會(huì)在響應(yīng)change事件的函數(shù)中執(zhí)行檢測(cè)時(shí)間的函數(shù)，不合法的話，就會(huì)重設(shè)當(dāng)前值。在用戶最后點(diǎn)擊“確認(rèn)發(fā)起活動(dòng)”時(shí)，也會(huì)在form表單組件綁定響應(yīng)submit事件的函數(shù)中執(zhí)行響應(yīng)的檢測(cè)。
檢測(cè)時(shí)間的函數(shù)如下：
checkDateTime:function(){
var result = new Object();
var acStartDateTimeString = this.data.acStartDate + ' ' + this.data.acStartTime;
var acStartDateTime = new Date(acStartDateTimeString);
var acEndDateTimeString = this.data.acEndDate + ' ' + this.data.acEndTime;
var acEndDateTime = new Date(acEndDateTimeString);
var signEndDateTimeString = this.data.signEndDate + ' ' + this.data.signEndTime;
var signEndDateTime = new Date(signEndDateTimeString);
var nowDateTimeString = util.formatDate()+' '+util.formatTime();
var nowDateTime = new Date(nowDateTimeString);
if (acEndDateTime <= acStartDateTime) {
result.status = false;
result.data = "活動(dòng)的結(jié)束時(shí)間必須晚于活動(dòng)的開始時(shí)間！";
} else if (signEndDateTime > acEndDateTime) {
result.status = false;
result.data = "報(bào)名的截止時(shí)間不能晚于活動(dòng)的結(jié)束時(shí)間！"
} else if(signEndDateTime<nowDateTime){
result.status = false;
result.data = "報(bào)名的截止時(shí)間不能早于當(dāng)前時(shí)間！"
}else {
result.status = true;
}
if(!result.status){
wx.showModal({
title: '時(shí)間填寫錯(cuò)誤',
content: result.data,
showCancel:false,
confirmText:'返回修改'
})
}
console.log('判斷結(jié)果是',result);
return result;
},2. 從地圖中選點(diǎn)獲取地理位置信息
在點(diǎn)擊“地點(diǎn)”的輸入框時(shí)，小程序會(huì)調(diào)用地圖組件，根據(jù)用戶定位或者在地圖上的選點(diǎn)，獲取地理位置信息。為此，需要為input組件綁定focus事件。示例如下：
<!--newactivity.wxml-->
<view >
<text >地點(diǎn)</text>
</view>
<view >
<input bindfocus="chooseLocation" name="placeName" placeholder="點(diǎn)擊在地圖上選擇位置" type="text" value="{{placeName}}"/>
</view>在chooseLocation函數(shù)中，再調(diào)用微信的wx.chooseLocation接口，打開地圖選點(diǎn)，將獲取到的經(jīng)緯度等地理位置信息賦值給頁面的data屬性。示例如下：
//newactivity.js
chooseLocation:function(e){
var self = this;
wx.chooseLocation({
success: function(res) {
self.setData({
placeName: res.name,
longitude:res.longitude,
latitude:res.latitude
})
},
})
},3. 上傳微信收款二維碼
在頁面上輸入活動(dòng)費(fèi)用信息時(shí)，會(huì)根據(jù)當(dāng)前輸入的值的大小，判斷是否應(yīng)該出現(xiàn)上傳圖片的組件，如圖2 所示。
▍圖2 沒有費(fèi)用（左）和有費(fèi)用（右）
實(shí)現(xiàn)過程主要是通過監(jiān)聽費(fèi)用input組件的input事件，判斷輸入的值大小，依據(jù)值與0的大小關(guān)系，改變一個(gè)用來標(biāo)識(shí)上傳圖片組件顯示狀態(tài)的變量的值，來動(dòng)態(tài)顯示/隱藏上傳圖片組件。
示例如下：
<!--newactivity.wxml-->
<input name="fee" placeholder="￥/人" bindinput="showUpload" type="digit"/>
<view hidden="{{show>0? false:true}}" >
<view>
<block wx:if="{{imageSrc}}">
<image src="{{imageSrc}}" class="image" bindtap="chooseImage" mode="aspectFit"></image>
<view>點(diǎn)擊圖片可重新上傳</view>
</block>
<block wx:else>
<view bindtap="chooseImage">
<view></view>
<view></view>
</view>
<view>請(qǐng)上傳您的個(gè)人微信收款二維碼圖片</view>
</block>
</view>
</view>
//newactivity.js
showUpload:function(e){
this.setData({
show:e.detail.value
})
console.log("費(fèi)用輸入的數(shù)字是：",this.data.show);
},showUpload函數(shù)將會(huì)通過判斷輸入的值，來改變變量show的值，進(jìn)而改變前端中的hidden屬性，從而實(shí)現(xiàn)了上傳圖片組件的動(dòng)態(tài)顯示/隱藏。
在上傳圖片后，該區(qū)域需要顯示出上傳的圖片內(nèi)容，如圖3所示。
▍圖3 成功上傳圖片
該功能主要是通過綁定的tap事件函數(shù)chooseImage實(shí)現(xiàn)的。chooseImage函數(shù)還實(shí)現(xiàn)了上傳文件到服務(wù)器的功能。內(nèi)容如下：
//newactivity.js
chooseImage: function() {
var self = this
wx.chooseImage({
count: 1,
sizeType: ['original '],
sourceType: ['album'],
success: function(res) {
console.log('chooseImage success, temp path is', res.tempFilePaths[0])
var imageSrc = res.tempFilePaths[0]
wx.showLoading({
title: '正在上傳',
})
wx.uploadFile({
url: self.data.uploadFileUrl,
filePath: imageSrc,
name: 'feePic',
success: function(res) {
console.log('uploadImage success, res is:', res.data)
var obj = JSON.parse(res.data);
console.log('轉(zhuǎn)換后的json對(duì)象為：',obj);
if (obj.status == true){
wx.hideLoading();
wx.showToast({
title: '上傳成功',
icon: 'success',
duration: 1000
})
self.setData({
imageSrc,
feePicId:obj.data
})
}else{
wx.hideToast();
wx.showModal({
title: '上傳文件失敗',
content: obj.data,
})
}
},
fail: function({errMsg}) {
console.log('uploadImage fail, errMsg is', errMsg)
}
})
},
fail: function({errMsg}) {
console.log('chooseImage fail, err is', errMsg)
}
})
}
}4. 提交表單
提交表單，是通過form組件的submit事件綁定的addNewActivity函數(shù)實(shí)現(xiàn)的。在addNewActivity函數(shù)中，會(huì)通過checkLegal函數(shù)對(duì)所有表單項(xiàng)進(jìn)行合法性校驗(yàn)，并訪問設(shè)定的后端服務(wù)器鏈接，得到服務(wù)器返回的結(jié)果后，帶著活動(dòng)ID參數(shù)跳轉(zhuǎn)到分享活動(dòng)頁面。內(nèi)容如下：
//newactivity.js
addNewActivity:function(e){
var result = this.checkLegal(e);//檢查表單項(xiàng)
if(!result.status){
wx.showModal({
title: '填寫信息錯(cuò)誤',
content: result.data,
showCancel:false,
confirmText:'返回修改',
success: function (res) {
if (res.confirm) {
console.log('用戶點(diǎn)擊確定')
} else if (res.cancel) {
console.log('用戶點(diǎn)擊取消')
}
}
})
}else{
console.log(result.data);
wx.showLoading({
title: '請(qǐng)稍等',
})
qcloud.request({//小程序SDK的帶有登錄請(qǐng)求的網(wǎng)絡(luò)請(qǐng)求接口
login:true,//攜帶用戶登錄信息
url: this.data.requestUrl,//訪問服務(wù)器地址
data:result.data,
success:function(res){
if(res.data.code == 1){
wx.hideLoading();
wx.showToast({
title: '創(chuàng)建活動(dòng)成功',
icon:'success',
duration:1500
})
console.log("創(chuàng)建的活動(dòng)ID為：",res.data.id);
setTimeout(function () {
wx.redirectTo({
url: '../shareactivity/shareactivity?id=' + res.data.id,//帶新建活動(dòng)ID跳轉(zhuǎn)
})
}, 1500)
}
}
})
}
},到此這篇關(guān)于微信小程序?qū)崿F(xiàn)活動(dòng)報(bào)名登記的文章就介紹到這了,更多相關(guān)小程序活動(dòng)報(bào)名登記內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript 常用方法 ，比較不錯(cuò)大家可以參考下。2009-06-06
Javascript驗(yàn)證用戶輸入U(xiǎn)RL地址是否為空及格式是否正確
這篇文章主要介紹了Javascript驗(yàn)證用戶輸入U(xiǎn)RL地址是否為空及格式是否正確,很實(shí)用，需要的朋友可以參考下2014-10-10
這篇文章主要介紹了JavaScript組件開發(fā)的方法,結(jié)合完整實(shí)例形式分析了組件的原理與實(shí)現(xiàn)技巧,代碼包含的詳盡的注釋,便于理解,需要的朋友可以參考下2015-12-12
javascript實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
JS截取url獲取一些信息類似的文章可以在網(wǎng)上找很多，本文在重復(fù)講述一遍，有不會(huì)的朋友可以鞏固一下2014-04-04
JS+CSS實(shí)現(xiàn)網(wǎng)頁加載中的動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)網(wǎng)頁加載中的動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
使用Bootstrap美化按鈕實(shí)例代碼(demo)
這篇文章主要介紹了使用Bootstrap美化按鈕實(shí)例代碼(demo),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web開發(fā)更加快捷。本文給大家分享Bootstrap精簡(jiǎn)教程，對(duì)Bootstrap精簡(jiǎn)教程感興趣的朋友一起學(xué)習(xí)2015-11-11
如何延遲javascript代碼的加載，加快網(wǎng)頁的訪問速度，為了讓我們的網(wǎng)頁加載速度更快，本文總結(jié)了一下幾個(gè)注意點(diǎn)，感興趣的朋友可以參考下2013-10-10
這篇文章主要介紹了BootStrap 表單控件之單選按鈕水平排列的實(shí)現(xiàn)代碼，需要的朋友可以參考下2017-05-05