微信小程序 云数据库使用(上)

  有了一个小想法，向云数据库写入文本小故事，之后在读取故事。

数据库读取：https://blog.csdn.net/weixin_45488643/article/details/113004707

简单界面如下：

创建集合

  首先开通微信小程序的云开发环境，然后打开云开发控制台，添加集合。因为我是保存小故事的数据库，所以创建了一个Bedtime_Stories 集合。

1、js文件

“Bedtime_Stories” 是数据库集合，自己在创建的。

// index.js
// 获取应用实例
var util = require('../../utils/util.js');
wx.cloud.init()
const app = getApp()
// 定义保存到数据库 数据类型
const mydata ={
  title: '', //标题
  substance: '',//内容
} 
Page({
  data: {
    Name: '',//故事标题
    Content:'',  //故事内容
    max: 5000, //限制最大输入字符数
    min: 10,  //限制最小输入字符数
    minWord: ''//提示语句

  },
  //获取用户输入的名字
  userNameInput:function(e){
    var that = this;
    that.setData({
      Name: e.detail.value
    })
  },
  getText: function(e){
    //输入内容后，直接点击提交，获取不到内容，只有点击textarea区域之外才可以触发函数
    //利用输入判定函数，可以实时获取输入值
  },
  /****限制字数与计算 */
  getValueLength: function (e) {
    var that=this;
    that.setData({
      Content: e.detail.value
    })
    console.log(that.data.Content)
    let value = e.detail.value
    let len = parseInt(value.length)
    //最少字数限制
    if (len <= this.data.min)
      this.setData({
        minWord: "至少填写10个字哦～"
      })
    else if (len > this.data.min)
      this.setData({
        minWord: " "
      })
    //最多字数限制
    if (len > 5000) return;
    this.setData({
      currentWordNumber: len //当前字数 
    })
  },
  // 保存内容
  save_content: function (e) {
    var that = this;
   
    const db = wx.cloud.database();
    const collections = db.collection('Bedtime_Stories'); // 数据 集合
    collections.add({
      data: {
        data:{
          title: that.data.Name,
          substance: that.data.Content,
        },
        time: util.formatTime(new Date())  //时间
      },
      success(result) {
        app.globalData.myid = result._id,
        app.globalData.mydata = mydata,
        console.log('保存成功')
        that.postbillsuccess()
      }
    })
    wx.showToast({
      title: '保存成功',
      icon: 'success',
      duration: 1000
    })
  },
  onTapDayWeather(){
    wx.navigateTo({
      url: '/pages/index2/index2',
    })
  },
  

})

2、wxml 文件

<!--index.wxml placeholder="请输入故事内容" -->
<view class="itemView" >
  <text >标题：</text>
</view>
<view class="itemView">
    <input class="input_contant" name="userName"
    bindinput ="userNameInput"/>
  </view>
<!--多行文本输入组件textarea   value="{{ Content}}"  -->
<view class="itemView" >内容：</view>
<view class="contant">
     <view class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</view>
      <textarea name="bindTextAreaBlur" bindblur="getText" bindinput="getValueLength" show-confirm-bar='true' value="{{editText}}" bindconfirm="getText"  maxlength="{{max}}" minlength="{{min}}"auto-focus>   
      <text class="minWord">{{minWord}}</text>
     </textarea>
</view>
<view class="tips">编写小故事内容</view>

<button class='btn1'  bindtap='save_content'>
    <image class='btnImg' src='../images/wechat.png'></image>
    <view>保存</view>
 </button> 
 <view >
  <button type="primary" bindtap="onTapDayWeather">立即查询</button>
</view>

3、wxss 文件

/**index.wxss**/
page {
  background-color: rgb(247, 247, 247);
}
.image{ /* 页面图片 */
  position: absolute;
  top:0rpx;
  left:0rpx;
  width:100%;
  height:100%;
  z-index:-1;
}
.Button{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.btn1 {
  width: 80%;
  margin-top: 10rpx;
  background-color: white;
  color: black;
  float:center;
}
.btn2 {
  width: 80%;
  margin-top: 10rpx;
  background-color: white;
  color: black;
}

.itemView{
  text-align: center;
  align-items: center;
  justify-content: center;
  background:rgb(247, 247, 247);
  height: 1.5rem;
  min-height: 1.5rem;
}
.input_contant{
  border-top: 1px solid rgb(247, 247, 247);
  width: 100%;
  margin: 0 auto;
  background-color: #ffff;
  height: 0.8rem;
  min-height: 1.8rem;

}
.contant {
  border-top: 1px solid rgb(247, 247, 247);
  width: 100%;
  margin: 0 auto;
  background-color: #ffff;
}
 
textarea {
  min-height: 500rpx;
  max-height: 500rpx;
  padding: 10rpx 10rpx;
  font-size: 16px;
  width: 94%;
  margin-left: 3%;
  margin-top: 15px;
}
 
.tips {
  width: 96%;
  margin-left: 2%;
  height: 45px;
  color: rgba(136, 136, 136, 1);
  font-size: 14px;
  margin-top: 15px;
  text-align: left;
  font-family: PingFangSC-regular;
}
 
.minWord {
  color: red(255, 144, 144);
  font-size: 14px;
  position: absolute;
  top: 30px;
}
 
.currentWordNumber {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  float: right;
  margin-right: 15px;
  color: rgba(136, 136, 136, 1);
  margin-bottom: 10px;
}

.btn1 {
  width: 80%;
  margin-top: 20rpx;
  background-color: burlywood;
  color: white;
  border-radius: 98rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.btnImg {
  margin-right: 8rpx;
  width: 50rpx;
  height: 50rpx;
}
.btn1::after {
  border-radius: 98rpx;
  border: 0; 
} 

数据库的读取见