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

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

确定后就可以开始自己布局。主要是用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中传递给云函数，由云函数来判断是否有该名学生，如果有则返回其学生的信息并储存下来。
最后进行跳转。

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

基于微信小程序云开发的投票小程序源码，图文投票微信小程序源码
功能介绍投票活动十分火,商家,企业,机构偶尔都会来一场投票活动评选,本小程序支持图文投票,简单方便.随时随地完成投票,可以方便设定投票模式(按天按全程,投票数限定). 本代码前后端完整代码包投票列表 ...
小程序云开发数据库查询语句之doc与where||如何查询到不符合条件的结果
小程序云开发数据库查询语句之doc与where||如何查询到不符合条件的结果一只孤独的菜鸟最近在云开发时遇到的查询语句, where和doc,在官方文档上是这样的 db.collection('t ...
微信小程序云开发-树洞小程序Treehole（介绍）
记录一款基于云开发的微信小程序. 树洞,顾名思义是作为匿名吐槽的平台,主要功能可以参照微信朋友圈的形式,不过采取的是匿名的方式. 主要基于微信小程序云开发,前端个人主页页面的界面使用的是ColorUi ...
小程序·云开发，属于小程序的全栈开发机遇
web前端教程用大白话,来讲编程近日,腾讯云"小程序·云开发"解决方案正式上线. 该方案通过简化复杂的后端和运维操作,让即便不具备一定后端知识的开发者也能高效开发出一款高质量的 ...
基于小程序云开发的在线答题小程序源码含答题分类答题记录错题集适合学习适合毕业设计使用
基于小程序云开发开发的在线答题小程序源码核心功能: 1.答题分类 2.开始答题 3.答题评分 4.答题记录 5.错题集部分界面截图: 如有疑问,可联系博主!
小程序云开发_借助小程序云开发制作校园导览小程序丨实战
导语偌大校园,寻路犯难.没关系!本文教你借助云开发制作精美校园导览小程序,带你走遍校园的每个角落,发现不一样的风景. 背景刚入学的新生要想不迷失在偌大的校园,除了依靠不怎么可靠的路边标识外,总会收 ...
微信小程序云开发-树洞小程序Treehole（评论帖子/发布话题实现）
这一节介绍的是评论帖子,还有发布话题功能的实现. 首先说说评论帖子的功能. 先看一下效果图: 从上一节可知,进行评论跳转的时候需要带来一些关于帖子的数据. 这一个页面对于布局来说,也是十分的重要.评论 ...
视频教程-5小时零基础入门小程序云开发-微信开发
5小时零基础入门小程序云开发码农一枚,非著名全栈开发人员.分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑. 多年全栈开发经验,擅长小程序,java,安卓,web前端开发. 邱石 ¥29.0 ...
【小程序云开发】不用后端也能构建完整的微信小程序
文章目录什么是微信小程序云函数云数据库 HTTP 云函数定时触发云函数总结写在最后什么是微信小程序云函数微信小程序云函数是通过微信小程序云开发提供的一种服务器端代码,用于在小程序中进行服 ...

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

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

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

最新文章

热门文章