微信小程序云开发成绩查询小程序的制作过程。

微信小程序云开发成绩查询小程序的制作过程。

如果觉得我讲的好可以点个关注。
明确自己的目的，到底要做一个怎么样的小程序。
我先上效果图：



确定后就可以开始自己布局。主要是用css

1.先看首页，首页主要是由一个公告栏，和一个表单填写栏组成。

效果为输入框输入时提示的文字要缩小，动态效果。第二个输入框要加输入弹起的效果这样可以在
手机端看到自己输入的内容，公告可以改变链接数据库，更新方式数据库可以操作。
两个按钮可以在那查询最新的成绩。也可以看到自己的以前成绩。
当然如果要功能强大一些就可以加入查看图片的功能，查看试卷详情。

<view class="look">
    <label>公告:</label>
    <view class="information onshow">{{tells}}</view>
</view>
<view class="box">
    <view class="title">考试评估测试成绩查询</view>
    <view class="black">
        <label style="font-size:{{fontsize1}};"><text class="label">*</text>姓名：</label>
        <input type="text" bindfocus="focus" bindblur="blur" data-id="1" placeholder="请输入姓名" cursor-spacing='5' maxlength="4" adjust-position="true" bindinput="name"/>
        <label style="font-size:{{fontsize2}};"><text class="label">*</text>学号：</label>
        <input type="text" bindfocus="focus" bindblur="blur" data-id="2" placeholder="请输入学号" cursor-spacing='5' adjust-position="true" maxlength="6" bindinput="number"/>
        <button type="primary" size="mini" bindtap="logs">查询成绩</button>
        <button type="primary" size="mini" bindtap="index">查询以往成绩</button>
    </view>
</view>

以上为结构布局。其实这样的布局还是挺简单的。主要注意第二个input的：**cursor-spacing=‘5’ adjust-position=“true”**是用在手机端的一个效果，手机键盘不会覆盖输入框的内容，可以看到自己输入的内容。

/* pages/query/query.wxss */
page{
    background-image: url('https://7975-yun-uq19h-1300451626.tcb.qcloud.la/result/01e3935b03be90a801218cf41a264e.gif?sign=39f43b741ceb8dfb0616ca21d599126b&t=1611304886'); 
}
input{
    border-bottom: 1px solid #929292;
}
button{
    margin: 40rpx 30rpx 0rpx 40rpx;
}

.look{
    width: 100%;
    height: 140rpx;
    padding: 30rpx;
    box-sizing: border-box;
}
.look label{
    color: red;
    font-size: 40rpx;
    font-weight: 700;
}
.information{
    color: seashell;
    font-size: 30rpx;
    margin-top: 20rpx;
    -webkit-line-clamp:2;
}

.box{
    width: 95%;
    height: 600rpx;
    background-color: rgb(255, 255, 255);
    margin: 100rpx auto;
    border-radius: 10rpx;
}
.title{
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    color: azure;
    font-size: 15px;
    padding-left: 20rpx;
    box-sizing: border-box;
    border-top-right-radius: 10rpx;
    border-top-left-radius: 10rpx;
    background-color: rgb(1, 107, 107);
}
.black{
    width: 100%;
    padding: 40rpx;
    box-sizing: border-box;
    line-height: 100rpx;
}
.black label{
    display: inline-block;
    width: 100%;
    height: 48rpx;
}
.label{
    color: red;
    margin-right: 10rpx;
}

以上是css的内容用来美化页面的。

const db = wx.cloud.database()
let names = ''
let numbers = ''
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tells:'大家好，欢迎登录成绩查询系统。',
    isshow:false,
    fontsize1:'16px',
    fontsize2:'16px'
  },
  focus(e){
    if(e.currentTarget.dataset.id == 1){this.setData({fontsize1:'10px'})}
    else if(e.currentTarget.dataset.id == 2){this.setData({fontsize2:'10px'})}
  },
  blur(e){
    if(e.currentTarget.dataset.id == 1){this.setData({fontsize1:'16px'})}
    else if(e.currentTarget.dataset.id == 2){this.setData({fontsize2:'16px'})}
  },

  name(e){names = e.detail.value},
  number(e){numbers = e.detail.value},
  show(title){wx.showToast({title: title,icon: 'none',duration: 2000})},
  logs(){this.loop('logs');},
  index(){this.loop('index');},
  loop(value){
    if(names == '' || numbers == ''){this.show('请输入完整!');}
    else{
      wx.showLoading({title: '查询中...'})
      wx.cloud.callFunction({name:'getlogin',data:{name:names,number:numbers}})
        .then(res => {
          if(res.result.data.length == 0){this.show('未查询到此学生！');}
          else{wx.hideLoading();
            wx.setStorageSync('query', res.result.data[0]);
            if(value == 'logs')
            {wx.navigateTo({url: '../logs/logs',success: (result)=>{},fail: ()=>{this.show('跳转失败');}});}
            else{wx.navigateTo({url: '../index/index',success: (result)=>{},fail: ()=>{this.show('跳转失败');}});}
          }
        }).catch(error => {console.log(error)})	

    }
  },
  onLoad: function (options) {
    wx.showLoading({title: '加载中...'});
    var that = this;
    db.collection('dispose').get({
      success(res){
        wx.hideLoading();
        var index = 0;
        for(var i=1;i<res.data.length;i++){
          if(res.data[index]._updateTime<res.data[i]._updateTime){index = i;}  
        }
        that.setData({tells:res.data[index].public});
      },
      fail(res) {wx.hideLoading();wx.showToast({title: '数据出错,请重试！',icon: 'none',duration: 3000})}
    })
  },

})

以上为首页的js代码
一开始我就先请求数据库，获取后端的公告表的公告。把最新的公告请求下来，放在页面中。
这里还有一个作用就是可以判断是否有网。
然后我获取到用户输入的名字和学号，放在data中 传递给云函数，由云函数来判断是否有该名学生，如果有则返回其学生的信息并储存下来。
最后进行跳转。