这是我业余时间采用微信小程序开发的停车场收费管理系统，使用了微信小程序+后台管理系统的设计架构，小程序使用的是微信原生组件和Vant Weapp组件库，平常工作上使用微信小程序的技术点比较少，所以业余通过开发停车场收费管理系统来加强自己的学习能力，微信小程序系统已经开发完成，趁现在有时间就以博客的形式记录我的开发过程，下面介绍下微信小程序停车场收费管理系统首页开发开发的过程。
微信小程序停车场收费管理首页WXML代码如下：
<!-- 顶部下拉选项 -->
<view>
<picker mode="selector" bindchange="bindPickerChange" range="{{parkingArray}}" range-key="{{'p_name'}}"
value="{{index}}">
<view>
{{parkingArray[index].p_name}}
<mp-icon type="field" icon="done" color="rgb(0, 0, 0)" size="{{21}}"></mp-icon>
<!-- <mp-icon type="field" icon="more" color="black" size="{{23}}"sty></mp-icon> -->
</view>
</picker>
</view>
<!-- 滑块视图容器 -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" width="355" height="150" />
</swiper-item>
</block>
</swiper>
<!-- 车牌号码输入框 -->
<view>
<view>请输入车牌号码
</view>
<!-- 车牌号头两位 -->
<view>
<!-- <view bindtap='openKeyboard'>
<view class="carNumber-items-province carNumber-items-box-list">{{carnum[0] || ''}}</view>
<view class="carNumber-items-En carNumber-items-box-list">{{carnum[1] || ''}}</view>
</view> -->
<view bindtap='openKeyboard'>{{carnum[0] || ''}}</view>
<view bindtap='openKeyboard'>{{carnum[1] || ''}}</view>
<!-- 车牌号后五位 -->
<view bindtap='openKeyboard'>{{carnum[2] || ''}}</view>
<view bindtap='openKeyboard'>{{carnum[3] || ''}}</view>
<view bindtap='openKeyboard'>{{carnum[4] || ''}}</view>
<view bindtap='openKeyboard'>{{carnum[5] || ''}}</view>
<view bindtap='openKeyboard'>{{carnum[6] || ''}}</view>
<!-- 新能源 -->
<view class="carNumber-item {{showNewPower ? '': 'carNumber-item-newpower'}}">
<view wx:if="{{!showNewPower}}">
<view>新能源</view>
</view>
<view wx:if="{{showNewPower}}">{{carnum[7] || ''}}</view>
</view>
</view>
</view>
<!-- 确认提交车牌 -->
<view>
<van-button type="info" icon="add-o" color="#8B4C39" bindtap="showPowerBtn">
<view wx:if="{{!showNewPower}}">{{carType[0]}}</view>
<view wx:else>{{carType[1]}}</view>
</van-button>
<van-button type="primary" bindtap="submitNumber">查询</van-button>
<mp-dialog title="提示" show="{{showOneButtonDialog}}" bindbuttontap="tapDialogButton" buttons="{{oneButton}}">
<view>查询失败，请重新输入</view>
</mp-dialog>
</view>
<!-- 扫码缴费 -->
<view>
<button form-type="submit" disabled="{{false}}" bindtap='saoma' style="width:80%">
扫码缴费
</button>
</view>
<!-- 虚拟键盘 -->
<view hidden='{{!KeyboardState}}'>
<view>
<view bindtap='closeKeyboard'>关闭</view>
</view>
<!-- 省份简写键盘 -->
<view hidden="{{carnum[0]}}">
<view wx:for="{{provinces}}" wx:key="{{index}}">
<view wx:for="{{item}}" wx:key="{{index}}" data-val="{{itemlist}}" wx:for-item="itemlist"
bindtap='bindChoose'>{{itemlist}}</view>
</view>
<view bindtap='bindDelChoose'>
<text class="font_family icon-shanchu keyboard-del-font">清除</text>
</view>
</view>
<!-- 车牌号码选择键盘 -->
<view class="keyboard-item iscarnumber" hidden="{{!carnum[0]}}">
<view wx:for="{{numbers}}" wx:key="{{index}}">
<view wx:for="{{item}}" wx:key="{{index}}" data-val="{{itemlist}}" wx:for-item="itemlist"
bindtap='bindChoose'>{{itemlist}}</view>
</view>
<view bindtap='bindDelChoose'>
<text class="font_family icon-shanchu keyboard-del-font">清除</text>
</view>
</view>
</view>
<van-toast id="van-toast" />微信小程序停车场收费管理首页JS代码如下：
Page({
/**
* 页面的初始数据
*/
data: {
parkingArray: [],
parkName: '路边停车场',
index: 0,
imgUrls: [
'/images/parking1.jpg',
'/images/parking2.jpg',
'/images/parking3.jpg'
],
// 滑块视图：indicatorDots显示小圆点，autoplay自动播放，interval自动切换时间间隔，duration滑动动画时长
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
// 省份输入
provinces: [
['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
['桂', '琼', '渝', '川', '贵', '云', '藏'],
['陕', '甘', '青', '宁', '新'],
],
// 车牌输入
numbers: [
["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
["A", "S", "D", "F", "G", "H", "J", "K", "L", "港"],
["Z", "X", "C", "V", "B", "N", "M", "澳"]
],
carnum: [],
carNum: '',
carType: ['切换新能源汽车', '切换普通汽车'],
showNewPower: false,
KeyboardState: false,
showOneButtonDialog: false,
oneButton: [{
text: '确定'
}]
},
// 停车场选项列表
bindPickerChange: function (e) {
// console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value,
parkName: this.data.parkingArray[e.detail.value].p_name
})
},
// 扫码功能
saoma() {
// 允许从相机和相册扫码
wx.scanCode({
success(res) {
console.log(res)
}
})
},
// 打开虚拟键盘
openKeyboard() {
this.setData({
KeyboardState: true
})
},
// 关闭虚拟键盘
closeKeyboard() {
this.setData({
KeyboardState: false
})
},
// 绑定输入号码
bindChoose(e) {
if (!this.data.carnum[6] || this.data.showNewPower) {
var arr = [];
arr[0] = e.target.dataset.val;
this.data.carnum = this.data.carnum.concat(arr)
this.setData({
carnum: this.data.carnum
})
}
},
// 清除按钮
bindDelChoose() {
if (this.data.carnum.length != 0) {
this.data.carnum.splice(this.data.carnum.length - 1, 1);
this.setData({
carnum: this.data.carnum
})
}
}
)微信小程序停车场收费管理首页WXSS代码如下：
page{
/* background-color: rgb(172, 218, 236); */
opacity: 0.75;
background: -webkit-linear-gradient(top, #330033 0%,#CCCCCC 100%);
background: -o-linear-gradient(top, #330033 0%,#CCCCCC 100%);
background: -ms-linear-gradient(top, #330033 0%,#CCCCCC 100%);
/* background: linear-gradient(to bottom, #0099ffde 0%,#68d3db 100%); */
background: linear-gradient(to bottom, #e8e9d7de 0%,#f0efa8 100%);
}
/* .page{
background: #fff;
position: absolute;
top:0;
bottom:0;
width: 100%;
} */
/* 顶部下拉选项 */
.picker_items {
display: flex;
justify-content: center;
height: 80rpx;
align-items: center;
font-size: 105%;
font-weight: bolder;
font-family: "宋体";
color: rgb(0, 0, 0);
}
/* icon图标 */
.icon_done {
display: block;
box-sizing: border-box;
width: 45rpx;
height: 65rpx;
}
.icon_more {
display: block;
width: 60rpx;
height: 90rpx;
}
/* 滑块视图容器 */
swiper {
width: 700rpx;
height: 300rpx;
margin: 0 auto;
padding-top: 24rpx;
}
/* 滑块视图容器-图片 */
.slide-image {
display: block;
width: 100%;
height: 100%;
border-radius: 18rpx;
}
/* 车牌号标题 */
.carNumber_title {
margin-top: 10px;
margin-bottom: 10px;
color: rgb(44, 3, 110);
font-size: 17px;
display: flex;
justify-content: center;
}
/* 车牌号码 */
.carNumber-items {
text-align: center;
border-radius: 25%;
}
/* 数字键盘-省份列表 */
.carNumber-items-box {
width: 158rpx;
height: 90rpx;
border: 2rpx solid #CCCCCC;
border-radius: 4rpx;
display: inline-block;
vertical-align: middle;
position: relative;
margin-right: 30rpx;
}
.carNumber-items-province {
border-right: 1rpx solid #ccc;
}
.carNumber-items-box-list {
width: 76rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
display: inline-block;
font-size: 18px;
margin: 10rpx 0;
vertical-align: middle;
}
/* 虚拟键盘-新能源 */
.carNumber-items-box::after {
content: "";
width: 6rpx;
height: 6rpx;
position: absolute;
right: -22rpx;
top: 40rpx;
border-radius: 50%;
background-color: #ccc;
}
/* 虚拟键盘-车牌号后五位 */
.carNumber-item {
width: 76rpx;
height: 90rpx;
font-size: 18px;
text-align: center;
border: 2rpx solid #CCCCCC;
border-radius: 20rpx;
line-height: 90rpx;
display: inline-block;
margin: 0 4rpx;
vertical-align: middle;
}具体实现细节，大家可以扫下面小程序二维码自己下载学习，第一次分享，不喜勿喷！！
祝生活愉快！
「一个免费分享计算机毕业设计资源的网站」
下载资源
1
QQ小程序
微信小程序
微信&QQ扫码免费下载毕业设计资源
QQ小程序
微信小程序
共有 0 条评论 - 微信小程序停车场收费管理系统+后台管理系统（首页开发）