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