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

代碼如下：

<view class="container"><form action="" bindsubmit="addBtn"><view class="view-li"><label>姓名：</label><input type="text" name="name" placeholder="請(qǐng)輸入" placeholder-class="color" class="ipt" value='{{form_info}}'></input></view><view class="view-li"><label>性別：</label><input type="text" name="gender" placeholder="請(qǐng)輸入" placeholder-class="color" class="ipt" value='{{form_info}}'></input></view><view class="view-li"><label>身份證號(hào)：</label><input type="idcard" name="idcard" placeholder="請(qǐng)輸入" placeholder-class="color" class="ipt" value='{{form_info}}'></input></view><view class="view-li"><label>手機(jī)號(hào)：</label><input type="number" name="phoneNub" placeholder="請(qǐng)輸入" placeholder-class="color" class="ipt" value='{{form_info}}'></input></view><view class="view-li"><label>職業(yè)：</label><input type="text" name="occupation" placeholder="請(qǐng)輸入" placeholder-class="color" class="ipt" value='{{form_info}}'></input></view><view class="view-li"><label>目的地：</label><input type="text" name="destination" placeholder="請(qǐng)輸入" placeholder-class="color" class="ipt" value='{{form_info}}'></input></view><view class="view-li"><label>交通工具：</label><input type="text" name="vehicle" placeholder="請(qǐng)輸入" 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()//調(diào)用默認(rèn)云環(huán)境的數(shù)據(jù)庫引用 Page({data: {dataObj:"",number:'',phoneNub:''},onLoad() {},//提交表單添加到數(shù)據(jù)庫addBtn: function(e){var resValue=e.detail.value;resValue.buyerCreateTime = new Date();//提交時(shí)新增默認(rèn)時(shí)間，在獲取數(shù)據(jù)時(shí)以時(shí)間排序db.collection("list").add({data:resValue,}).then(e=>{this.setData({form_info: '',//提交后清空輸入框數(shù)據(jù)}),console.log(e)}) },})

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

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

<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()//調(diào)用默認(rèn)云環(huán)境的數(shù)據(jù)庫引用 var myVlu=""//聲明一個(gè)為空的變量 Page({data: {dataArr:""},//獲取數(shù)據(jù)并顯示在頁面中g(shù)etData(){db.collection("list").orderBy("buyerCreateTime","desc").get().then(res=>{//首先獲取數(shù)據(jù)集合，查詢數(shù)據(jù)，this.setData({dataArr:res.data})})},// 生命周期函數(shù)onLoad: function(options) {this.getData();}, })

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

已上便是小程序表單提交云數(shù)據(jù)庫后，再獲取數(shù)據(jù)庫中的數(shù)據(jù)并渲染到頁面上。做個(gè)筆記記錄，歡迎大家點(diǎn)評(píng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。