小程序模板網(wǎng)

ETL小白教學(xué)第二篇---動態(tài)傳值

發(fā)布時間:2018-04-25 10:26 所屬欄目:小程序開發(fā)教程

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

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

在上一篇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="輸入框的初始值"/>

效果圖如下 OAD6{FQEV0}V6PB81WY[I4B.png

事件方面的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就可以解決啦



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24027.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢