关键词：
实际需求：
1.有用户输入数据的文本框和按钮
2.通过文本框的getName()和getValue()方法来获取用户输入的名称和值
3.有输入校验（输入为空时弹窗提醒用户）
4.通过按钮的add方法将数据传入到数据库中
1.demo.wxml
商品名：<input type="text" bindinput="getName"></input>
价格：<input type="text" bindinput="getValue"></input>
<button bindtap="add">点击添加商品</button>
<view wx:for="list">
<view bindtap="click" data-id1="item._id">商品名：item.name,价格：item.value</view>
</view>
效果：
2.demo.js
代码细节较多，仔细阅读
//全局变量
let Name=''
let Value=''
Page(
data:
list:[]
,
onLoad()
this.getList()
,
//专门写一个获取数据的getList方法，防止代码冗余
getList()
wx.cloud.database().collection('goods')
.get()
.then(res=>
console.log('获取数据成功！',res.data)
this.setData(
list:res.data
)
)
.catch(err=>
console.log('获取数据失败！')
)
,
//实现点击（click）事件
click(e)
console.log('点击跳转商品详情',e.currentTarget.dataset.id1)
//实现页面跳转并传递参数id到新页面
wx.navigateTo(
url: '/pages/demo1-1/demo1-1?id=' +e.currentTarget.dataset.id1,
)
,
//获取用户输入的商品名
getName(e)
Name = e.detail.value
console.log(Name)
,
//获取用户输入的商品价格
getValue(e)
Value = e.detail.value
console.log(e.detail.value)
,
//点击按钮向数据库中添加数据
add()
console.log('添加的商品名',Name)
console.log('添加的商品价格',Value)
//校验操作
if (Name=='')
//弹窗提醒函数
wx.showToast(
icon:'none', //为了去除弹窗中的√
title: '商品名为空'
)
else if(Value=='')
wx.showToast(
icon:'none',
title: '价格为空'
)
//添加操作
else
wx.cloud.database().collection('goods')
.add(
data:
//将全局变量中的值传给name和value
name:Name,
value:Value
)
.then(res=>
console.log('添加数据成功！')
//再次向数据库发送请求，使列表动态更新数据
this.getList()
)
.catch(err=>
console.log('添加数据失败！')
)
)
- 注意!
下方showToast函数为弹窗的固定写法
其中，为了去除弹窗中的“√” 故设置icon的值为none
wx.showToast( icon:'none', title: '商品名为空' )
效果：
起始页面：
输入后点击按钮：
若输入为空，则弹窗提醒
1.商品名为空：
2.商品价格为空：
基于云开发的微信小程序实战教程
基于云开发的微信小程序实战教程（一）最近刚开发了款小程序，在开发过程中发现，基于云开发的教程资源不是很多，而且很不详细。所以边实战边总结了下云开发的简单教程，希望对你有所帮助。本章... 查看详情
微信小程序云开发入门到发布上线(代码片段)
...简单的写过起步教程云开发文档熟悉vue/es6小程序注册【微信公众平台】获取appid【微信公众平台-开发-开发设置】新建小程序云开发项目新建项目选择一个空目录，填入AppID（使用云开发能力必须填写AppID）勾选创建“小程序云开... 查看详情
最新最全的云开发入门教程，微信小程序云开发，云函数，云数据库学习，微信小程序云开发扩展功能学习(代码片段)
写在前面1，讲解视频https://edu.csdn.net/course/detail/265722，配套笔记配套笔记会在csdn上免费给到大家，欢迎关注，笔记会持续更新。https://blog.csdn.net/qiushi_19903，支持石头哥😊3-1，源码和配套资源获取目前... 查看详情
微信小程序云开发和传统服务器对比区别
最新最全的云开发入门教程，微信小程序云开发，云函数，云数据库学习，微信小程序云开发扩展功能学习_编程小石头-CSDN博客https://xiaoshitou.blog.csdn.net/article/details/112391688?utm_medium=distribute.pc_relevant_t0.none-task-bl 查看详情
基于云开发的微信小程序实战教程(代码片段)
基于云开发的微信小程序实战教程（二）上篇文章中，简单介绍了下小程序云开发的概念，还有开发工具的安装和配置，云开发环境已经搭建完毕。本章主要内容：微信开发者工具如何使用，小程序云... 查看详情
基于云开发的微信小程序实战教程(代码片段)
基于云开发的微信小程序实战教程（二）上篇文章中，简单介绍了下小程序云开发的概念，还有开发工具的安装和配置，云开发环境已经搭建完毕。本章主要内容：微信开发者工具如何使用，小程序云... 查看详情
微信小程序｜基于小程序+云开发制作一个菜谱小程序
今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力。一、小程序1.创建小程序</ 查看详情
微信小程序notes｜常用开发事例基于云平台导出excel(代码片段)
历史文章回顾：微信小程序｜开发常用事例（一）微信小程序｜开发常用事例（二）微信小程序Notes｜开发常用事例（三）微信小程序Notes｜开发常用事例（四）一、前言最近一直... 查看详情
轻松入门微信小程序云开发（详细）(代码片段)
文章目录1、课程介绍2、小程序基础2-1、小程序注册2-2、小程序开发工具介绍2-3、创建小程序及代码结构介绍2-4、配置文件JSON2-5、页面结构WXML2-6、页面样式WXSS2-7、页面交互JS3、小程序云开发3-1、小程序云开发介绍3-2、云数据库3... 查看详情
微信小程序——云开发｜计费方式调整大家怎么看？(代码片段)
...1步:创建项目第2步:选择模板第3步:开始开发说在最后介绍微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。开发者可以使用云开发快速开发小程序、小游戏、公众号网页等，并且原生打通微信开放能力。开发... 查看详情
微信小程序云开发———云数据库(代码片段)
1.微信小程序注册 官方注册文档:[https://developers.weixin.qq.com/miniprogram/introduction/] 微信小程序注册地址：[https://mp.weixin.qq.com/] 进去以后点击立即注册 点击立即注册后会... 查看详情
微信小程序云开发修改个人信息为啥修改的变成其他人的
参考技术A输入信息的时候输错了。如果微信小程序云开发修改个人信息变成了其他人的，那就有可能是在修改时输入身份信息有误导致的，可以重新进行修改。小程序云开发是微信最近推出的新的一项能力，它弱化了后端以及... 查看详情
微信小程序云开发—“初始化云开发环境”(代码片段)
一、创建项目创建项目时先选择“不使用云开发环境”二、开通云开发1.点击云开发2.点击设置，查看云环境id（云开发id）三、初始化云开发环境1.先删除用不到的代码（index.wxml/wxss/js，app.wxss等）；2.... 查看详情
微信小程序云数据库的局限性
参考技术A产品上线慢。小程序云数据是集成于小程序控制台的原生serverless云服务。核心功能包括：云存储、云数据库和云函数。小程序云开发解决了传统开发模式下开发效率低、资源投入高、产品上线慢和日常运维难等问题，... 查看详情
微信小程序云开发数据库多值设置
...修改等操作，可以更好地实现数据的管理。参考技术A在微信小程序云开发中，你可以设置字段的数据类型为Array或Object，这样你就可以存储多值内容，它们将被自动转化为多维数组。 查看详情
微信小程序云开发—“云数据库初始化”
云开发——“云数据库”一、在数据库中创建一个集合1.点击数据库—点击"+"号创建集合2.在集合中添加数据（相当于添加表中的一行）二、数据库权限管理点击"数据权限"，将权限设置为“所有用户可... 查看详情
微信小程序-云支付那些事儿(代码片段)
...码目录结构四、为什么这样写五、结语一、前言稍微玩过微信小程序云开发的同学都基本知道微信小程序云开发目前已经支持云支付这一能力。那么在云 查看详情
taro微信小程序云开发云函数上传并部署错误的解决办法
参考技术ATarov3.0.5官方文档是这样的目录结构：实际目录结构：引起的错误：解决办法：讲index.ts修改未index.js 查看详情