【原创】微信小程序云开发通过input输入框动态修改云数据库的数据

效果：
可以在小程序的显示界面中，渲染出数据库的相关内容，并且可以在显示界面中，直接修改数据库中的数据。

初始状态图：
点击获取数据：

数据库中的内容（节选）

修改数据：
在界面直接修改，数据库中也同步修改了
（可只修改其中一条，也可同时修改多条，图片为修改多条）

代码展示：

wxml代码：

<view><button bindtap="getData" style="background-color:grey">获取数据</button><button bindtap="addData" style="background-color:grey;margin-top:20rpx">添加数据</button><button bindtap="updateData" style="background-color:grey;margin-top:20rpx">更新数据</button><view class="textContainer" wx:for="{{dataList}}" wx:key="id"><input type="text" value="{{item.name}}" bindblur="listenInput" bindfocus="listenValue" data-index="{{index}}" /><view></view><input type="text" value="{{item.text}}" bindblur="listenInput" bindfocus="listenValue"data-index="{{index + dataListLength}}" /></view>
</view>

（添加数据这个按钮是我在练习时加的，与本主题无关）

js代码

data部分:

data: {dataList: [],tempList: [],  //临时存放旧数据tempIndex: 0,  //临时记录下标dataListLength: 0,  //dataList长度}

主要函数部分：

  //async...await异步请求，等待请求结束再执行下一步async getData(res) {await db.collection('ArrayList').where({age: _.gt(0)}).get().then(res => {this.setData({dataList: res.data})})this.setData({dataListLength: this.data.dataList.length})},updateData() {wx.showToast({title: '数据已更新'})},listenValue(res) {console.log(res);this.setData({tempList: res.detail.value,tempIndex: res.currentTarget.dataset.index})},listenInput(res) {console.log(res.detail.value);var newData = res.detail.value;//input框的索引，根据索引获得更新的部分if (this.data.tempIndex < this.data.dataListLength) {db.collection('ArrayList').where({name: this.data.tempList}).update({data: {name: newData,}})}else {db.collection('ArrayList').where({text: this.data.tempList}).update({data: {text: newData,}})}}

总结：
这个案例是我在学习云开发时突然想到的，于是就动手做了，整体难度不算高，就是需要逻辑思考，先提出这个需求，再一步步尝试做，做的过程中会发现很多问题，为了解决这些问题，就会促使自己去思考，一步一步地把问题解决。

重点：
1.input输入框中的bindfocus事件，通过回调函数，获取res.detail.value，即输入框中的值，然后通过setData把值存放进tempList，这样，就可以知道点的是哪个输入框的哪个内容，在更新数据时就可以直接通过this.data.tempList来查询点击的内容属于数据库中的哪条记录。

2.input输入框中的bindblur事件，当输入框失去焦点时，就会通过
res.detail.value获取输入框中的数据，然后进行update，完成数据更新。之所以不用bindinput，是因为如果用bindinput的话，input中每变化一次，res.detail.value就变一次，变化太多，容易出先更新数据不全面，用bindblur可在失去焦点时，直接把全部内容拿到。

3.input中的data-index，这个是为了区分更新的是哪条数据，如更新name，就只能更新name，更新text，就只能更新text，通过data-index给name和text都加上索引，name的索引范围是0到dataList的长度，text的索引是自身的原本索引加上dataList的长度。这样，在更新数据时，先通过if语句判断，再根据索引的范围进行相应数据的更新。

本案例中存在的问题：
如果多条数据的内容相同，如出现同名同姓的情况，修改时这几条数据的内容就会一起被修改…

最后，欢迎大家一起讨论！

【原创】微信小程序云开发通过input输入框动态修改云数据库的数据相关推荐

微信小程序引入ECharts，并自定义动态修改表内参数配置
ECharts官方并没有给出小程序的相关参考,但是有大神做出了ECharts-小程序版,可以直接引用. 效果图引用步骤 1.下载文件 GitHub - ecomfe/echarts-for-weix ...
微信小程序wxss---对应css样式（动态修改css样式）
微信中wxss有些类似于scss,可以引用外联样式.但是不知道怎么继承css样式下图是微信中动态绑定css样式,实现css样式的动态修改
【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...
【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
微信小程序——传统开发模式与云开发模式对比
目录 1.传统开发模式与云开发模式的对比图 2.云开发技术能力说明 3.云开发技术特点 1.传统开发模式与云开发模式的对比图通过传统开发模式与云开发模式的对比图可以看出传统开发模式需要开发者关注 ...
微信小程序应用开发赛作品综合开发记录——晋鹿文旅（云开发——概览）
文章目录前言作品展示: 1.设计理念: 2.1.风景/人文历史 2.2.文物园 2.3.志愿者(暂未对接任何活动,仅测试) 2.4.英汉传译(考虑到可能在旅行中外国友人或者单纯就想翻译) 2.5. ...
python开发微信小程序-Django微信小程序后台开发教程的实现
1 申请小程序,创建hello world小程序 2 添加交互框和按钮 index. wxml cal {{ result }} index.wxss /**index.wxss**/ .input ...
【零基础微信小程序入门开发一】小程序介绍及环境搭建
什么是小程序? 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...
Django微信小程序后台开发教程
Django微信小程序后台开发教程 1 申请小程序,创建hello world小程序 2 添加交互框和按钮 3 在服务器配置hello django 4 实现计算器接口 5 配置服务器将后端与微信小程 ...

【原创】微信小程序云开发通过input输入框动态修改云数据库的数据

【原创】微信小程序云开发通过input输入框动态修改云数据库的数据

【原创】微信小程序云开发通过input输入框动态修改云数据库的数据相关推荐

最新文章

热门文章