有了一个小想法,向云数据库写入文本小故事,之后在读取故事。
数据库读取: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;
}
数据库的读取见