实现内容——英语一成绩分析小师Version1.0.0

首页显示云数据库的储存数据。
记录页储存数据。

文件夹/文件	功能
images	储存用到的图片
pages	包括首页和记录页的配置文件
app.js	全局js文件，初始化云数据库
app.json	全局json文件，设计界面
app.wxss	全局wxss文件，界面样式

首页和储存页的设计

1. 首页——index

index.js代码


//云数据库初始化
const db = wx.cloud.database({});
const cont = db.collection('english');Page({data:{ne:[],  //这是一个空的数组，等下获取到云数据库的数据将存放在其中},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var _this = this;//1、引用数据库   const db = wx.cloud.database({//这个是环境ID不是环境名称     env: 'english-analyse-6gxw8ydv85fe8e88' })//2、开始查询数据了  news对应的是集合的名称   db.collection('english').get({//如果查询成功的话    success: res => {console.log(res.data)//这一步很重要，给ne赋值，没有这一步的话，前台就不会显示值      this.setData({ne: res.data })}})}, })

index.wxml代码

<text class="head">历年真题使用情况</text><view class='' wx:for="{{ne}}"><!--wx:for是微信数据绑定的一种方式，该数组有多少数据就显示多少个view--><!--index为每个数据对应的下标--><view class="vw"><label for="" class="font14" class="cs">试卷</label><label for="" class="font14" class="cs">{{item.finaltime}}</label></view><view class="vw"><label for="" class="font14" class="cs">错误个数</label><label for="" class="font14" class="cs">{{item.score}}</label></view> <view class="vw"><label for="" class="font14" class="cs">耗时</label><label for="" class="font14" class="cs">{{item.time}}</label></view><view class='imagesize'><view class="head-bg" ></view>
</view><view class='line'></view></view>

index.wxss代码

/* pages/query/query.wxss */
.imagesize{display:flex;height: 25px;                   justify-content: flex-end;        align-items: center             }
.head-bg{width: 86rpx;height: 71rpx;background-image: url('https://656e-english-analyse-6gxw8ydv85fe8e88-1308843422.tcb.qcloud.la/%E4%B8%8A%E5%B2%B8.jpg?sign=5f47f9fe69a4244cbf3f7d116aa8f01f&t=1639758441.tcb.qcloud.la/head_bg.png');background-size: 100% 100%;
}.head{font-size: 21px;margin-left: 78px;
}
.cs{margin-left: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.line{
width: 100%;
height: 1rpx;
background-color:#ffd995;
margin-top:7px;
margin-bottom:7px;
}
.vw{margin-top: 5px;
}
/* 顶部返回的 */
.inaver._30f2b4d {box-sizing: border-box;padding-top: 44rpx;width: 100vw;height: 160rpx;display: flex;position: fixed;z-index: 5000;top: 0;left: 0;
}.inaver .left._30f2b4d {width: 100rpx;height: 100rpx;margin: 8rpx;
}.inaver .left image.icon._30f2b4d {width: 60rpx;height: 60rpx;padding: 10rpx;margin: 10rpx;
}.inaver .center._30f2b4d {height: 100rpx;line-height: 100rpx;flex: 1;margin: 8rpx;
}.inaver .right._30f2b4d {width: 240rpx;height: 100rpx;margin: 8rpx;
}.protect-inaver._30f2b4d {box-sizing: border-box;width: 100vw;height: 160rpx;
}

2. 记录页

storage.js

// pages/databaseGuide/databaseGuide.jsconst app = getApp()Page({//添加res: function(e) {const db = wx.cloud.database()db.collection('english').add({data: {finaltime:e.detail.value.finaltime,score: e.detail.value.score,time:  e.detail.value.time},success: res => {// 在返回结果中会包含新创建的记录的 _idthis.setData({finaltime:e.detail.value.finaltime,score: e.detail.value.score,time: e.detail.value.time})wx.showToast({title: '新增记录成功',})console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)},fail: err => {wx.showToast({icon: 'none',title: '新增记录失败'})console.error('[数据库] [新增记录] 失败：', err)}})},
})

storage.wxml

<form bindsubmit='res'><view class="view-contain-ti"><text class="text-ti">试卷年份</text><input class="input1" name="finaltime" placeholder=""></input></view><view class="view-contain-ti"><text class="text-ti">错误个数</text><input class="input1" name="score" placeholder=""></input></view><view class="view-contain-ti"><text class="text-ti">耗时</text><input class="input1" name="time" placeholder=""></input></view><view><button form-type='submit'>提交</button></view>
</form>

storage.wxss

.view-contain-ti {display: flex;height: 40px;margin: 20px;border: 3rpx solid #faca82;border-radius: 10rpx;
}.text-ti {position: absolute;font-size: 12px;background: white;margin: -10px 0 0 10px;padding: 0 5px;color: rgb(144, 147, 167);
}.input1 {margin:  auto 10px;
}

云数据库的使用方法

使用云数据库首先得获得AppId，可以在微信小程序官网注册小程序后设置页得到，网上也可以搜到怎么获取，很简单。获取Appid后就可以使用云开发了，在这里

点进去以后完成注册，可以得到环境和环境ID，注意这两个的使用地方是不一致的，一般是使用环境ID（目前这个案例是这样的。。。）

然后就可以使用云数据库了，使用之前同样要建立一个“容器”，这里称之为集合。如图

集合名为“english”，在这里就可以看到从记录页存储进来的数据了。具体的存储方法可以在storage.js看到。

待优化——2021.12.18

1. 首页数据库数据不能刷新
2. 首页数据分析设计
3. 版面美观度

微信小程序案例——简易前端与云数据库的使用相关推荐

微信小程序开发之十八 —— 云数据库入门
文章目录学习前后云数据库的基础知识数据库权限限制简易权限配置安全规则数据库查询查询指令command 条件查询法一:Collection.where 条件查询法二:Collection. ...
【微信小程序控制硬件⑧ 】微信小程序以 websocket 连接阿里云IOT物联网平台mqtt服务器，封装起来使用就是这么简单！（附带Demo）
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
微信小程序——传统开发模式与云开发模式对比
目录 1.传统开发模式与云开发模式的对比图 2.云开发技术能力说明 3.云开发技术特点 1.传统开发模式与云开发模式的对比图通过传统开发模式与云开发模式的对比图可以看出传统开发模式需要开发者关注 ...
微信小程序 textarea 简易解决方案
微信小程序 textarea 简易解决方案参考文章: (1)微信小程序 textarea 简易解决方案 (2)https://www.cnblogs.com/bsyblog/p/6116973.ht ...
[小记] 微信小程序 - 人脸识别前端（一）初体验
微信小程序 - 人脸识别前端(一)初体验记录尝试使用拍照模式进行人脸比对的过程-此方式有一定缺陷:调用系统摄像头,会保留照片于系统相册等功能:人脸识别 + 打卡签到说明:前端仅做拍照和转码操作等 ...
微信‘小程序’： web前端的春天 or 噩梦?
最近大家看到这张图是不是都快吐了?这两天一睁眼就被这张图刷屏了喵了咪的,点到哪里都是这个报道和新闻最近因为工作和生活略忙,爱吹文章的我,更新频率也低了,在这里抱个歉,希望大家理解和包容,希望&q ...
微信小程序做问卷——前端部分(生成问卷)
文章目录实现效果界面功能数据功能各个组件的实现右上角的蓝色加号问卷结构部分以单选部分举例每个题型的灰色加号每个题型的删除按钮每个选项的删除按钮每个输入的数据记录全部代码 que ...
【微信小程序】——web前端实战项目
[微信小程序简介] 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即 ...
微信小程序与web前端的区别
1 引言刚接触小程序,会有很多错误的思路去编写,为了避免在代码方面出错,本文将对前端和小程序做一个区分. 2 问题描述微信小程序与web前端的区别. 3 算法描述在web的html中我们一般都是 ...

微信小程序案例——简易前端与云数据库的使用