當遇到表單錄入時，錄入好的數據提交保存到云數據庫后，在其他頁面展示剛提交到數據庫的數據時，今天自己嘗試做一遍。
表單頁面：

代碼如下：

<view class="container"><form action="" bindsubmit="addBtn"><view class="view-li"><label>姓名：</label><input type="text" name="name" placeholder="請輸入" placeholder-class="color" class="ipt" value='{{form_info}}'></input></view><view class="view-li"><label>性別：</label><input type="text" name="gender" placeholder="請輸入" placeholder-class="color" class="ipt" value='{{form_info}}'></input></view><view class="view-li"><label>身份證號：</label><input type="idcard" name="idcard" placeholder="請輸入" placeholder-class="color" class="ipt" value='{{form_info}}'></input></view><view class="view-li"><label>手機號：</label><input type="number" name="phoneNub" placeholder="請輸入" placeholder-class="color" class="ipt" value='{{form_info}}'></input></view><view class="view-li"><label>職業：</label><input type="text" name="occupation" placeholder="請輸入" placeholder-class="color" class="ipt" value='{{form_info}}'></input></view><view class="view-li"><label>目的地：</label><input type="text" name="destination" placeholder="請輸入" placeholder-class="color" class="ipt" value='{{form_info}}'></input></view><view class="view-li"><label>交通工具：</label><input type="text" name="vehicle" placeholder="請輸入" placeholder-class="color" class="ipt" value='{{form_info}}'></input></view><button type="primary" form-type="submit">提交</button><button type="primary" form-type="reset">重置</button></form> </view>

?js如下：

//index.js //import WxValidate from '../../utils/WxValidate'; const app = getApp() const db = wx.cloud.database()//調用默認云環境的數據庫引用 Page({data: {dataObj:"",number:'',phoneNub:''},onLoad() {},//提交表單添加到數據庫addBtn: function(e){var resValue=e.detail.value;resValue.buyerCreateTime = new Date();//提交時新增默認時間，在獲取數據時以時間排序db.collection("list").add({data:resValue,}).then(e=>{this.setData({form_info: '',//提交后清空輸入框數據}),console.log(e)}) },})

?在提交方法里面默認增加了默認時間，在獲取數據時用做以時間排序展示。提交到云數據庫后的數據如下圖：

?接下來看下如何在其他頁面獲取數據并展示到頁面中

<view class="view-li" wx:for="{{dataArr}}" wx:key="index"><view>{{index+1}}、{{item.names}}</view> <view>{{item.gender}}</view><view>{{item.idcard}}</view><view>{{item.phoneNub}}</view><view>{{item.occupation}}</view><view>{{item.destination}}</view></view> //index.js const app = getApp() const db = wx.cloud.database()//調用默認云環境的數據庫引用 var myVlu=""//聲明一個為空的變量 Page({data: {dataArr:""},//獲取數據并顯示在頁面中getData(){db.collection("list").orderBy("buyerCreateTime","desc").get().then(res=>{//首先獲取數據集合，查詢數據，this.setData({dataArr:res.data})})},// 生命周期函數onLoad: function(options) {this.getData();}, })

在獲取數據時，使用orderBy()排序,（asc正序 、desc倒序），以默認時間來排序，buyerCreateTime在上面說過了，在表單提交的時候綁定默認時間，然后在選擇使用正序還是倒序。

已上便是小程序表單提交云數據庫后，再獲取數據庫中的數據并渲染到頁面上。做個筆記記錄，歡迎大家點評

總結

以上是生活随笔為你收集整理的小程序云开发表单提交并在页面中获取数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。