一  
  
  
  
  
 、表单数据发送到数据库

1. 利用bindsubmit来写一个函数

<form bindsubmit="bindSubmit"> <view class="form_border"> <label>收件人名称:</label> <input name="userName" auto-focus placeholder=" 请填写收件人" /> </view> <view class="form_border"> <label>在哪里取件:</label> <input name="getAdress" placeholder=" 请填写取件地址" /> </view> <view class="form_border"> <label>送到哪里去:</label> <input name="putAdress" placeholder=" 请填写送货地址" /> </view> <view class="form_border"> <label>送达时间:</label> <input name="getTime" placeholder=" 请填写送达时间" /> </view> <view class="form_border"> <label>取件码:</label> <input name="getNumber" placeholder=" 请填写取件码" /> </view> <view class="form_border"> <label>联系电话:</label> <input name="userNumber" placeholder=" 请填写联系电话" /> </view> <view class="form_border"> <label>酬劳费用:</label> <input name="getPrice" placeholder=" 请填写酬劳费用" /> </view> <button hover-class="hover-button" class="button" form-type="submit">提交订单</button> <button hover-class="hover-button" class="button" form-type="reset" style="margin-top: 10rpx;">重置订单</button> </form>

2. 给每一个变量一个name值           ，用于传值

如上图

3. 添加两个按钮用于提交表单和重置表单

<button hover-class="hover-button" class="button" form-type="submit">提交订单</button> <button hover-class="hover-button" class="button" form-type="reset" style="margin-top: 10rpx;">重置订单</button>

 form-type的不同属性实现不同的作用  
  
  
  
  
 。

4. 下面是wxss的样式 
 
  
 
  
 
  
 
  
 
  
，不做解释

view{ height: 100rpx; margin-top: 20rpx; } input{ width: 750rpx; height: 60rpx; display: block; box-sizing: border-box } label{ display: inline-flex; width: 300rpx; height: 50rpx; margin-bottom: 20rpx; } .form_border{ margin: 20rpx,20rpx,20rpx,20rpx; padding-bottom: 20rpx; border-bottom: solid #b3aeae; display:inline-flexbox; } input{ font-size: 35rpx; font-family: Verdana, Geneva, Tahoma, sans-serif; padding-bottom: 20rpx; } .button{ align-items: center; text-align: center; color: #FFFFFF; border-radius: 25rpx; padding: 10rpx; margin-top: 80rpx; margin-bottom: 0rpx; width:50%; height: 100rpx; /* z-index:666; */ bottom:15rpx; display: -webkit-flex; justify-content:center; background-color: #259dff; } .hover-button{ position: relative; top: 3rpx; left: 3rpx; box-shadow:0px 0px 8px rgba(0, 0, 0, 0.1) inset; background: rgb(195, 219, 182); }

 5. js部分的函数实现

data: { "userName":"", "getAdress":"", "putAdress":"", "getTime":"", "getNumber":"", "userNumber":"", "getPrice":"" }, bindSubmit:function(res){ console.log(res) var userName = res.detail.value.userName var getAdress = res.detail.value.getAdress var putAdress = res.detail.value.putAdress var getTime = res.detail.value.getTime var getNumber = res.detail.value.getNumber var userNumber = res.detail.value.userNumber var getPrice = res.detail.value.getPrice userNumber = Number(userNumber) getNumber = Number(getNumber) getPrice = Number(getPrice) wx.showLoading({ title: 订单发布中..., mask: "true" }) db.collection("put_list").add({ data: { "userName":userName, "getAdress":getAdress, "putAdress":putAdress, "getTime":getTime, "getNumber":getNumber, "userNumber":userNumber, "getPrice":getPrice }, success: function(res){ console.log(res) wx.hideLoading() } }) },

6. 效果展示

二 
  
  
  
  
  、表单数据库发送到数据库之后









，将数据渲染到页面上

 1. 用小程序中的接口函数来实现

const db = wx.cloud.database()//全局变量放在page外面 onLoad:function(options) { db.collection(put_list).get({ success: res=>{ console.log(请求成功,res)//res.data包含该记录的数据 this.setData({ List: res.data }) }, fail(err){ console.log(请求失败,err) } }) },

db.collection(这里面是数据库中集合的名字).

我最大的疑问是：我在这一步：success:function(res){}这样写错了
  
  
  
  
  
 ，页面一直不显示 
  
  
  
  
 ，明明显示请求成功 


 


 


 


 


 
，唉！改成：success:res=>就成功了

2. 要有一个空数组来存数据

data: { List: [] },

3. 最后在wxml中渲染
 
 
 
 
 
，调用数组  
   
   
   
   
  ，来显示数据

因为把数据库中的数据存在了空数组中 

 

 

 

 

 
，然后调用数组就可以显示出数据库中的数据

<block wx:for="{{List}}"> <!-- 上面 --> <view class="container0"> <view class="left">*用户名： {{item.userName}}</view> <view class="right">取件码： {{item.getNumber}}</view> </view> <!-- 中间 --> <view class="container2"> <view>取件地址：{{item.getAdress}}</view> <view>送货地址：{{item.putAdress}}</view> <view>送达时间：{{item.getTime}}</view> </view> <!-- 下面 --> <view class="container1"> <view class="left">联系电话：{{item.userNumber}}</view> <view class="right">酬劳：{{item.getPrice}}元</view> </view> </block>

4. 效果展示