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