前言

慚愧，最近下班回家沉迷山口山了，前一陣子搞antlr語法轉(zhuǎn)換，這一陣子搞微信小程序，一直拖著沒寫點(diǎn)啥，一步一步來吧，肯定都得總結(jié)點(diǎn)東西留給自己看的。

新技術(shù)嘗鮮

我一直是一個Android客戶端開發(fā)，前端經(jīng)驗(yàn)只停留在w3cschool上面很基礎(chǔ)的最初版本html,css,js學(xué)習(xí)，純helloworld水準(zhǔn)，就學(xué)了不到10分鐘。所以這里也算是給客戶端開發(fā)們打點(diǎn)氣，新的東西阻礙的永遠(yuǎn)是你上手的動力，而不是這個東西的難易。順帶強(qiáng)調(diào)自己是前端外行，也是希望各位看官關(guān)于內(nèi)容里如果有很多關(guān)于前端理解的偏差，幫我指正和修改。

加了一些小程序開發(fā)群，發(fā)現(xiàn)很多常問的問題是：

• 我想上手小程序，需要先學(xué)啥語言，先學(xué)習(xí)html css js嗎？
• 小程序是用js開發(fā)嗎？那我是不是要去先學(xué)js？
• 想上手學(xué)小程序，需要什么知識儲備嗎？

我的看法是，我反正從來都不是這樣學(xué)任何一個新東西的，我就一句話

• 直接開干啊!遇到啥問題再具體查啥問題。

這也跟個人接觸新東西的習(xí)慣有關(guān)，反正我是完全不喜歡那種打算學(xué)個新東西（注意是’新’東西），然后就問一下有啥經(jīng)典書籍么？先抱著一本16開，三四厘米厚的一本大厚書，（我習(xí)慣叫磚書，很厚很大砸人很疼），看個好幾天一個禮拜的，然后還沒上手。或者聽到個新東西技術(shù)是html，然后美名其曰技術(shù)儲備，倆仨禮拜略微看明白點(diǎn)html，css，但也毫無實(shí)戰(zhàn)經(jīng)驗(yàn)，倆仨禮拜，連小程序的邊都沒摸到。

對于’新’東西，等系統(tǒng)化的出書，黃花菜都涼了啊，以前搗鼓RN的時候，無數(shù)人問RN有什么好書看，現(xiàn)在RN書停留的版本都是0.2X之前，并且一個個都很淺，現(xiàn)在0.3X已經(jīng)天翻地覆了，這種啥都等系統(tǒng)化整理文章，做好技術(shù)儲備，再開始動手，完全不是我的個人學(xué)習(xí)風(fēng)格。

直接上手是最快的，雖然資料少，但是有源碼下，源碼是最好的指導(dǎo)方案，沒源碼，官方文檔，Github交流，網(wǎng)上及時閱讀最新的碎片化博客文章，這些絕對是最快的學(xué)習(xí)和了解’新’東西的手段。

光讀光看是絕對沒用的，最有效最有效的手段是，直接上手，上項目，哪怕是仿寫一些開放API接口的app（知乎日報，豆瓣電影，有太多開放提供服務(wù)器api，讓廣大客戶端開發(fā)者練手的）

以上只是我的個人學(xué)習(xí)習(xí)慣，因人而異

扯淡吐槽

• xx火了，客戶端要完蛋，前端要火
• 小程序會不會滅掉客戶端開發(fā)
• 明年培訓(xùn)機(jī)構(gòu)大量前端要涌入了
• 小程序也不一定就會火，客戶端不可代替

當(dāng)初RN出來就是這樣一波風(fēng)氣，小程序出來也是，我對任何這種話題是毫無興趣！這種然并卵的話題，鍵盤俠們熱火朝天討論幾個小時，時間就過去了，然后就可以happy下班了，有這功夫demo都寫出來了，項目都上線了

開發(fā)環(huán)境

上面其實(shí)也扯了太多的廢話，微信小程序其實(shí)有自己的IDE開發(fā)環(huán)境，一切都在這個開發(fā)環(huán)境里面，下載官方IDE開發(fā)包，開始運(yùn)行，就可以直接開發(fā)預(yù)覽小程序了。

但這里有個IDE開發(fā)包破解的問題，小程序目前需要是需要邀請碼的，有邀請碼你就會有屬于你業(yè)務(wù)的微信小程序appId，有邀請碼的好處是你可以把小程序部署到真機(jī)上，沒有邀請碼，無論你是否破解了IDE，你都無法真機(jī)預(yù)覽，但是IDE里面的模擬器預(yù)覽完全沒有問題，能運(yùn)行，能實(shí)現(xiàn)絕大部分功能，完全可以項目上先開發(fā)起來，等待一旦公測，就直接上線。

不破解IDE

先說結(jié)論：現(xiàn)在的最新版本IDE，完全不需要破解！

• 最新版本的92300的IDE，mac下是一個dmg包，直接安裝就能使用
• 選擇+號添加項目你能看到創(chuàng)建新項目必須填寫AppID
• 在92300版本里面，已經(jīng)貼心的新增了一個無AppID的按鈕，點(diǎn)了后會得到提示無AppID部分功能受限
• 說的很嚇人，這部分API很少，就2個，并且IDE提供了模擬數(shù)據(jù)返回，完全不影響絕大部分開發(fā)
• 你就是破解了，不提示部分功能受限，也是該沒法正常還照樣沒法正常工作，畢竟微信也有自己的服務(wù)器驗(yàn)證，你破解后填的AppID終歸是假的
• 選擇工程目錄，這時候切記如果你是從0開始創(chuàng)建工程，而不是擁有線程的wx小程序demo代碼，一定要在選擇工程目錄的時候，創(chuàng)建全新文件夾
• 只有全新創(chuàng)建的文件夾才會開啟quickstart自動創(chuàng)建初始工程文件功能，(如下圖）自動創(chuàng)建好一個helloworld工程
• quickstart的自動創(chuàng)建工程，是可以無報錯直接運(yùn)行run起來的。
• 但如果文件夾內(nèi)有文件，IDE就不會創(chuàng)建任何的初始文件的。

破解IDE

首先，感謝@老郭以迅雷不及掩耳盜鈴之神速第一時間破解了微信官方IDE，并且開源提供給大家使用，GitHub weapp-ide crack

因?yàn)樵谠缙诘陌姹荆⑿诺腎DE，沒有AppID的人是無法體驗(yàn)的，必須經(jīng)過破解，才能開始自己寫demo進(jìn)行練手。而老郭在第一時間破解了IDE，讓所有人能從代碼上第一時間體驗(yàn)這個神秘的小程序（真機(jī)就沒辦法了）

后來倒逼微信官方，把小程序IDE直接開放，才有了上面提到的無AppID模式。

但是，我使用破解IDE的時候，發(fā)現(xiàn)很多人遇到了個問題，按部就班一步一步把IDE破解了，創(chuàng)建新工程的時候，是沒有quickstart這一部的，如果什么都不太懂的人做到這一部，一打開工程，一個文件沒有直接點(diǎn)運(yùn)行，直接會報錯，什么can not find app.js之類的，context之類的錯誤，我看到這個后，直接從網(wǎng)上順手找個demo（就在老郭的Git里就有）扔到目錄里，就一切運(yùn)行了。

所以目前我的感受就是，破解倒逼了微信官方開放無AppID體驗(yàn)，簡直太威武了，但對于經(jīng)驗(yàn)尚淺的新手，破解的一大堆東西和步驟，很可能會出現(xiàn)一大堆不知道為啥的錯誤提示的時候，真的不如直接下最新版IDE，不破解直接無AppID體驗(yàn)。

開動起來

• 官方文檔全在這里 官方文檔，里面包含簡易教程，框架，組件，API，工具等等

官方文檔其實(shí)內(nèi)容真的不多，很多東西寫的很淺，光看文檔我是覺得很是吃力，因?yàn)楹芏?font color="#df3434">前端開發(fā)的概念并不深入，很多標(biāo)簽，css的名字及其陌生，所以輔助上別人的demo食用就很贊

quickStart 工程文件基礎(chǔ)

項目基礎(chǔ)文件

• app.json 這里對小程序所有的頁面進(jìn)行配置，其實(shí)詳細(xì)的大家可以看官方文檔，跟你app界面結(jié)構(gòu)相關(guān)的就是前三個
  • “pages”字段表示app包含的所有頁面，只有在這里注冊過的頁面才會有效進(jìn)行編譯，如果你的app不包含”tab”字段，那么app的首頁就是”pages”數(shù)組里面的第一個page
  • “window”字段是處理對于navigationbar的一些樣式設(shè)置
  • “tabBar”字段如果存在，表示app開啟首頁面為底部tabbar的形式，這樣每個tab所對應(yīng)的page在”tabBar”字段里設(shè)置
  • “networkTimeout”,”debug”這兩個字段一個配置全局網(wǎng)絡(luò)超時，一個開啟debug模式

• app.wxss 這里其實(shí)是全局的CSS，凡是在這里寫過的CSS樣式，在各自子page里面可以直接使用，寫在其他.wxss文件里的樣式是不能跨page使用的，可以通過@import進(jìn)行樣式導(dǎo)入，導(dǎo)入別的.wxss文件，但是目前我實(shí)踐的結(jié)果@import只有在主app.wxss里才有效，路徑是相對路徑
• app.js 這里就是純js代碼邏輯了，官方的demo里給你展示了一些基本代碼，調(diào)用了微信的login接口，回調(diào)，讀取用戶頭像，讀本地存儲之類的。并且通過js的一個全局函數(shù)getApp()可以獲得app.js的這個app對象。

頁面文件

如果一個頁面起名叫HomePage，那么我們就應(yīng)該自行手動創(chuàng)建3個文件，文件名一致才會被系統(tǒng)正確的識別

• HomePage.js 代表著這個頁面的業(yè)務(wù)邏輯，當(dāng)你在空白js里面輸入page的時候會自動出現(xiàn)代碼補(bǔ)全，幫你補(bǔ)全了一個page的所有生命周期，onLoad，onHide啥的，其他的js代碼提示很不完善╮(╯_╰)╭
• HomePage.wxss 這里面寫這個頁面的專屬css，別的頁面不能使用，只在這個頁面下可以用，但是可以被import到app.wxss里面，實(shí)現(xiàn)全局通用，并且wxss的代碼提示非常完善，很爽，很多文檔沒寫的css表，可以通過ide代碼提示+推測標(biāo)準(zhǔn)css3，來知道如何編寫
• HomePage.wxml 這里面寫這個頁面了，這種WXML語法看起來就很像html，但他還真不是html，html的東西完全不能直接在這里用。你必須用wx提供的wxml相關(guān)組件完全重寫，條件渲染，循環(huán)渲染，數(shù)據(jù)綁定，都得按著微信的規(guī)定來，并且提供了最簡單的模板模塊功能，實(shí)現(xiàn)一定程度的復(fù)用。

還可以有個可選的HomePage.json文件，頁面也是可以擁有自己的.json文件進(jìn)行一些專屬配置的，但是頁面的json可以配置的字段不如app.json多，職能配置關(guān)于本window相關(guān)的一些表現(xiàn)，比如

上手開搞

• 創(chuàng)建一個新目錄HomePage，創(chuàng)建好我們頁面自己的HomePage至少三個文件
• HomePage.js里面寫page，自動補(bǔ)全好頁面生命周期，其余留空
• 修改app.json里面 “pages”字段，添加進(jìn)去我們最新的頁面路徑，并且放到最上面。
• 直接點(diǎn)編譯，你會發(fā)現(xiàn)，你的微信小程序已經(jīng)在模擬器里面運(yùn)行起來了，沒有報錯，只是空白一片，什么也沒有嘛。

后面開始動手畫UI了，這個我沒有啥教學(xué)的，因?yàn)樯衔奶峁┑膅ithub各種demo里面豐富多彩的所有組件用法已經(jīng)夠全的了，我這手把手的教如何寫一個按鈕，如何寫一個text，如何水平排布好幾段文字，這就有點(diǎn)太無腦了。我舉例幾個項目中用到的界面，然后寫點(diǎn)我這個小白在趟出這些界面的時候遇到的一些問題點(diǎn)吧

開發(fā)小記

小程序的mvvm

小程序天然有一套數(shù)據(jù)和UI的綁定機(jī)制，在js文件里有如下代碼，在onload里面發(fā)起網(wǎng)絡(luò)請求，網(wǎng)絡(luò)請求后回來，handleResponse，再之后setData，可以看到這個data其實(shí)就是一個vm

當(dāng)任何時候在js邏輯里面，修改了data，這樣的wxml中，這種就是告訴負(fù)責(zé)UI的WXML，這塊UI要和bookList這個data里面的一個字段進(jìn)行綁定，任何時候data發(fā)生了變化，這個UI都會根據(jù)最新的數(shù)據(jù)結(jié)果刷新

小程序的代碼復(fù)用&模塊化

可以看出來，我的2個頁面，最重要的就是一個書籍詳情Cell，進(jìn)行復(fù)用，避免代碼大量的機(jī)械性重復(fù)。

模塊化得從3個層面，js，wxss，wxml來說

• js的模塊化：小程序的js看起來就是最普通的js，似乎看起來是不支持ES6的，因此用傳統(tǒng)的module.exports就可以封裝js的api模塊提供外部使用
• wxss的樣式導(dǎo)入：上文提過，每個page只能認(rèn)自己page的wxss，和全局的app.wxss，其他的wxss是不支持由別的文件直接引入的，但是可以在全局app.wxss里面使用@import來把別的文件的樣式，導(dǎo)入全局，這樣各自page都能使用了
• wxml的模板：官方文檔里說支持<template>的方式創(chuàng)建一個模板，模板支持使用data傳入數(shù)據(jù)，我的項目里沒這么使用過，我用的另一種方案
• wxml的引用：官方文檔里也說明了支持<include>他的作用其實(shí)只是原封不動的代碼字符串拷貝，會拷貝目標(biāo)wxml文件里除<template>外所有的標(biāo)簽，原封不動的拷貝替換到<include>位置（這是純字符串復(fù)制，不能支持指定代碼靈活變化，需要靈活變化請使用模板）

點(diǎn)擊事件傳值

下面這個代碼就是我的bookCell的wxml代碼，可以看到這里大量使用了進(jìn)行UI和data的綁定，這樣每次setData，都會讓ui直接生效，但我這里重點(diǎn)給大家看一下關(guān)于綁定點(diǎn)擊事件。

官方文檔里面寫的真是比較簡單，bindtap="tapBook"寫好了這一句后，每當(dāng)這個UI元素被點(diǎn)擊的時候，都一定會觸發(fā)對應(yīng)page的.js文件中tapBook這個jsfunction，看起來很容易，但傳值呢？發(fā)生點(diǎn)擊我怎么知道點(diǎn)擊的時候是哪個book被點(diǎn)擊了？第幾個本書？書的id是啥？關(guān)鍵就在這里

data-sectionIndex="" data-rowIndex=""

這一行給添加了2個屬性，都是以data-開頭，自定義的名字為結(jié)束，并且綁定上了2個數(shù)據(jù)（for 循環(huán)的index，for循環(huán)后面說），這樣添加自定義的data-xx屬性就是為點(diǎn)擊事件傳遞屬性的關(guān)鍵

這是對應(yīng)js代碼，當(dāng)觸發(fā)tapBook的時候，會把event當(dāng)做參數(shù)傳入，event.currentTarget.dataset.xxx 就能獲取你剛才data-xx綁定的數(shù)據(jù)，我剛才把sectionIndex rowIndex的列表點(diǎn)擊index綁上了，于是通過這個方法取出來了。

切記，你在wxml里幾遍data-xx，寫了大寫英文字母，此處在js里調(diào)用的時候被自動全部變成小寫了，你再寫大寫是undefine的

for循環(huán)創(chuàng)建列表

官方文檔里面給了好幾種for循環(huán)的方案，什么 ，都可以綁定上一個js數(shù)組數(shù)據(jù)，然后按著數(shù)組的個數(shù)循環(huán)渲染列表形UI，

這就是一個for循環(huán)創(chuàng)建列表的例子

• wx:for的意思是告訴這個內(nèi)用循環(huán)創(chuàng)建內(nèi)容，循環(huán)所綁定的數(shù)組是listItem.column_list.book_info
• wx:for-item的意思是，你在下面寫當(dāng)次循環(huán)需要用到的具體數(shù)組元素，你起名成listBookItem
• wx:for-index的意思是，你在下面寫檔次循環(huán)需要用到的數(shù)組下表，你起名成了rowIndex

循環(huán)內(nèi)我include的代碼，就是上文點(diǎn)擊事件傳值介紹的代碼，這時候我們回過頭去看

<text class="novelBookTitleText">[] </text>

<view class="novelBookDesc" data-sectionIndex="" data-rowIndex="" bindtap="tapBook" tapIndex="">

怎么樣，用到listBookItem數(shù)據(jù)在綁定上了吧，用到rowIndex在點(diǎn)擊事件了把，同理可知sectionIndex其實(shí)是另外一個我沒展示的外層循環(huán)的wx:for-index定義。

wx對象提供的API

所謂API其實(shí)就是，在js文件里，微信也提供了很多native API，以wx.xxx開頭，官方API文檔，包括很多內(nèi)容，我就不一一舉例了，這里舉例幾個比較重要的分類

• 網(wǎng)絡(luò)
  • http請求(最常用，各大demo都是通過wx.request()來做http請求)
  • 大文件上傳下載
  • websockt
• 數(shù)據(jù)
  • 數(shù)據(jù)緩存，本地key-value式數(shù)據(jù)存儲
  • 各種同步，異步，數(shù)據(jù)處理接口
• 導(dǎo)航 頁面之間各種跳轉(zhuǎn)
• 動畫 繪圖
• 媒體
• 設(shè)備 重力感應(yīng)，系統(tǒng)信息，網(wǎng)絡(luò)狀態(tài)，羅盤等等
• 微信支付
• 微信登陸，用戶信息

可以看出，都是直接跟網(wǎng)絡(luò)，跟設(shè)備，相關(guān)的信息。

界面跳轉(zhuǎn)

我們在小程序mvvm里面已經(jīng)看到了一段關(guān)于wx.request的演示，這里演示一下，界面之間跳轉(zhuǎn)

• wx.nativateTo() 通過push動畫打開新的頁面
• wx.redirectTo() 當(dāng)前頁面重定向到新頁面進(jìn)行展示，不打開
• wx.navigatBack() 通過pop動畫，彈出到上一級界面

wx.nativateTo是有數(shù)量限制的，小程序界面棧層級不能超過5的，所以很多場景可以選擇使用wx.redirectTo

可以看到，界面跳轉(zhuǎn)通過url跳轉(zhuǎn)，而傳值也通過url的方式傳值，你傳過去的值會直接寫進(jìn)onLoad生命周期函數(shù)的options參數(shù)里面，名字和你在url里面寫的是一樣的。

CSS

說實(shí)話，一直以來都在做客戶端開發(fā)，這種css式的界面開發(fā)模式，實(shí)在是太陌生了，css式的思維，css式的嵌套，對一個新手來說有點(diǎn)痛苦。

我的Github上面的小程序Demo 這里面的代碼其實(shí)不多，基本上是我們項目的雛形，但最讓我頭疼的就是那些css，我整整寫了一整天，才大約摸到一丟丟前端開發(fā)，css思維的方式方法

這個我也沒啥好說的，畢竟我是大大大大菜鳥，就是多寫寫就有感覺了。

值得一提的是IDE對于WXSS文件里，css的代碼補(bǔ)全非常贊，各種都能第一時間補(bǔ)全，對于我這個根本記不住那么多css名字的新手來說，這個實(shí)在是太好了。

另外，完全支持- position: absolute和- position: relative的絕對坐標(biāo)布局，也完全支持flexBox的彈性盒子布局，和我一起的小伙伴表示，基本上大部分的css都是直接可以用，我把線上項目遷移到wxss的時候也感覺到了，打開chrome的debug模式，照著線上wap站，原封不動的照著寫css布局參數(shù)，基本上沒有任何問題

調(diào)試

大家玩起來就知道了，微信小程序的調(diào)試模式，和chrome的debug模式一模一樣，其實(shí)這個ide就是拿nw.js寫的，里面是一套webkit，源碼里面就有chrome的debug’tool的js代碼哈哈

底層實(shí)現(xiàn)探討

關(guān)于這個小程序底層是如何運(yùn)作的，在剛出的第一天，就引來無數(shù)的遐想，wx獨(dú)有的wxml wxss到底是拿什么做的？到底是不是h5?到底能不能做成native體驗(yàn)？無數(shù)人都在猜測。

在最開始的時候，ide被破解，并且被證實(shí)ide是基于webkit做的，很多人猜微信在真機(jī)上就是webview啦（后面事實(shí)證明，目前也還真是）

但我當(dāng)時就覺得這其實(shí)說明不了啥，wx特別抽象出來的 wxml結(jié)構(gòu)，就是想定義一個獨(dú)立出來的獨(dú)有抽象層，他雖然目前把這個抽象層（一種自己獨(dú)有的vdom結(jié)構(gòu)？我是前端新人，不一定對哈），最后又重新通過編譯轉(zhuǎn)成了html，最后交給webview來展現(xiàn)（輔助綁定上了一些native插件，比如wxapp里面的視頻，tab，navi，input keyboard，map等等，都是通過addsubview的方式直接add到UI/WKwebview上的）

但是這并不代表，這樣的架構(gòu)就是依賴在webkit，和webview的，完全獨(dú)有的抽象中間層vdom，就是為了擺脫對webkit的依賴，未來可以很輕松的切換底層架構(gòu)，直接切換成reactnative or weex 那樣的vdom + native渲染的模式，這樣就沒了webview的依賴，（雖然現(xiàn)在選擇的方案，是又繞路回到了html和webkit，但依賴和選擇權(quán)已經(jīng)牢牢攥在了自己手里）

微信小程序開發(fā)人員回答渲染機(jī)制

這篇文章看起來官方人員態(tài)度有點(diǎn)遮遮掩掩，含糊其辭，通篇都沒直指要害-如何渲染，但我覺得解讀一下，是這樣的潛臺詞（開玩笑！莫噴：我們很高大上，我們抽象了很多東西，其實(shí)我們還是主要用webview渲染，輔助了很多native，就是不太好意思這么直白的說出來）

但我特別認(rèn)可微博上的這個回答