微信小程式從2016年9月21日開始内測 ，以及在2017年1月9号正式釋出也有一段時間了， 很多人開始擁抱微信小程式，我也是一樣 ，從微信小程式内測開始就加入進來 ， 開始研究微信小程式 ，屬于最早的一批小程式開發者 ，但是由于小程式釋出後一直不溫不火，以及在工作中也沒有這方面的需求，所有本人也沒有在這方面投入太多的時間， 這裡貼一下我開源的一個小程式知乎日報，這是一年前寫的了 ， 當時也是花了很多的時間去研究，前幾天對這個小程式進行了一些修改，也算是重新開始擁抱微信小程式 ， 這幾天公司也是有這個需求 ， 是以 ， 覺得有必要開始對微信小程式的開發做一些總結以及記錄，一方面是通過總結和記錄自己可以梳理一些相關的知識點 ，以及友善有這方面需求的開發者共同學習和進步。
這是一篇微信小程式開發總結記錄， 打算分兩篇來寫， 在開發中遇到的相關知識點以及難點都會記錄下來 ，會長期更新
本篇文章以實用為主，是以不會長篇大論 ，隻是簡單的記錄總結 ， 詳細的還需要大家檢視微信官方文檔
關于小程式的申請和詳細文檔請大家移步
https://mp.weixin.qq.com
https://mp.weixin.qq.com/debug/wxadoc/dev/index.html
事件參數傳遞
通過data-hi形式 ，如
Click me!
如果是data-status-show="0"形式 ，參數會轉換成statusShow形式
通過e.target.dataset.hi或者e.currentTarget.dataset.hi擷取傳遞過來的參數
這裡target和currentTarget是有差別的，涉及事件的冒泡 ，具體可檢視官方文檔https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
延伸 ：
以上可以看出點選事件使用bindtap
然後在Page裡面定義方法
Page({
tapName: function(event) {
console.log(event)
}
})
事件分類
事件分為冒泡事件和非冒泡事件：
冒泡事件：當一個元件上的事件被觸發後，該事件會向父節點傳遞。
非冒泡事件：當一個元件上的事件被觸發後，該事件不會向父節點傳遞。
事件清單
touchstart 手指觸摸動作開始
touchmove 手指觸摸後移動
touchcancel 手指觸摸動作被打斷，如來電提醒，彈窗
touchend 手指觸摸動作結束
tap 手指觸摸後馬上離開
longpress 手指觸摸後，超過350ms再離開，如果指定了事件回調函數并觸發了這個事件，tap事件将不被觸發 1.5.0
longtap 手指觸摸後，超過350ms再離開（推薦使用longpress事件代替）
transitionend 會在 WXSS transition 或 wx.createAnimation 動畫結束後觸發
animationstart 會在一個 WXSS animation 動畫開始時觸發
animationiteration 會在一個 WXSS animation 一次疊代結束時觸發
animationend 會在一個 WXSS animation 動畫完成時觸發
注：除上表之外的其他元件自定義事件如無特殊申明都是非冒泡事件，如form的submit事件，input的input事件，scroll-view的scroll事件
綁定事件的寫法
事件綁定的寫法同元件的屬性，以 key、value 的形式。
key 以bind或catch開頭，然後跟上事件的類型，如bindtap、catchtouchstart。自基礎庫版本 1.5.0 起，bind和catch後可以緊跟一個冒号，其含義不變，如bind:tap、、catch:touchstart。
value 是一個字元串，需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。
bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。
資料綁定
簡單的資料綁定
{{ message }}
對應data中定義的資料
Page({
data: {
message: \'Hello MINA!\'
}
})
資料動态指派
this.setData({
time: e.detail.value
})
其中time是對應data中定義的字段
如果這裡的time我們需要通過參數形式傳遞怎麼辦呢，例如 ， 我們有多個input輸入框需要校驗，當離開input框時， 根據資料判斷輸入的合法性，
并且需要修改input輸入框數值，我們通過監聽bindblur事件，擷取目前輸入框的id ， 然後通過es6方式進行指派：
this.setData({
[id]: e.detail.value
})
延伸 ：
動态樣式修改
在微信小程式中 ，由于 并不能用js或者jq 輕輕松松一行代碼搞定，或者用removeClass addClass 來修改樣式
以下是一種動态修改樣式的方法，原理是綁定資料，然後動态的修改資料，進而實作動态樣式的改變
<view style="text-align: center;">
<label style="color:{{color}};">我會變色</label>
<button bindtap="clickRed">變紅</button>
<button bindtap="clickgreen">變綠</button>
</view>
Page({
data: {
color: "red"
},
clickRed: function () {
this.setData({
color: "red"
})
},
clickgreen: function () {
this.setData({
color: "green"
})
}
})
背景圖檔不能使用本地資源
由于小程式體積比較小，是以微信在有些地方做了一些限制， 比如我們設定背景圖檔無法使用本地資源
background:url(\'../images/icon.png\')
微信要求隻能使用網絡圖檔或者轉碼成base64（圖檔路徑會很長很長），或者使用images标簽代替
感覺挺扯淡的 ， 我們都知道在開發中使用background設定背景圖檔是最理想的方式 ，比images要好要友善
由于base64轉換的位址會比較長，是以這裡我們不考慮使用它，那怎麼辦呢 ， 我們網絡圖檔，有很多種方式，
可以把圖檔存儲在我們自己的伺服器上面，或者存儲在七牛雲上面。
表單資料送出
一般我們在使用Vuejs以及reactjs等MVVM架構的使用，是支援資料雙向綁定的 ， 也就是我們input輸入資料的時候，是實時
反應在data字段資料中的 ，但是微信小程式并不支援這樣 ， 那麼問題來了， 在微信小程式中如何擷取使用者輸入的資料呢 ，
有2種方式 ， input提供bindinput和bindblur事件，可以監聽input輸入的資料以及當滑鼠離開input框時候擷取到他的資料
bindinput輸入監聽事件，使用時如果隻有一兩個表單還好，但是如果有很多表單那肯定不行，需要監聽每一個input的輸入事件
bindblur事件滑鼠離開input框事件 ， 使用它時必須要主動離開輸入框，但是會存在使用者輸入完之後直接點選送出按鈕，這種情況
也不能正常擷取到使用者輸入的資料， 是以也不可行 。
後來，才發現， 微信給我們提供了form表單送出的方式， 簡言之，就是點選送出按鈕後 ，可以擷取到全部的input資料
使用方式 ：
<form bindsubmit="doCalc">
<view class=\'flex calc-input-item\'>
<view class=\'flex-item title\'>日單量（單）</view>
<view>
<input type=\'digit\' name=\'dailyBillCount\' maxlength=\'8\' value="{{dailyBillCount}}"></input>
</view>
</view>
<view class=\'calc-btn\'>
<button type=\'button\' class=\'btn\' formType="submit">試算</button>
</view>
</form>
button中的formType="submit"會綁定form中的bindsubmit事件，執行它的方法
然後通過e.detail.value擷取到所有的input資料（在input中設定name屬性）
還有一個reset清空方法 ，用法也是一樣的，通過設定button的formType=“reset”，點選按鈕時會綁定form的bindreset事件
延伸 ：
在使用中發現這樣一個問題， 使用button标簽時， 我們自定義樣式，button會有一個預設的邊框樣式，試過多種方法都無法去掉
設定border:none ;或者更改border的邊框顔色border:10rpx solid yellow;都無法解決
送出
最後發現是由于它設定的position：relative受到的影響 ，修改position的值就可以，但是最終還是發現有其他地方受到了影響 。
很無奈，最終放棄使用它的button ， 直接通過view标簽來設定button ， 由于沒有使用button，是以也不能使用form送出 資料，
隻能是在input輸入資料比較少的情況下還行 ，這個需要視情況而定 。
--------2017.11.16更新
之前沒有仔細看 ，原來是定義了button::after僞元素
這樣的話，那我們修改下他的僞元素設定display: none;問題就解決了
.about-btn:after {
display: none;
}
以後可以愉快的使用它的button了
作者：fozero
聲明：原創文章，轉載請注明出處，謝謝！http://www.cnblogs.com/fozero/p/7842197.html
标簽：微信小程式