慚愧，最近下班回家沉迷山口山了，前一陣子搞antlr語法轉換，這一陣子搞微信小程序，一直拖著沒寫點啥，一步一步來吧，肯定都得總結點東西留給自己看的。
我一直是一個Android客戶端開發(fā)，前端經驗只停留在w3cschool上面很基礎的最初版本html,css,js學習，純helloworld水準，就學了不到10分鐘。所以這里也算是給客戶端開發(fā)們打點氣，新的東西阻礙的永遠是你上手的動力，而不是這個東西的難易。順帶強調自己是前端外行，也是希望各位看官關于內容里如果有很多關于前端理解的偏差，幫我指正和修改。
加了一些小程序開發(fā)群，發(fā)現(xiàn)很多常問的問題是：
我的看法是，我反正從來都不是這樣學任何一個新東西的，我就一句話
這也跟個人接觸新東西的習慣有關，反正我是完全不喜歡那種打算學個新東西（注意是’新’東西），然后就問一下有啥經典書籍么？先抱著一本16開，三四厘米厚的一本大厚書，（我習慣叫磚書，很厚很大砸人很疼），看個好幾天一個禮拜的，然后還沒上手?；蛘呗牭絺€新東西技術是html，然后美名其曰技術儲備，倆仨禮拜略微看明白點html，css，但也毫無實戰(zhàn)經驗，倆仨禮拜，連小程序的邊都沒摸到。
對于’新’東西，等系統(tǒng)化的出書，黃花菜都涼了啊，以前搗鼓RN的時候，無數(shù)人問RN有什么好書看，現(xiàn)在RN書停留的版本都是0.2X之前，并且一個個都很淺，現(xiàn)在0.3X已經天翻地覆了，這種啥都等系統(tǒng)化整理文章，做好技術儲備，再開始動手，完全不是我的個人學習風格。
直接上手是最快的，雖然資料少，但是有源碼下，源碼是最好的指導方案，沒源碼，官方文檔，Github交流，網上及時閱讀最新的碎片化博客文章，這些絕對是最快的學習和了解’新’東西的手段。
光讀光看是絕對沒用的，最有效最有效的手段是，直接上手，上項目，哪怕是仿寫一些開放API接口的app（知乎日報，豆瓣電影，有太多開放提供服務器api，讓廣大客戶端開發(fā)者練手的）
以上只是我的個人學習習慣，因人而異
當初RN出來就是這樣一波風氣，小程序出來也是，我對任何這種話題是毫無興趣！這種然并卵的話題，鍵盤俠們熱火朝天討論幾個小時，時間就過去了，然后就可以happy下班了，有這功夫demo都寫出來了，項目都上線了
上面其實也扯了太多的廢話，微信小程序其實有自己的IDE開發(fā)環(huán)境，一切都在這個開發(fā)環(huán)境里面，下載官方IDE開發(fā)包，開始運行，就可以直接開發(fā)預覽小程序了。
但這里有個IDE開發(fā)包破解的問題，小程序目前需要是需要邀請碼的，有邀請碼你就會有屬于你業(yè)務的微信小程序appId，有邀請碼的好處是你可以把小程序部署到真機上，沒有邀請碼，無論你是否破解了IDE，你都無法真機預覽，但是IDE里面的模擬器預覽完全沒有問題，能運行，能實現(xiàn)絕大部分功能，完全可以項目上先開發(fā)起來，等待一旦公測，就直接上線。
先說結論：現(xiàn)在的最新版本IDE，完全不需要破解！
網站首頁
TEL：021-61554458無AppID的按鈕，點了后會得到提示無AppID部分功能受限
首先，感謝@老郭以迅雷不及掩耳盜鈴之神速第一時間破解了微信官方IDE，并且開源提供給大家使用，GitHub weapp-ide crack
因為在早期的版本，微信的IDE，沒有AppID的人是無法體驗的，必須經過破解，才能開始自己寫demo進行練手。而老郭在第一時間破解了IDE，讓所有人能從代碼上第一時間體驗這個神秘的小程序（真機就沒辦法了）
后來倒逼微信官方，把小程序IDE直接開放，才有了上面提到的無AppID模式。
但是，我使用破解IDE的時候，發(fā)現(xiàn)很多人遇到了個問題，按部就班一步一步把IDE破解了，創(chuàng)建新工程的時候，是沒有quickstart這一部的，如果什么都不太懂的人做到這一部，一打開工程，一個文件沒有直接點運行，直接會報錯，什么can not find app.js之類的，context之類的錯誤，我看到這個后，直接從網上順手找個demo（就在老郭的Git里就有）扔到目錄里，就一切運行了。
所以目前我的感受就是，破解倒逼了微信官方開放無AppID體驗，簡直太威武了，但對于經驗尚淺的新手，破解的一大堆東西和步驟，很可能會出現(xiàn)一大堆不知道為啥的錯誤提示的時候，真的不如直接下最新版IDE，不破解直接無AppID體驗。
官方文檔其實內容真的不多，很多東西寫的很淺，光看文檔我是覺得很是吃力，因為很多前端開發(fā)的概念并不深入，很多標簽，css的名字及其陌生，所以輔助上別人的demo食用就很贊
項目基礎文件
getApp()可以獲得app.js的這個app對象。頁面文件
如果一個頁面起名叫HomePage，那么我們就應該自行手動創(chuàng)建3個文件，文件名一致才會被系統(tǒng)正確的識別
還可以有個可選的HomePage.json文件，頁面也是可以擁有自己的.json文件進行一些專屬配置的，但是頁面的json可以配置的字段不如app.json多，職能配置關于本window相關的一些表現(xiàn)，比如
后面開始動手畫UI了，這個我沒有啥教學的，因為上文提供的github各種demo里面豐富多彩的所有組件用法已經夠全的了，我這手把手的教如何寫一個按鈕，如何寫一個text，如何水平排布好幾段文字，這就有點太無腦了。我舉例幾個項目中用到的界面，然后寫點我這個小白在趟出這些界面的時候遇到的一些問題點吧
小程序天然有一套數(shù)據(jù)和UI的綁定機制，在js文件里有如下代碼，在onload里面發(fā)起網絡請求，網絡請求后回來，handleResponse，再之后setData，可以看到這個data其實就是一個vm
當任何時候在js邏輯里面，修改了data，這樣的wxml中，這種就是告訴負責UI的WXML，這塊UI要和bookList這個data里面的一個字段進行綁定，任何時候data發(fā)生了變化，這個UI都會根據(jù)最新的數(shù)據(jù)結果刷新
可以看出來，我的2個頁面，最重要的就是一個書籍詳情Cell，進行復用，避免代碼大量的機械性重復。
模塊化得從3個層面，js，wxss，wxml來說
module.exports就可以封裝js的api模塊提供外部使用@import來把別的文件的樣式，導入全局，這樣各自page都能使用了<template>的方式創(chuàng)建一個模板，模板支持使用data傳入數(shù)據(jù)，我的項目里沒這么使用過，我用的另一種方案<include>他的作用其實只是原封不動的代碼字符串拷貝，會拷貝目標wxml文件里除<template>外所有的標簽，原封不動的拷貝替換到<include>位置（這是純字符串復制，不能支持指定代碼靈活變化，需要靈活變化請使用模板）下面這個代碼就是我的bookCell的wxml代碼，可以看到這里大量使用了進行UI和data的綁定，這樣每次setData，都會讓ui直接生效，但我這里重點給大家看一下關于綁定點擊事件。
官方文檔里面寫的真是比較簡單，bindtap="tapBook"寫好了這一句后，每當這個UI元素被點擊的時候，都一定會觸發(fā)對應page的.js文件中tapBook這個jsfunction，看起來很容易，但傳值呢？發(fā)生點擊我怎么知道點擊的時候是哪個book被點擊了？第幾個本書？書的id是啥？關鍵就在這里
data-sectionIndex="" data-rowIndex=""
這一行給添加了2個屬性，都是以data-開頭，自定義的名字為結束，并且綁定上了2個數(shù)據(jù)（for 循環(huán)的index，for循環(huán)后面說），這樣添加自定義的data-xx屬性就是為點擊事件傳遞屬性的關鍵
這是對應js代碼，當觸發(fā)tapBook的時候，會把event當做參數(shù)傳入，event.currentTarget.dataset.xxx 就能獲取你剛才data-xx綁定的數(shù)據(jù)，我剛才把sectionIndex rowIndex的列表點擊index綁上了，于是通過這個方法取出來了。
切記，你在wxml里幾遍data-xx，寫了大寫英文字母，此處在js里調用的時候被自動全部變成小寫了，你再寫大寫是undefine的
官方文檔里面給了好幾種for循環(huán)的方案，什么 ，都可以綁定上一個js數(shù)組數(shù)據(jù)，然后按著數(shù)組的個數(shù)循環(huán)渲染列表形UI，
這就是一個for循環(huán)創(chuàng)建列表的例子
wx:for的意思是告訴這個內用循環(huán)創(chuàng)建內容，循環(huán)所綁定的數(shù)組是listItem.column_list.book_infowx:for-item的意思是，你在下面寫當次循環(huán)需要用到的具體數(shù)組元素，你起名成listBookItemwx:for-index的意思是，你在下面寫檔次循環(huán)需要用到的數(shù)組下表，你起名成了rowIndex循環(huán)內我include的代碼，就是上文點擊事件傳值介紹的代碼，這時候我們回過頭去看
<text class="novelBookTitleText">[] </text>
<view class="novelBookDesc" data-sectionIndex="" data-rowIndex="" bindtap="tapBook" tapIndex="">
怎么樣，用到listBookItem數(shù)據(jù)在綁定上了吧，用到rowIndex在點擊事件了把，同理可知sectionIndex其實是另外一個我沒展示的外層循環(huán)的wx:for-index定義。
所謂API其實就是，在js文件里，微信也提供了很多native API，以wx.xxx開頭，官方API文檔，包括很多內容，我就不一一舉例了，這里舉例幾個比較重要的分類
可以看出，都是直接跟網絡，跟設備，相關的信息。
我們在小程序mvvm里面已經看到了一段關于wx.request的演示，這里演示一下，界面之間跳轉
wx.nativateTo是有數(shù)量限制的，小程序界面棧層級不能超過5的，所以很多場景可以選擇使用wx.redirectTo
可以看到，界面跳轉通過url跳轉，而傳值也通過url的方式傳值，你傳過去的值會直接寫進onLoad生命周期函數(shù)的options參數(shù)里面，名字和你在url里面寫的是一樣的。
說實話，一直以來都在做客戶端開發(fā)，這種css式的界面開發(fā)模式，實在是太陌生了，css式的思維，css式的嵌套，對一個新手來說有點痛苦。
我的Github上面的小程序Demo 這里面的代碼其實不多，基本上是我們項目的雛形，但最讓我頭疼的就是那些css，我整整寫了一整天，才大約摸到一丟丟前端開發(fā)，css思維的方式方法
這個我也沒啥好說的，畢竟我是大大大大菜鳥，就是多寫寫就有感覺了。
值得一提的是IDE對于WXSS文件里，css的代碼補全非常贊，各種都能第一時間補全，對于我這個根本記不住那么多css名字的新手來說，這個實在是太好了。
另外，完全支持- position: absolute和- position: relative的絕對坐標布局，也完全支持flexBox的彈性盒子布局，和我一起的小伙伴表示，基本上大部分的css都是直接可以用，我把線上項目遷移到wxss的時候也感覺到了，打開chrome的debug模式，照著線上wap站，原封不動的照著寫css布局參數(shù)，基本上沒有任何問題
大家玩起來就知道了，微信小程序的調試模式，和chrome的debug模式一模一樣，其實這個ide就是拿nw.js寫的，里面是一套webkit，源碼里面就有chrome的debug’tool的js代碼哈哈
關于這個小程序底層是如何運作的，在剛出的第一天，就引來無數(shù)的遐想，wx獨有的wxml wxss到底是拿什么做的？到底是不是h5?到底能不能做成native體驗？無數(shù)人都在猜測。
在最開始的時候，ide被破解，并且被證實ide是基于webkit做的，很多人猜微信在真機上就是webview啦（后面事實證明，目前也還真是）
但我當時就覺得這其實說明不了啥，wx特別抽象出來的 wxml結構，就是想定義一個獨立出來的獨有抽象層，他雖然目前把這個抽象層（一種自己獨有的vdom結構？我是前端新人，不一定對哈），最后又重新通過編譯轉成了html，最后交給webview來展現(xiàn)（輔助綁定上了一些native插件，比如wxapp里面的視頻，tab，navi，input keyboard，map等等，都是通過addsubview的方式直接add到UI/WKwebview上的）
但是這并不代表，這樣的架構就是依賴在webkit，和webview的，完全獨有的抽象中間層vdom，就是為了擺脫對webkit的依賴，未來可以很輕松的切換底層架構，直接切換成reactnative or weex 那樣的vdom + native渲染的模式，這樣就沒了webview的依賴，（雖然現(xiàn)在選擇的方案，是又繞路回到了html和webkit，但依賴和選擇權已經牢牢攥在了自己手里）
微信小程序開發(fā)人員回答渲染機制
這篇文章看起來官方人員態(tài)度有點遮遮掩掩，含糊其辭，通篇都沒直指要害-如何渲染，但我覺得解讀一下，是這樣的潛臺詞（開玩笑！莫噴：我們很高大上，我們抽象了很多東西，其實我們還是主要用webview渲染，輔助了很多native，就是不太好意思這么直白的說出來）
但我特別認可微博上的這個回答
