如果你觉得我说的不错开发微信小程序,可以关注一下。
确定你的目的和你想做什么样的小程序。
我先放上效果图:
一旦确定,您就可以开始自己的布局。主要使用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>
以上是结构布局。事实上开发微信小程序,这种布局非常简单。主要注意第二个输入:**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})}
})
},
})
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网