WeChat mini program case - use of simple front-end and cloud database

Implementation content - English Grade Analysis Teacher Version 1.0.0

The home page displays the storage data of the cloud database.
Record pages store data.

folder/file	Function
images	Save used pictures
pages	Including configuration files for home page and record page
app.js	Global js file, initialize cloud database
app.json	Global json file, design interface
app.wxss	Global wxss file, interface style

Home and save page design

1. Homepage——index

index.jscode


//云数据库初始化
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.wxmlcode

<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 code

/* 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. Record page

storage.js

// pages/databaseGuide/databaseGuide.js
 
const 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 => {
        // 在返回结果中会包含新创建的记录的 _id
        this.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;
}

How to use cloud database

You first need to obtain the AppId to use the cloud database. You can get it from the settings page after registering the mini program on the WeChat mini program official website. You can also search online to find out how to get it. It is very simple. After obtaining the Appid, you can use cloud development, here

After clicking in to complete the registration, you can get the environment and environment ID. Note that the usage of these two is inconsistent. Generally, the environment ID is used (this is the current case...)

Then you can use the cloud database. Before using it, you must also create a "container", which is called a collection here. As shown in the picture

The collection is named "english", and here you can see the data stored from the record page. The specific storage methods can be seen in storage.js.

To be optimized——2021.12.18

1. Home page database data cannot be refreshed
2. Home page data analysis and design
3. Layout aesthetics