微信小程序開發備忘
前言
從去年一月份微信宣告要做小程序時的圈子裏已經有了局部躁動，去年九月內測時，更是全民熱捧，似乎張曉龍和他的微信已經準備好再一次改變世界。還好微信比它的粉絲們要理智的多，不做分發，不搞渠道，不發“紅利”，所以，昨天正式發布時，也並沒有想象中的所有人一起迎接新世界到來的景象。OSC上有人發帖問“微信小程序就要發布了,大家激動嗎”，底下居然都已經有人開噴了。。
但是，話說回來，從技術角度看，微信為我們提供了基於微信本身的新應用場景下的新技術，那麽作為一個開發者，對他有所了解還是有必要的。對於一個新技術，對其建立一個相對清晰的概念是最重要的事情，因為有了一個大概的印象之後，任何程序員都可以很快的學習和進步。因此，這篇文章，我不會照抄文檔，也不會講一些“高深”的東西，我們來解決初次接觸無從下手的問題。學習怎麽做出“HellWorld”
開始前的準備
微信小程序官網：微信小程序官方網站
微信小程序開發工具下載地址：微信小程序下載地址
使用微信小程序開發工具
登錄並創建項目
下載並安裝微信提供的微信小程序開發工具之後，我來學習如何使用它。
登錄界面
首先是登錄界面，這裏我們需要掃描二維碼進入，即使我們沒有在微信公眾平臺上申請註冊小程序，也是可以掃描登陸的，所以，無需擔心，直接用自己的微信掃描並登錄即可。
然後在接下來出現的界面中，點擊加號圖片來建立我們的項目。
創建項目
創建項目
這裏有幾點需要註意：
如果已經申請到了小程序權限，那麽直接填對應的Appid即可，如果沒有的話直接點擊無AppID選項，則可以創建本地項目。
微信Web開發者工具在創建項目的時候不會創建跟項目同名的項目文件夾，所以項目文件夾請提前手動創建好
不要為了圖方便直接創建項目到桌面，mac版的開發工具無法在桌面創建項目。
最後的創建quickstart項目如果勾選的話，微信會在項目初始化後創建一個登錄界面和打印日誌的界面，是否勾選看個人意願。初次使用的同學建議勾選上，可以更方便的對小程序有個初步認識。
認識開發界面
開發工具界面
項目創建完畢後，呈現給我們的就是主界面了。先說明一下左側四個按鈕的含義
編輯：主要的開發界面，提供效果預覽，代碼編輯器,並可以對項目配置文件編輯，添加，刪除和管理
調試：主要的調試界面，提供效果預覽，代碼編輯器，控制臺輸出，斷點調試，性能監控等功能
項目：項目的總體設置
關閉：關閉項目
認識項目結構
初始化項目目錄
上圖紅色方框圈中的地方就是我們初始化之後的項目目錄。
其中app.js，app.json和app.wxss文件時屬於整個項目的全局文件。
app.js：我們在這裏註冊程序，並將對程序做初始化的操作放在這裏，做iOS的同學可以認為這就是AppDelgete文件
app.json：我們在這裏對App進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多tab等
app.wxss文件：全局的樣式文件，你可以認為就是微信版的css文件，實際用法也和css幾乎一樣
接下來是頁面的結構，微信小程序中每個頁面對應四個文件，分別為.js.json.wxml和.wxss
.wxml文件是布局文件，實際上接觸過reactnative的同學一眼就發現了，微信采用了和rc相似度極高的JSX語法，剛開始可能看著別扭，但實際學習成本很低，很快就可以上手。
對於每個頁面，.wxml文件和.js文件都是必須的，其他兩個則可有可無，如果有的話在選擇樣式或者配置時優先使用和自己同名的文件裏的配置。
需要特別說明的是，如果不打算給頁面寫單獨的配置文件，不要創建空白的.json文件，會導致頁面路徑查找失敗。
修改布局文件
之前說了那麽多概念，記不住也沒關系，我們接下來通過動手來熟悉他們。
首先我們來試著添加代碼“index.wxml”這個文件。
點擊左側的編輯按鈕，在右側的文件目錄中找到index.wxml文件，然後隨便寫幾句.
微信小程序提供的組件還是相對比較豐富的，具體支持的組件大家可以移步文檔查看。
代碼寫完之後直接cmd+s保存就可以刷新預覽視圖，實時查看效果，很方便
基本語法也很簡單，大家應該一看就會。
<text>這是一個文本</text>
組件之間可以相互嵌套，也就是說願意的話，你可以這麽寫
<button>
<button>
<button>
<button>這是一個按鈕</button>
</button>
</button>
</button>
只不過看起來很奇怪罷了
組件嵌套
綁定數據和事件
如果將微信小程序開發類比為iOS開發的話，.wxml文件就相當於.xib，而.js文件就相當於.m文件。這裏的數據綁定其實就是在js中為.wxml中聲明的變量提供數據，而事件綁定就是在js中實現.wxml文件中聲明的方法。
我們先來看看數據綁定的例子。
我們在index.wxml文件裏隨便找個地方書寫如下代碼：
<text>hello{{name}}</text>
這裏這個name就是我們聲明的數據，在申明時，我們需要用一種稱之為Mustache的語法，不知道這是什麽無所謂，記住在兩邊加上兩個大括號就行了。而這個數據我們需要在.js中提供。我們打開index.js，找到page下的data：{},在其中添上一行name:"小明同學"
Paste_Image.png
然後cmd+s保存，看下預覽視圖，是不是出現了“hello小明同學”.
提供綁定的數據
這裏的page我們一會就會說，而這個data你可以認為就是用來提供數據源的，我們在.wxml中綁定的動態數據都來自對應page的data。
接下來我們來實現事件的綁定
我們再在index.wxml中隨便找個地方,書寫如下代碼：
<buttonbindtap="ToNewPage">跳轉新界面</button>
這句話的意思就是我們創建了一個按鈕，並給它綁定了一個叫做“ToNewPage”的點擊方法。
bingtap即為button控件的點擊方法
接下來我們要來實現這個方法，依然是在index.js裏的page中添加，我們在data下面另起一行，寫下如下代碼
ToNewPage:function(){
wx.navigateTo({
url:‘../welcom/welcom‘,
success:function(res){
//success
},
fail:function(){
//fail
},
complete:function(){
//complete
}
})
}
實現綁定的事件
我們在事件中寫了一個跳轉新頁面的操作，試圖跳轉到一個位於welcom文件夾下的叫做welcom的頁面，所以，想實現這個操作，我們還得先創建welcom頁面。
wx.navigateTo()方法是微信提供的跳轉頁面的API，這種大量回調的編程風格，如果接觸過Node.js或者Rect的同學可能比較熟悉。不熟悉的同學可以移步這裏做個學習
創建新頁面
前面已經說過，微信小程序的每個頁面都需要四個文件，再加上微信小程序的定位決定了他不會有很多頁面和很復雜的目錄結構，所以，建議每個頁面單獨新建一個文件夾，方便管理。
還是在編輯模塊，開發工具已經很貼心幫我們做好了創建文件夾或者對應格式文件的功能，但是這裏需要註意的是，在創建四個個文件的時候，務必保證除後綴外名稱一致。
創建文件
創建好後的文件如下所示
welcom
之前我們說過，.json是配置文件，.wxss是樣式文件，是非必須的，尤其是.json文件，如果不需要額外配置該頁面，最好不創建，如果你不小心創建了，請務必保證文件裏至少有個{},否則編譯器會報錯。
創建完之後，我們還要做以下兩件事：
1.配置文件路徑。如果不配置路徑的話，則無法跳轉到此頁面。打開app.json文件，在pages數組中添加一行welcom的路徑，添加後如圖所示
配置路徑
2.註冊頁面。如果不註冊頁面的話，編譯器會報警"XXXX出現腳本錯誤或者未正確調用Page()"。打開welcom.js，在裏面書寫如下代碼。
Page({
data:{
},
onLoad:function(options){
//頁面初始化options為頁面跳轉所帶來的參數
},
onReady:function(){
//頁面渲染完成
},
onShow:function(){
//頁面顯示
},
onHide:function(){
//頁面隱藏
},
onUnload:function(){
//頁面關閉
}
})
這個例子寫的很長，裏面包含了page所有的生命周期函數，如果你不想寫這麽多的話。你只需要寫
Page({
})
這樣就可以完成頁面的註冊，然後之後再根據你的需要去寫具體的代碼。
這裏請註意方法名的大小寫，是Page不是page。
然後我們重新刷新頁面，再次點擊我們在index.wxml中寫的按鈕，會發現它直接就調轉到了新寫的頁面。
到此為止，我們同時完成了新頁面的創建和跳轉以及事件的綁定。在.wxml文件中，還有列表渲染，條件渲染之類的概念，大家可以移步文檔自行查看，基本概念大同小異。
接下來我們來看最後一部分，也是我們還沒用到的.wxss文件。
樣式
上面也說過，.wxss文件就是微信版的css，而且和傳統css用法基本一模一樣。也同時支持方便快捷的內聯式的寫法，和使用.wxss樣式表文件來統布局的方法。優先級方面：內聯>.wxss>app.wxss
在選擇器方面的支持也比較全面，因此這裏就不在展開講，大家自行查看文檔即可。
結束語
不管小程序會不會像之前人們吹捧的那樣改變世界，至少，從開發者的角度講，從完善的文檔到量身定做的開發工具，微信這次真的是誠意滿滿。尤其是開發文檔方面，應該是我見過的最清楚，最完善的開發文檔了。因此，這篇文章就像前面所說，希望能幫大家解決一開始的無從下手的問題。等對微信小程序開發整體有了一個概念之後，配合詳細的官方文檔，開發微信小程序對每個開發者都不算難事。
最後，祝大家玩的開心。
如果我的文章幫到了您，請點贊或評論。如有不足之處，歡迎指出。
本文純屬原創，轉載請註明出處。
試試新東西?著作權歸作者所有舉報文章
關註_奔跑的炸雞
寫了22617字，被576人關註，獲得了765個喜歡
你問我要去向何方我指著大海的方向
如果覺得我的文章對您有用，請隨意贊賞。您的支持將鼓勵我繼續創作！
作者：_奔跑的炸雞
鏈接：http://www.jianshu.com/p/08d6cf179fd9
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
微信小程序開發備忘