前言

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

新技術(shù)嘗鮮

我一直是一個(gè)Android客戶端開發(fā)，前端經(jīng)驗(yàn)只停留在w3cschool上面很基礎(chǔ)的最初版本html,css,js學(xué)習(xí)，純helloworld水準(zhǔn)，就學(xué)了不到10分鐘。所以這里也算是給客戶端開發(fā)們打點(diǎn)氣，新的東西阻礙的永遠(yuǎn)是你上手的動(dòng)力，而不是這個(gè)東西的難易。順帶強(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é)小程序，需要什么知識(shí)儲(chǔ)備嗎？

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

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

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

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

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

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

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

扯淡吐槽

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

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

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

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

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

不破解IDE

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

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

破解IDE

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

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

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

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

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

開動(dòng)起來

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

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

quickStart 工程文件基礎(chǔ)

項(xiàng)目基礎(chǔ)文件

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

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

頁面文件

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

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

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

上手開搞

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

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

開發(fā)小記

小程序的mvvm

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

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

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

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

模塊化得從3個(gè)層面，js，wxss，wxml來說

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

點(diǎn)擊事件傳值

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

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

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

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

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

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

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

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

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

• wx:for的意思是告訴這個(gè)內(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)擊事件傳值介紹的代碼，這時(shí)候我們回過頭去看

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

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

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

wx對(duì)象提供的API

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

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

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

界面跳轉(zhuǎn)

我們?cè)?code style="font-family: 'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace; font-size: 1em; word-break: break-all; padding: 0px 0.3em; background: rgb(238, 238, 238);">小程序mvvm里面已經(jīng)看到了一段關(guān)于wx.request的演示，這里演示一下，界面之間跳轉(zhuǎn)

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

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

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

CSS

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

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

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

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

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

調(diào)試

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

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

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

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

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

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

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

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

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