?自2020年以來，在疫情的影響下，越來越多的活動選擇了線上進行。各式各樣的微信小程序也出現在了我們生活的方方面面中。本篇將介紹使用微信小程序實現發起一個活動報名的設計，以此為基礎，我們可以掌握微信小程序表單的基本用法，進而在諸如疫情信息登記、出入報備等場景中使用小程序進行開發，滿足相關的需求。

01、實現目標

設計如圖 1所示的頁面，實現輸入活動名稱、設定活動的開始/結束/報名截止時間、在地圖上選擇活動地點、輸入活動簡介和活動參與人數上限以及根據費用的情況來判斷是否允許用戶上傳微信收款二維碼。注意需要對輸入的時間進行校驗，以及給予必要的交互提示。

▍圖1 發起新活動

02、案例分析

本文以發起活動報名為示例場景，涉及小程序表單文本組件、選擇器組件、地圖組件的使用。同時要求對輸入的數據進行合法性校驗，又綜合了小程序事件處理、選擇渲染等內容。掌握此案例，可以較好地泛化學習其余表單的類似用法。

03、代碼實現

1. 時間合法性檢測

頁面加載時，即會默認顯示當前時間，以活動開始時間為例，頁面的onLoad函數如下：

//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()來自自定義的公共函數。主要功能是將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函數為例，函數內容如下：

acStartDateChange:function(e){console.log('開始日期',e.detail.value);this.setData({acStartDate:e.detail.value,signEndDate:e.detail.value,acEndDate:e.detail.value,}); },

改變開始日期的同時，也會改變活動結束日期和報名截止日期，減少用戶調節的次數。

為了確保時間的合法性，在修改活動結束時間以及報名截止時間時，均會在響應change事件的函數中執行檢測時間的函數，不合法的話，就會重設當前值。在用戶最后點擊“確認發起活動”時，也會在form表單組件綁定響應submit事件的函數中執行響應的檢測。

檢測時間的函數如下：

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. 從地圖中選點獲取地理位置信息

在點擊“地點”的輸入框時，小程序會調用地圖組件，根據用戶定位或者在地圖上的選點，獲取地理位置信息。為此，需要為input組件綁定focus事件。示例如下：

<!--newactivity.wxml--> <view ><text >地點</text> </view> <view ><input bindfocus="chooseLocation" name="placeName" placeholder="點擊在地圖上選擇位置" type="text" value="{{placeName}}"/> </view>

在chooseLocation函數中，再調用微信的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. 上傳微信收款二維碼

在頁面上輸入活動費用信息時，會根據當前輸入的值的大小，判斷是否應該出現上傳圖片的組件，如圖2 所示。

?

▍圖2 沒有費用（左）和有費用（右）

實現過程主要是通過監聽費用input組件的input事件，判斷輸入的值大小，依據值與0的大小關系，改變一個用來標識上傳圖片組件顯示狀態的變量的值，來動態顯示/隱藏上傳圖片組件。

示例如下：

<!--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("費用輸入的數字是：",this.data.show); },

showUpload函數將會通過判斷輸入的值，來改變變量show的值，進而改變前端中的hidden屬性，從而實現了上傳圖片組件的動態顯示/隱藏。

在上傳圖片后，該區域需要顯示出上傳的圖片內容，如圖3所示。

▍圖3 成功上傳圖片

該功能主要是通過綁定的tap事件函數chooseImage實現的。chooseImage函數還實現了上傳文件到服務器的功能。內容如下：

//newactivity.js chooseImage: function() {var self = thiswx.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函數實現的。在addNewActivity函數中，會通過checkLegal函數對所有表單項進行合法性校驗，并訪問設定的后端服務器鏈接，得到服務器返回的結果后，帶著活動ID參數跳轉到分享活動頁面。內容如下：

//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:?'創建活動成功',icon:'success',duration:1500})console.log("創建的活動ID為：",res.data.id);setTimeout(function?()?{wx.redirectTo({url:?'../shareactivity/shareactivity?id='?+?res.data.id,//帶新建活動ID跳轉})},?1500)}}})} },

?

?

總結

以上是生活随笔為你收集整理的微信小程序 | 实现活动报名登记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。