事件綁定

相似於web開發中的 onclick，微信開發者工具中使用的 bindtap,bindinput之類的方法，其實都是封裝的JavaScripthtml

經過實驗探究數據傳遞方法

寫一個input標籤能夠輸入數據，此時input標籤綁定一個handleInput JS函數，
咱們往輸入框中輸入數據，在控制檯中返回參數查看參數內容
WXMLpython

<input clss="input" type="text" bindinput="handleInput"></input>

WXSSweb

handleInput:function(e){
 
    console.log(e)
  },

控制檯顯示


因而乎能夠判定數據value在detail中，嘗試在控制檯打印出e.detail.value

果真輸入的事實數據就在 e.detail.value中，此時把num的數值和value同步，那麼就能夠事實更新數據了。編程

WXML小程序

<input clss="input" type="text" bindinput="handleInput"></input>
<view>{{num}}</view>

JS微信小程序

handleInput:function(e){
 
    console.log(e.detail.value)
    this.setData({
      num:e.detail.value
    })
  },

微信小程序中的參數傳遞

<button bindtap="handletap" data-operator="{{1}}">+</button>
<button bindtap="handletap" data-operator="{{-1}}">-</button>

handletap:function(e){
 
    console.log(e)
    
  },

仍是經過上面的方式在控制檯中找一下 定義的data-operator在currentTarget中的dataset裏面，爲了實現觸發+事件讓num+1，咱們能夠再在handletap
裏面寫一個dataset，讓num與咱們傳遞的參數operator相加。從長遠看這個自定義屬性來傳遞參數讓編程變的更加靈活。微信

handletap:function(e){
    var operator=e.currentTarget.dataset.operator;
    this.setData({
      num:this.data.num+operator
    })
    
  },

樣式導入

語法格式
在相應的WXSS文件中寫入 @import 「相對路徑」;網絡

惟一能夠長按複製的text標籤

在text標籤中能夠設置一些屬性，讓用戶長按複製，也是惟一的一個微信開發標籤能夠支持這個功能的。
微信開發

image圖片標籤

1.src指定圖片的路徑可使本地也能夠是網絡加載圖片(上傳圖片大小不得超過2M，本地圖片最好是用jpg文件，而png是無損無壓縮圖片格式不推薦使用)圖片的默認大小是320X240的大小，個人圖片大小是285X183

2.mode決定圖片的內容如何和寬高作適配

scaleToFill 不按照原圖像的橫縱比例放縮圖片，填滿image的大

aspectFit 保持寬高比例，確保圖片的長邊露出來，經常在頁面輪播中使用

aspectFill 保持寬高比例的，確保圖片的短邊顯示，不常使用

widthFix 寬度設置了之後，高度按照比例本身調整，經常使用

bottom 相似於之前的background-positio

3.小程序當中的圖片支持懶加載 lazy-load會本身判斷當出如今視口上下三屏高度的時候本身開始加載

swiper等比例計算高度的方法

首先去準備一些素材，到天貓上的輪播器找3張圖片，copy一下路徑，而且咱們能夠看到圖片的大小是720X296的。如何把每一張圖片，按照適合的比例放到個人輪播器裏面呢，實際上是有計算公式的
svg

<swiper>
  <swiper-item ><image src="https://aecpm.alicdn.com/simba/img/TB1U5ElLFXXXXavXVXXSutbFXXX.jpg"></image></swiper-item>
  <swiper-item ><image src="//img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"></image></swiper-item>
  <swiper-item ><image src="//img.alicdn.com/tps/i4/TB18o6AMXXXXXahXVXX6o7KSVXX-730-300.jpg"></image></swiper-item>
</swiper>

效果並不太好，不能徹底展示出比例，看不上去不舒服

計算方法

swiper寬度 / swiper高度=原圖的寬度/原圖的高度
能夠獲得
swpier高度=swiper寬度X原圖的高度/原圖的寬度
swiper的寬度是100%也就是 100vw，
原圖高度=296px
原圖寬度=720px
swiper高度=100vw*296/720
這裏又會涉及到一個語法就是在web開發和小程序開發中都有的一種自動計算寬高的方式 calc(表達式)
WXSS

swiper{
  width: 100%;
  height: calc(100vw*296/720);
}
image{
  width: 100%;
}

WXML

<swiper>
  <swiper-item ><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1U5ElLFXXXXavXVXXSutbFXXX.jpg"></image></swiper-item>
  <swiper-item ><image mode="widthFix" src="//img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"></image></swiper-item>
  <swiper-item ><image mode="widthFix" src="//img.alicdn.com/tps/i4/TB18o6AMXXXXXahXVXX6o7KSVXX-730-300.jpg"></image></swiper-item>
</swiper>

效果展現，720X296的圖片很舒展的在swiper中打開，顯示一種美感

swiper的一些屬性

1.autoplay自動輪播

2. 自定義輪播時間 通常是以毫秒爲單位

3.循環播放，若是不設計這個你會發現圖片播放是無序的一旦圖片多了就會很糟糕

4.indicator-dots 顯示面板指示點

5.indicator-color未選中指示器顏色

6.選中以後的顏色indicator-active-color

點擊進入官網學習更多輪播器知識

navigator 導航標籤

1.navigator屬於塊級元素默認換行，能夠直接加寬高屬性

2.url 要跳轉的頁面的路徑 能夠是相對路徑也能夠是絕對路徑

3.open-type跳轉的方式

1.navigate默認值，保留當前頁面跳轉到應用內的某個頁面，可是不能跳轉到tabbar頁面！

2.redirect關閉當前頁面跳轉到應用內的某個頁面，可是不能跳轉到tabbar頁面！

3.跳轉到tabbar頁面關閉其餘的非tabbar頁面

reLaunch 關閉全部頁面打開應用內的某個頁面