post.wxml檔案：
post.wxss檔案：
運作結果：
json配置檔案的官方參考文檔：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html">https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html</a>
注：除了app.json之外的json檔案都隻能配置window屬性，由于隻能配置window屬性是以就不需要顯式标明了，直接設定window中的屬性+值即可。
建構一個簡單的新聞清單示例：
post.json檔案：
小程式中的js檔案結構與我們平時在web前端開發中的js檔案有些差别，在小程式中需要把變量、函數等代碼寫到Page( )裡。有點像json注冊資訊一樣，在格式上也有點像，以下是小程式工具自動生成的js檔案代碼：
從以上生成的代碼可以看到，所有的函數都寫在Page裡，而且如果js檔案中沒有這個Page就會報錯，是以即便不寫代碼也要寫個空Page在那。
官方給出的關于page頁面生命周期的文檔：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html">https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html</a>
在實際開發中，我們的資料都是需要臨時從伺服器上download下來的，例如在web開發中我們都是通過JavaScript腳本代碼去請求伺服器，得到伺服器傳回的資料然後将其在頁面上顯示出來，在小程式中也是如此。
在小程式中擷取腳本檔案的資料是通過資料綁定的機制來擷取的，不需要像web中那樣通過getElementById函數來獲得元素對象，然後再設定到元素上，例如：
然後在wxml中通過兩個大括号就可以獲得值了：
注：在小程式中，這種資料綁定是單向的。
現在我們就可以把資料都轉移到js檔案中，然後通過資料綁定機制來在xwml中獲得資料：
post.js代碼：
post.wxml代碼：
從以上兩個對應的代碼片段可以看到，資料綁定機制的友善之處。
注意：我們都知道在一些标簽的屬性上需要提供布爾類型的值，例如，之前提到過swiper的vertical屬性，但是有時候會遇到明明給的值是false，卻依舊還是垂直滾動，這是因為給的并不是布爾值，而是一個false字元串，在小程式中隻要字元串不為空都會被認為是true，解決這種問題就需要使用資料綁定的文法來設定值：
關于嵌套資料的拿值方式：
在設定資料屬性的時候可以把一組同類的資料都設定在一個資料裡形成一個數組形式，例如我把設定照片路徑資料的屬性都統一寫在img屬性裡：
拿值的時候通過通路符 . 來通路就可以了， 例如：父屬性.子屬性 就可以了：
控制一個标簽顯示/隐藏的文法：
小程式裡有一個文法可以控制标簽的顯示或隐藏：
使用資料綁定機制：
運算：
在兩個大括号中可以進行一些簡單的運算，例如：數值型的資料可以進行算術運算，字元串則可以進行字元串連接配接運算等。
簡單的加法運算示例：
以下是官方的參考文檔：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html">https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html</a>
以上我們雖然通過資料綁定解決了動态加載伺服器資料的問題，但是還有一個問題就是元件代碼重複太多，因為上線使用後不可能隻有兩篇文章，會有很多篇文章。如果每一篇文章都得重複的去拷貝相同的代碼就有點麻煩了，是以我們還需要解決這個代碼重複的問題——使用for循環：
1.首先将js檔案中的資料整合成一個數組：
2.使用for循環來進行資料綁定：
注：wx:for-item和wx:for-index不設定也可以，因為預設值就是item和index，直接用就可以了。
可以看到以上示例使用循環後就減少了很多重複性的代碼。
到目前為止，我們就編寫好了兩個頁面——啟動頁面和新聞清單頁面，現在我們需要通過小程式的事件機制，讓我們點選啟動頁面的時候，就能夠進入到新聞清單頁面。
以下是官方給出的事件使用文檔：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html">https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html</a>
我們需要用到的事件是 tap ，這個事件相當于html中的click事件。小程式中有個規定，需要在事件名稱前加上bind或者catch。例如我要使用tap事件，那麼就需要在前面加上bind或者catch，結合起來就是bindtap或catchtap。
示例：
welcome.wxml檔案代碼：
welcome.js檔案代碼：
編寫完以上代碼後，就可以點選啟動頁中的view元件跳轉到新聞清單頁面了。
redirectTo方法是重定向方式的跳轉，這種方式的跳轉是完全跳轉到另一個頁面中，由于重定向跳轉會解除安裝掉目前頁面，這個過程會觸發Page生命周期中的Unload事件。示例：
從運作結果可以看到，沒有傳回上一級頁面的按鈕
控制台列印結果：
unloading this page
另一種跳轉方式是使用navigateTo方法進行跳轉，這個方法隻會導航到另一個頁面，目前頁面隻是隐藏掉，是以跳轉之後還可以傳回上一級頁面，同樣的這個過程也會觸發相應的事件，這個事件就是onHide事件。示例：
hideing this page
以上示範的navigateTo方法隻是部分結構，完整的結構如下：
注：redirectTo方法也是一樣的，完整結構也是會有三個回調函數。
冒泡事件與非冒泡事件的差別：
冒泡事件就是當父節點和子節點都有監聽事件時，觸發子節點的事件也會一并觸發父節點的事件。但是觸發父節點的事件并不會觸發子節點的事件，這種機制就是冒泡事件，示例：
wxml代碼：
js代碼：
觸發子節點的事件後控制台的列印結果：
excute onSubTap excute onContainerTap
觸發父節點的事件後控制台的列印結果：
非冒泡事件則是反之，觸發子節點的事件并不會觸發父節點的事件。
在小程式中，我們可以阻止事件的冒泡，讓原本有冒泡性質的事件指定為非冒泡性質，方法也很簡單，就是把bind改為catch即可，示例：
js代碼不變，觸發子節點的事件後控制台的列印結果：
注：在小程式中，絕大多數的事件都是冒泡事件。
本文轉自 ZeroOne01 51CTO部落格，原文連結：http://blog.51cto.com/zero01/2058435，如需轉載請自行聯系原作者