ETL小白教學(xué)第二篇---動態(tài)傳值
|
熱騰騰的第二篇來啦~沒錯就是第二篇 名字神馬的就叫第二篇 才不是因為我想不出來叫啥呢 在上一篇ETL小白教學(xué)第一篇---頁面跳轉(zhuǎn)、傳值，咱們學(xué)習(xí)了兩個頁面的跳轉(zhuǎn)和傳死值。但是呢，在實際應(yīng)用中，是較少傳死值的，所以本篇學(xué)習(xí)如何動態(tài)傳值。 思考：A頁面到B頁面的動態(tài)傳值需要什么條件？ 1、首先，要輸入傳輸?shù)膎ame和value，所以我們需要->輸入框 2、其次，用按鈕點擊跳轉(zhuǎn)，所以我們需要->按鈕 所以第二篇的教學(xué)內(nèi)容如下一、了解輸入框和按鈕插件 二、了解數(shù)據(jù)類型 三、學(xué)會對js里面的data做操作 0、添加注釋wxml頁面的注釋用 js文件的注釋用 //注釋一行 / 注釋多行 */ wxss 文件的注釋用 //
加個騷操作 在js 和 wxml 中 按 ctrl+/ 1、了解輸入框文檔傳送門》傳送門 注重點
1.1、輸入框的提示 placeholder
1.2、輸入框的初始值 value
1.3、輸入框的類型 type
1.4、輸入框觸發(fā)的事件
1.4.1、輸入時觸發(fā)事件 bindinput
1.4.2、聚焦時觸發(fā)事件 bindfocus
1.4.3、失去焦點時觸發(fā)事件 bindblur
1.4.4、點擊完成按鈕時觸發(fā)事件 bindconfirm
tip 輸入框是沒有邊框的，我們要給它邊框 邊框的wxss代碼
[AppleScript] 純文本查看 復(fù)制代碼
.border_black {
border: 1rpx solid black; margin: 20rpx 20rpx;
}
wxml代碼 [AppleScript] 純文本查看 復(fù)制代碼 <input class="border_black" placeholder="輸入框的提示"/> <input class="border_black" value="輸入框的初始值"/>
效果圖如下 事件方面的wxml代碼 [AppleScript] 純文本查看 復(fù)制代碼 <input class="border_black" bindinput="input" bindfocus="focus" bindblur="blur" bindconfirm="confirm" placeholder="輸入框的提示"/> js代碼
[AppleScript] 純文本查看 復(fù)制代碼
input: function (e) {
console.log("我是輸入時觸發(fā)事件")
},
focus: function (e) {
console.log("我是聚焦時觸發(fā)事件")
},
blur: function (e) {
console.log("我是失去焦點時觸發(fā)事件")
},
confirm: function (e) {
console.log("我是點擊完成按鈕時觸發(fā)事件")
}
運行的效果，需要各位童鞋自己進(jìn)行運行測試了。順便說一句，點擊完成按鈕時觸發(fā)事件是在輸入框里面敲回車鍵才會執(zhí)行的。 2、了解按鈕文檔傳送門》傳送門 我在按鈕方面主要用于跳轉(zhuǎn)頁面和給按鈕點擊事件，所以不詳說了 3、了解小程序的數(shù)據(jù)類型
3.1、字符、數(shù)字等常見類型
3.1.1 字符 var string = "11"
3.1.2 數(shù)字 var num = 1
3.2、數(shù)組、對象
3.2.1 數(shù)組 var sz = ["1","2","3","4","5","6"]
3.2.2 對象 var dx = {"name":"ETL","age":"22","sex":"BOY"}
3.3、數(shù)組對象或?qū)ο髷?shù)組
3.3.1 數(shù)組對象 var szdx= [{"":"","":""},{"":"","":""}]
3.3.2 對象數(shù)組 var zifu = {["","","",""]}
4、對js的data做操作
4.1 了解data
data是當(dāng)前js文件的數(shù)據(jù)存儲，也就是說在同名的wxml和js中靠data來進(jìn)行傳輸數(shù)據(jù)
4.2 data的初始值
js代碼
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
num:1
},
這樣就初始化num的值為1
4.3 data的取值
在js中 用this.data.num 取data里面num的數(shù)據(jù)
在wxml中 用 {{num}} 取data里面num的數(shù)據(jù)
4.4 data的賦值
只能在js文件中對data里面的數(shù)據(jù)進(jìn)行賦值
賦值方法
this.setData({
num:2
})
這樣就可以對data里面的num進(jìn)行賦值了，注意，setData是會刷新頁面數(shù)據(jù)，也就是說 當(dāng)num默認(rèn)為1的時候，wxml用{{num}} 展示的數(shù)據(jù)是1，當(dāng)點擊按鈕執(zhí)行事件的時候，對num進(jìn)行setData修改成2，那么頁面展示的數(shù)據(jù)會從1變成2
demo代碼如下
wxml代碼
<view>{{txt}}：{{inputValue}}</view>
<input class="border_black" bindinput="input" bindfocus="focus" bindblur="blur" bindconfirm="confirm" placeholder="輸入框的提示"/>
js data代碼
data: {
txt:"默認(rèn)的數(shù)據(jù)為",
inputValue:"我現(xiàn)在是空的值",
},
js input 事件方法
input: function (e) {
console.log("我是輸入時觸發(fā)事件")
var value = e.detail.value//取輸入框的值
var txt = "您輸入的值為"
this.setData({
inputValue: value,
txt:txt
})
},
tip: 1、console.log()是打印日志，如果要加上數(shù)據(jù)一起打印 中間用逗號鏈接起來 不要用加號鏈接起來 2、微信小程序的數(shù)據(jù)類型我已經(jīng)展示出來了，不會對數(shù)據(jù)做操作的童鞋可以看這個》傳送門 3、學(xué)習(xí)任務(wù)：在A頁面用輸入框輸入數(shù)據(jù)hello world 然后 傳到B頁面 在B頁面展示 hello world 4、學(xué)習(xí)提示：頁面帶參數(shù)跳轉(zhuǎn)在第一篇的額外學(xué)習(xí)里面，本篇學(xué)了從輸入框里面取值和賦值的方法，唯一的問題就是不會在B頁面取值，這是問題嗎？當(dāng)然不是，請看->傳送門4、this.setData 是在部分的條件下無法使用的，比如發(fā)起request請求的時候，會報錯 this.setData is not a function這個錯誤，錯誤的原因是：this不再是指向這個js文件了，而是指向request請求，所以setData is not a function ，解決辦法也很簡單，在request之前把this賦值給that（var that = this） 然后在request中用that.setData就可以解決啦 |
