[移动开发]微信开发的学费收收小程序

微信开发的学费收收小程序是访问微信自己的数据库，同时可以实现查询和支付功能，因为微信的支付功能需要商家才能实现，故本文最后没有实现支付功能，但很有借鉴意义。

界面功能、结构如下：

?

(1) 实现的代码如下：

<!--index.wxml-->

<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">  
   <block wx:for="{{haoshu}}" wx:key="haoshu" wx:for-item="item" wx:for-index="index">  
    <swiper-item>  
     <image wx:if="{{item}}" src="{{item}}"  class="slide-image" mode="aspectFill"></image>  
    </swiper-item>  
   </block>  
  </swiper>

<view class="container"> 
<view class="login-from">
 <!--姓名-->
 <view class="inputView"> 
  <image class="nameImage" src="/pages/images/name.png"></image> 
  <label class="nameLab">姓名</label> 
  <input class="inputtext" placeholder="请输入姓名" bindinput="username" /> 
 </view> 
 <view class="line"></view> 

 <!--身份证号-->
 <view class="inputView"> 
  <image class="nameImage" src="/pages/images/name.png"></image> 
  <label class="nameLab">身份证号</label> 
  <input class="inputtext" placeholder="请输入身份证号" bindinput="password" /> 
 </view> 
 
 <!--按钮-->
 <view class="ChaxunBthView"> 
  <button class="ChaxunBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="Chaxun">查询</button> 
 </view> 

</view>
</view>


//index.js  
//获取应用实例  
var app = getApp()
// 获取云数据库引用
wx.cloud.init()
const db = wx.cloud.database();
let xsname = null;//变量，用于存放用户输入的账号
let shenfenid = null;//变量，用于存放用户输入的身份证号
let XF=null;
Page({
 data: {  
  haoshu:[  
  "/pages/images/haoshu1.png",  
  "/pages/images/haoshu2.png",  
  "/pages/images/haoshu3.png",  
  ]  
 },  
 onLoad: function () {  
 }, 
  //输入用户名
  username:function(e) {
      this.data.xsname=e.detail.value//将用户输入的名字放到变量里面
  },
  //输入身份证号
  password:function(e) {
      this.data.shenfenid=e.detail.value//将用户输入的身份证号放到变量里面
  },
Chaxun(){
  db.collection("xuefei").get({
    success: (res) => {
      let xuefei= res.data;
      console.log(res.data);
      console.log('连接成功！');
        for (let i = 0; i < xuefei.length; i++) {
          if(this.data.xsname === xuefei[i].name) { 
            if (this.data.shenfenid === xuefei[i].shenfenID) {  //判断身份证号是否正确
              console.log('身份证号正确！');
              console.log("xuefei:" + xuefei[i].xuefei);
              XF=xuefei[i].xuefei;
              getApp().globalData=XF;
              wx.switchTab({
                url: '/pages/zhifu/zhifu',//这里是成功登录后跳转的页面
                success: function (res) {
                  // 通过eventChannel向被打开页面传送数据
                },
                fail:function(res){}
              })
            }else {
              wx.showToast({
                title: '身份证号错误！！',
                icon: 'none',
                duration: 2500
              })
            }
            break
          }else {
            wx.showToast({
              title: '无此姓名！！',
              icon: 'none',
              duration: 2500
            })
          }
        }
      }
    })
 }
})



/**index.wxss**/
.swiper {
 height: 400rpx;
 width: 100%;
}
.swiper image {
 height: 100%;
 width: 100%;
}

.container { 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  padding: 0; 
  box-sizing: border-box; 
  /* background-color: rgb(156, 23, 78) */
 } 

 
/*表单内容*/
.login-from { 
  margin-top: 20px; 
  flex: auto; 
  height:100%; 
}

 .inputView { 
  /* background-color: #fff;  */
  margin-top: 5px;
  line-height: 45px; 
  border-radius:20px;
   border:1px solid #999999;
 } 
  
 /*输入框*/
 .nameImage, .keyImage { 
  margin-left: 22px; 
  width: 18px; 
  height: 16px;
  margin-right:2px
 } 
  
 .nameLab { 
  margin: 15px 15px 15px 10px; 
  color: #545454; 
  font-size: 14px
 } 

 .xuefeiLab { 
  margin: 15px 15px 15px 10px; 
  color: #545454; 
  font-size: 14px
 } 
  
 .inputtext { 
  flex: auto; 
  float: right; 
  text-align: right; 
  margin-right: 22px; 
  margin-top: 11px;
  color: #cccccc; 
  font-size: 14px
 } 
 .line { 
  margin-top: 8px; 
 } 
  
 /* .line { 
  width: 100%; 
  height: 1px; 
  background-color: #cccccc; 
  margin-top: 1px; 
 }  */
  
 /*按钮*/
 .ChaxunBthView { 
  width: 100%; 
  height: auto; 
  /* background-color:#DCDCDC;  */
  margin-top: 10px; 
  margin-bottom: 10px; 
  padding-bottom: 0px; 
 } 
  
 .Chaxun { 
  width: 90%; 
  margin-top: 40px; 
  border-radius:10px;
 }

?(2)第二个界面没有实现支付功能，故此没有js文件。

<!--zhifu.wxml-->
<view class="container"> 
<view class="zhifu-from">
  <view style="display:flex;">
    <label class="xuefeiLab">学费(RMB)：</label> 
    <view>{{xuefei}}</view>
  </view>
   <!--按钮-->
 <view class="zhifuBthView"> 
  <button class="zhifuBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="Zhifu">支付</button> 
 </view> 
</view>
</view>




/**zhifu.wxss**/
.container { 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  padding: 0; 
  box-sizing: border-box; 
  /* background-color: rgb(156, 23, 78) */
 } 

 
/*表单内容*/
.zhifu-from { 
  margin-top: 20px; 
  flex: auto; 
  height:100%; 
}


 /*按钮*/
 .zhifuBthView { 
  width: 100%; 
  height: auto; 
  /* background-color:#DCDCDC;  */
  margin-top: 10px; 
  margin-bottom: 10px; 
  padding-bottom: 0px; 
 } 
  
 .Zhifu { 
  width: 90%; 
  margin-top: 40px; 
  border-radius:10px;
 }

如果各位对源代码感兴趣，可以到我的主页下载。