创建集合

首先开通微信小程序的云开发环境，然后打开云开发控制台，添加集合。因为我是保存小故事的数据库，所以创建了一个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.valuelet 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;
}

数据库的读取见

微信小程序云数据库使用(上)相关推荐

Web端访问微信小程序云数据库
撰写背景: 用微信小程序云开发做了一个与web管理平台配套的微信小程序,Web端需要对接(访问)到云环境的云数据库. 开门见山: 在微信开发者工具里先把云开发控制台打开, 设置->权限设置-&g ...
微信小程序云数据库定时清空（云函数定时触发）
需求: 微信小程序云数据库某表仅保留当天数据,因此每天固定某时间清空一次实现: 1.新建云函数timer 2.在timer/config.json中配置定时器 {"triggers&quo ...
微信小程序云开发实现上传文件和预览下载文件
微信小程序云开发实现上传文件和预览下载文件一.前言目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的p ...
微信小程序云数据库where查询语句字段名和字段值都可以是变量
微信小程序云数据库where查询语句字段名和字段值都可以是变量想要实现的功能遇到的问题 js代码想要实现的功能界面代码 // An highlighted block <view cla ...
外部web端访问微信小程序云数据库的几种方法
前言我当前的项目是小程序开发,使用的是云开发方式,那么这时涉及到了小程序端提交的数据会保存到云数据库中,可是呢这些个数据要被外部访问用来管理,也就是还得弄一个管理后台界面管理这些数据.那就需要拿到云 ...
微信小程序云开发-批量上传文件到云储存空间
微信小程序开发自己最近在玩微信小程序,准备记录一些自己遇到的,网络上没有对应教程(也许是自己没找到),或者是教程比较少的问题,然后给出自己的解决方案目录微信小程序开发问题一.云储存是什么? ...
web端获取微信小程序云数据库数据实现增删改查等操作
获取小程序数据库前言一.微信小程序Web SDK 1.微信官方示例 2.未登录模式注意事项二.完整流程演示 1.开启云数据库访问权限 2.编写云函数 3.web前端引入js 4.web页面js访 ...
微信小程序-云数据库开发
数据库增删查改数据库权限管理这相当于管理员权限,可以改到所有人可读. 查询get() 首先在微信小程序上方工具栏点击云开发-数据库-添加集合-增添记录其次,在app.js中写入以下代码 App( ...
微信小程序云数据库实现注册
微信小程序自带的云数据库的优势在于,不用搭建服务器和后端就可以直接调用数据库我们接下来使用云数据库实现注册功能,效果图如下云数据库结构如下: 这是用云数据库实现注册功能,实现代码如下,: regi ...

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

数据库写入

创建集合

1、js文件

2、wxml 文件

3、wxss 文件

微信小程序云数据库使用(上)相关推荐

最新文章

热门文章

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

数据库写入

创建集合

1、js文件

2、wxml 文件

3、wxss 文件

微信小程序 云数据库使用(上)相关推荐

最新文章

热门文章

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

微信小程序云数据库使用(上)相关推荐