Python上传云开发 小程序 小程序云开发上传数据

首先我们要在云开发控制台中新建一个名为 Room 的表

然后我们要在上传页面的js文件中进行初始化`

const db = wx.cloud.database().collection('Room')//初始化数据库 宏定义一个db指代Room表

在这里我们做一个宏定义，就是将这行代码放在JS文件中的 Page({ … }）之外，这样我们后续的一些操作写起来也比较方便。

我们以input组件为例

<view class="b2">    
<view class="section__title">房间名：</view>  
  <input name="input1" placeholder="请输入房间名" bindinput="addRname"/>
  </view>

wxss代码为：

.b2{  
position: relative;  
display: flex; 
 padding: 15px; 
  align-items: center;  
  background-color: rgb(255, 255, 255);  
  padding-top: 20px;
  }

效果图（红色框内）

上面我们给这个名为input1的input组件添加了一个bindinput出发事件，就是当input1中的数据变化时就会触发该事件。下面我们给出他的JS文件

addRname(event) {    
console.log("房间名：", event.detail.value)    //这里可以让我们在开发的时候在console控制台上看到我们的结果
Rname1 = event.detail.value //这里的Rname1 也是需要在前面进行宏定义的格式为（ let Rname1 = "" ） ，然后给它赋值
 },

这样我们就能够先获取到在input内输入的数据

最后我们再定义一个button按钮来让其上传到数据库中，

<button bindtap="submit">提交</button>

Js：

submit: function (e) {    
let that = this;    
 db.add({       //db之前宏定义的 在这里指数据库中的Room表； add指 插入
      data: {          // data 字段表示需新增的 JSON 数据       
       Rname: Rname1,    //将我们获取到的Rname1的value值给Room表中的Rname
         },          
  success: function (res) {     
              // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id       
        console.log("上传成功", res)        
         }         
               })        
  },

以上我们就成功的将用户输入的数据上传到了数据库中，此外我这里还有一些其他的知识点。

在这里我们可以看到通过控制switch选择按钮我们还可以将input组件显示或者是隐藏起来

这里我也是在网上学习到的，在这里跟大家分享出来：

wxml:

<view class="b2 section section_gap">    //这里的b2 与上面的b2相同
<view class="section__title">是否给房间上锁</view>   
<switch checked="{{switch1Checked}}" bindchange="switch1Change" />  
</view>

<view class="{{showView?'header_view_show':'header_view_hide'}}" >    
<view class="section__title">房间密码：</view>    
<input  name="RoomPassword" placeholder="请输入房间密码" bindinput="addRpassword"/>  
</view>

这里主要需要说明的就是class="{{showView?'header_view_show':'header_view_hide'}}"这个地方
这里是我们熟练的 A？B:C 三元运算符，即判断A是否为真 ，是真则进行B，是否则进行C
JS:

data: {   
 showView: false  //这里我们先给它赋值为否，因为我们一上来不需要展示输入密码的input
 },
 。。。                       //这里省略了其他无关操作
 switch1Change: function (event) {
 。。。                       //这里省略了其他无关操作
 this.setData({     
  showView: (!this.data.showView)    //在switch1Change中我们没进行过一次点击后，都重新将showView的值重新定义一次这里我们定义成他的  “！” 即 “非”，这样我们就可以没第一次就可以显示或者是隐藏 输入密码的input
   })
  },

wsxx:

.header_view_hide{  
display: none;
}
.header_view_show{    
position: relative;  
display: flex;  
padding: 15px;  
align-items: center; 
border-top: 10px splid red;  
background-color: rgb(255, 255, 255);  
padding-top: 20px;}

最后对于那个滑块
我在这里，只做简单的说明我们可以在其中设置min="“和max=”"来控制滑块的最小值和最大值，要想获得它的值方法和上面第一个（获取房间名）是一样的。

<view class="section section_gap" >   
 <view class="section__title">选择人数</view>    
 <slider name="slider" show-value max="20" bindchange="addCount"></slider>  
 </view>

这是一些简单的干货，也是我一点一点从网上学来的，本人没有系统的学习过小程序的开发，仅在校园内学习了C语言、JAVA等一些皮毛。如果有什么错误的地方请大家指出并谅解！感谢大家！