熱騰騰的第二篇來啦~沒錯就是第二篇

名字神馬的就叫第二篇 才不是因為我想不出來叫啥呢

在上一篇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="http://www.wxapp-union.com/輸入框的初始值"/>

效果圖如下

事件方面的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ā)事件")

  }

運行的效果，需要各位童鞋自己進行運行測試了。順便說一句，點擊完成按鈕時觸發(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來進行傳輸數(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ù)進行賦值
          賦值方法

          this.setData({

               num:2

          })

          這樣就可以對data里面的num進行賦值了，注意，setData是會刷新頁面數(shù)據(jù)，也就是說 當(dāng)num默認為1的時候，wxml用{{num}} 展示的數(shù)據(jù)是1，當(dāng)點擊按鈕執(zhí)行事件的時候，對num進行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:"默認的數(shù)據(jù)為",

    inputValue:"我現(xiàn)在是空的值",

  },
          js input 事件方法


input: function (e) {

    console.log("我是輸入時觸發(fā)事件")

    var value = http://www.wxapp-union.com/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就可以解決啦

5、如有遇到新問題，可以在下方留言或者加QQ群437729329 進行咨詢