微信小程序——操作数据库
案例一:统计用户的访问次数
业务需求:
- 统计每个用户对程序的访问次数
- 将访问次数存储到数据库中
- 访问次数应该与用户进行关联
业务逻辑:
- 如果用户是第一次访问此程序,向数据库添加一条记录:{openid:45454545,count:1}
- 如果用户不是第一次访问,首先获取数据库中改用户的访问次数然后+1,再保存到数据库中,然后更新页面中的访问次数
实现步骤:
在项目的pages中创建count_demo
在项目的pages中创建count_demo文件夹 在count_demo文件夹中创建page命名为count_demo
设置程序的主显示页面
将程序主页设置为刚添加的count_demo
将app.json中刚添加的"pages/count_demo/count_demo"放到开始位置
查看刚刚创建的count_demo中的count_demo.js文件
/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
- 页面编译时执行的下面函数
- onload函数—onshow函数–onready
- 当页面切换时执行
- onhide函数 切换回来时执行 onshow函数
- 页面编译时执行的下面函数
创建数据库(counters)
编辑count_demo.wxml
编辑count_dome.js
在count_demo.js中定义变量实现数据的绑定
Page({data: {count:0},})
在onload函数中 查询登录用户的访问次数
获取数据库的引用
const db=wx.cloud.database()
获取要操作的集合
const counters=db.collection(‘counters’)
查询用户在counters集合中的数据
//查询用户在counters集合中的数据db.collection('counters').get().then(res=>{console.log(res)})
输出结果
可以根据返回data数组的长度来判断用户是否是第一次访问
- 如果长度大于0说明已经登陆过就更新数据
- 创建更新指令
- 更新访问次数
if(res.data.length>0){//更新访问次数db.collection('counters').doc(res.data[0]._id).update({data:{count:_.inc(1)}})//在页面上显示的访问次数this.setData({count:++res.data[0].count})}else
- 创建更新指令
- 如果没有数据说明未访问过就插入数据 并更新本地数据
else{//新增数据db.collection('counters').add({data:{count:1}}).then(res=>{this.setData({count:1})})}
- 如果长度大于0说明已经登陆过就更新数据
案例二:查询并展示数据
业务需求:
- 查询数据库中的数据并展示
- 页面加载时查询第一页的数据
- 向上拉动页面到底部时查询下一页数据
- 如果数据库中没有更多数据时,向上拉动不进行查询
实现步骤:
创建集和导入数据(demo_list)为集合设置权限
创建demo_list
- 之间在app.json中的pages配置中的第一行写入保存即可创建并且访问主页也为该页面
编辑demo_list.js文件
自定义函数getListData分页查询数据
// pages/demo_list/demo_list.js Page({data: {page_size: 8, //每页显示的数量page_count: 0, //页码dataList: [],isRequest:true,//是否请求,放数据库中没有更多数据时不再请求},onLoad() {this.getListData()},//分页获取数据getListData() {if(!this.data.isRequest){return}//获取数据库const db = wx.cloud.database()//计算skip函数的参数值let offset = this.data.page_count * this.data.page_size//查询集合中的数据db.collection('demo_list').skip(offset).limit(this.data.page_size).get().then(res => {this.setData({dataList:this.data.dataList.length===0 ? res.data :this.data.dataList.concat(res.data)})res.data.length!==this.data.page_size?this.setData({isRequest:false}):true})},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {this.setData({page_count:++this.data.page_count})this.getListData()} })
- 获取数据库
- 查询数据 skip是查询时跳过的条数 limit是查询时要查询的条数
- skip的参数值就是定义的查询的条数*页码数=已经查询出来的条数
- 当用户第一次访问时(dataList中没有数据)将数据赋值给dataList变量 如果有数据将两个数组进行合并。
- 当请求数组返回时数据的数量不等于我们的设置值时 说明数据没有更多了,我们将isRequest的值设置为false,当他的值为true的时候才允许查询数据
页面刷新时调用
onLoad() {this.getListData()},
当用户下拉到底部时(onReachBottom事件触发)调用 并且请求页码累加
/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {this.setData({page_count:++this.data.page_count})this.getListData()}
编辑demo_list.wxml文件
点我进入下载压缩包
压缩包中找到dis目录进入example\panel\panel.wxml文件中复制代码
<view class="page"><view class="weui-panel weui-panel_access"><view class="weui-panel__bd"><view class="weui-media-box weui-media-box_text" wx:for="{{dataList}}" wx:key="_id"><h4 class="weui-media-box__title">{{item.title}}</h4><view class="weui-media-box__desc">{{item.description}}</view></view></view></view> </view>
将style文件夹中的样式文件复制到我们的项目中并且全局引用
最后遍历数据即可
微信小程序——操作数据库相关推荐
- 微信小程序操作mysql_微信小程序:数据库操作
原标题:微信小程序:数据库操作 一.前提条件: 登录开发者工具软件,配置数据库数据集,操作如下: 打开云开发控制台 添加集合User 二.定义函数: //增加新纪录到云数据库 onAdd: funct ...
- Web端访问微信小程序云数据库
撰写背景: 用微信小程序云开发做了一个与web管理平台配套的微信小程序,Web端需要对接(访问)到云环境的云数据库. 开门见山: 在微信开发者工具里先把云开发控制台打开, 设置->权限设置-&g ...
- 微信小程序调用数据库增删改查
微信小程序调用数据库增删改查 php代码 获得数据库全部数据 js代码 增 wxml页面 js代码 删 js代码 改 js代码 查 js代码 输出展示 不足&改进想法 php代码 <?p ...
- 微信小程序云数据库定时清空(云函数定时触发)
需求: 微信小程序云数据库某表仅保留当天数据,因此每天固定某时间清空一次 实现: 1.新建云函数timer 2.在timer/config.json中配置定时器 {"triggers&quo ...
- 微信小程序操作教程(个人用户注册)
一.注册账户 注册地址:https://mp.weixin.qq.com 1.邮箱注册 注意:每个邮箱只能注册一个小程序账户:邮箱即用户名 请记录用户名及密码 2.邮箱激活:点击链接激活账号 3.信息 ...
- 如何在本机上利用IIS网页发布实现微信小程序与数据库之间的通信
主要思想: 下面就login(登录)部分做出方案 微信小程序 首先要构建一个界面和逻辑模式 WXML部分: <!--pages/login/login.wxml--><!--< ...
- 微信小程序操作图片放大、缩小、旋转、拖拽
微信小程序操作图片放大.缩小.旋转.拖拽 在开发小程序的时候遇到了上传图片,然后编辑的需求.打算网上找一下相关代码组件的,就不用自己搞这么麻烦.经过一番折腾,还是没有找到如意的,最后自己弄好了,记录一 ...
- 微信小程序,数据库中插入表情
微信小程序,数据库中插入表情 错误提示 使用的是django做的后台 错误提示 django.db.utils.InternalError: (1366, "Incorrect string ...
- 微信小程序云数据库where查询语句字段名和字段值都可以是变量
微信小程序云数据库where查询语句字段名和字段值都可以是变量 想要实现的功能 遇到的问题 js代码 想要实现的功能 界面代码 // An highlighted block <view cla ...
最新文章
- Android 通过http协议数据交互
- 二叉树的按层打印和ZigZag打印
- 【Demo】创建固定资产Bapi
- .ASP NET Core中缓存问题案例
- 关于USB-AUDIO使用ALSA编程的一点问题
- 解决idea中xml文件报红问题
- 利用python批量修改文件名称
- WebStorm 8.0.3下简单运行pomelo项目
- 详解Paint的setColorFilter(ColorFilter filter)
- 计算机采用二进制码的优点
- matlab定积分矩形法实验报告,矩形法求定积分
- 《德鲁克管理思想精要》读书笔记1 - 管理是什么?
- [找工作]数据挖掘岗位2016校招要求
- TBC声望 恢复萨满 炼金 宏 附魔300-375
- Java实现图片压缩且不改变原图尺寸
- 微信服务器 系统发生错误,微信系统故障 仍未修复
- 用Win32DiskImager写入U盘容量变小,恢复容量方法
- ios 判断手机角度_IOS 判断iPhone刘海屏
- VScode配置C/C++环境(适合大学生C++课程,从零开始配置)
- 在Android Studio 上为项目添加Git版本控制
热门文章
- 中国少数民族文学馆在内蒙古呼和浩特揭幕
- 64位Ubuntu kylin 16.04使用fastboot下载内核到tiny4412开发板
- c语言大作业旋转,c语言大作业全-20210412035629.docx-原创力文档
- logstash grok mysql_【Logstash系列】使用Redis并自定义Grok匹配
- windows7内存诊断工具有用吗_windows内存诊断工具有什么用
- Java编程基础阶段笔记 day 07 面向对象编程(上)
- .net core WebApi 使用Swagger生成API文档
- object转字符串
- JavaScript常用函数之Eval()使用
- POJ - 3470 Walls