先將form表單寫入Page的data，接着再從data里取出來寫入數據庫？或者直接獲取form表單數據時就寫進數據庫，無須更新page里面的data，不過，如果要在其他頁面再寫數據庫的話，還是先更新頁面的data，再在其他頁面取出該頁面的data進行相關的操作吧。
page_02.wxml
1 <view class='forms'>
2 <form bindsubmit='getForm'>
3 <view class='getform'>
4 <view>用戶名: 5 <input type='text' name='username' placeholder='請輸入用戶名'/>
6 </view>
7 <view>年齡: 8 <input type='text' name='age' placeholder='請輸入年齡'></input>
9 </view>
10 <view>性別: 11 <input type='text' name='gender' placeholder='請輸入性別'></input>
12 </view>
13 </view>
14
15 <view class="btn-area">
16 <button formType="submit">Submit</button>
17 </view>
18 </form>
19
20 <view class="btn-area">
21 <button bindtap='getData'>Get</button>
22 </view>
23 </view>
20~22行是操作數據庫的按鈕
page_02.wxss
樣式沒寫，保持最原始的
.btn-area{ background-color: #e4e4e4; width: 30%; margin: auto; /*居中處理*/ border-radius: 20rpx; margin-top: 10px;
}
page_02.js
主要有兩個函數，getForm是用form表單的數據更新page里面的data
getData用來取出data中的數據寫入雲數據庫，該函數使用了promise風格
1 // pages/page_02/page_02.js
2 Page({ 3
4 /** 5 * 頁面的初始數據 6 */
7 data: { 8 username:"", 9 age:0, 10 gender:""
11
12 }, 13
14 /** 15 * 生命周期函數--監聽頁面加載 16 */
17 onLoad: function (options) { 18
19 }, 20
21 /** 22 * 生命周期函數--監聽頁面初次渲染完成 23 */
24 onReady: function () { 25
26 }, 27
28 getForm:function(e){ 29 var formdata = e.detail.value; 30 this.setData({ 31 "data.username":formdata.username, 32 "data.age":formdata.age, 33 "data.gender":formdata.gender 34 }) 35 console.log("更新data",e) 36 }, 37
38 getData:function(e){ 39 var getdata = this.data; 40 const db = wx.cloud.database(); 41 db.collection("user_info").add({ 42 data:{ 43 username:getdata.data.username, 44 age:getdata.data.age, 45 gender:getdata.data.gender 46 } 47 }).then(res=>{ 48 console.log("添加至數據庫成功",res) 49 }).catch(res=>{ 50 console.log("添加失敗",res) 51 }) 52 } 53 })
最后的效果如下：
