微信小程序簡單的信息表格的提交到數據庫(新手專屬)(云端數據庫)

大家好,我是小陳,一名大一的編碼愛好者,,,,,剛剛結束了大一的學習生活,也總結出了一點編碼的經驗,希望與大家一起分享.我是學習物聯網的,總感覺大一的課程枯燥無味,所以索性自學了一點微信小程序的開發,只是一點點,(注意:非大神),把自己的學習成果分享在博客中,與大家一起討論學習,也歡迎大家指正批評.

------------------------------------------------------------------------------------------------------------------------------

1,前端基礎知識的預習填充

<view>標簽:相當于web中的div標簽,塊級元素,會換行.

<text>標簽:相當于web中的span標簽,行內元素,不會換行.

<form>標簽:表格標簽.

<picker>標簽:選擇標簽.

<input>標簽,輸入標簽

三元運算符

話不多說,上代碼.....................................................

2,后端基礎知識的預習填充

data里的數據可以用于前端的使用,在賦值時必須用到this.setData

后端對于前端的信息進行了檢索用到了if else,我這里只是使用了檢索是否為空,還可以更深入挖掘,比如電話規定多少位(自行百度)

wx.showtoast({}),進行提醒,目前有icon屬性(圖表顯示)和title屬性(文字提示)

最后一點,如何提交信息到數據庫,wx.cloud.database().collection('').add()方法進行提交

3,牛逼的代碼

? wxml

<form bindsubmit="publish"><view><text>姓名:</text><input bindinput="xingming" name="xingming"></input></view><view><text>電話:</text><input bindinput="dianhua" name="dianhua"></input></view><view><text>地址:</text><picker name="address" range="{{list1}}" value="{{list1[list2]}}" bindchange="gaibian"><view>{{list1[list2]?list1[list2]:'請輸入'}}</view></picker></view><button form-type="submit">提交數據到數據庫</button> </form>

js

let xingming1 let dianhua1 let address1 Page({data: {list1: ['鐵西區', '皇姑區', '遼寧省']},// 姓名xingming(e) {console.log('姓名:', e.detail.value)xingming1 = e.detail.value},//電話dianhua(e) {console.log('電話', e.detail.value)dianhua1 = e.detail.value},//地址欄的改變函數gaibian(e) {console.log('選中的序列', e.detail.value)this.setData({list2: e.detail.value})},//提交觸發函數publish(e) {console.log('提交的數據', e.detail.value)if (!xingming1) {wx.showToast({icon: 'error',title: '姓名為空',})} else if (!dianhua1) {wx.showToast({icon: 'error',title: '電話為空',})} else if (!e.detail.value.address) {wx.showToast({icon: 'error',title: '地址為空',})} else {wx.cloud.database().collection('goods').add({data: e.detail.value}).then(res => {console.log('提交成功', res)}).catch(err => {console.log('提交失敗')})}} })

看樣圖

擊請輸入后

填寫信息后

?4,總結

? ? ? ? 此為比較簡單的頁面提交,非常粗魯的前端,并沒有用到wxss,所以頁面后期還可進行美化.

? ? ? ? 前端的姓名電話都比較好理解,定義各自的屬性名字,定義bindinput監測輸入框是否有變動,比較難理解的是picker標簽(我當時也理解了很時間),他定義的屬性有name,range,value,bindchange(監測輪播的選擇界面是否有有變化),name記錄屬性,range記錄的是你所要選擇的范圍,list在js中定義,而定義的方法所用到的e.detail.value中所返回的值并不是你所設定的所選擇數組的具體的值,而是返回的是數組位列的值,比如arr[1]=你,他返回的并不是你所定義的'你',它返回的是'1',所以定義value的值為{{list[list1]}},這個value定義的值是信息表單提交的值,它對應的是name,如果你不定義value的值,你提交所返回的他的值為0,1,2,3依次類推.在此重新定義value值,才能正確的提交數據到后臺.

說在最后的話

最最重要的是邏輯,邏輯可以把一切方法串聯在一起,如果你還有時間,比如你在大學,一定要把理論課學一學,比如離散,Xx概論,如果你只會寫代碼的話,你根本就不會創造,跟培訓機構培養出來的碼農真的沒有區別,學習相關的理論專業課會讓你更加的深入理解,寫出代碼才會更容易,才會寫出更簡潔的代碼

好好學專業課!好好學專業課!好好學專業課(下學期的主要任務)

歡迎留言,評論,批評

多謝多謝

總結

以上是生活随笔為你收集整理的微信小程序简单的信息表格的提交到数据库(新手篇)(云端数据库)的全部內容，希望文章能夠幫你解決所遇到的問題。

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