效果如下：

微信小程序，從周三開(kāi)始上手做周三周四基本完成。周五調(diào)試和適配機(jī)型，提測(cè)debug，提交審核。時(shí)間雖短但是歷經(jīng)坎坷，可以用“坑多，路滑，坡陡”來(lái)形容，吐槽完畢如正題

1 從編輯器說(shuō)起

上手微信小程序要從這個(gè)編輯器，準(zhǔn)確說(shuō)應(yīng)該是集成開(kāi)發(fā)環(huán)境說(shuō)起。

主要的面板三部分組成 編輯器 調(diào)試 項(xiàng)目

1 編輯器

沒(méi)有體驗(yàn)winpc開(kāi)發(fā)體驗(yàn)，mac上面編輯器基本不能用，建議開(kāi)發(fā)者使用 自己熟悉的編輯器進(jìn)行開(kāi)發(fā)。

小程序的開(kāi)發(fā)環(huán)境僅僅用來(lái)調(diào)試和打包。

2 調(diào)試

調(diào)試面板基本和chrome 如出一轍 為了方便監(jiān)控page 數(shù)據(jù) 開(kāi)發(fā)環(huán)境中有個(gè)Appdata來(lái)監(jiān)控?cái)?shù)據(jù)。

3 項(xiàng)目

項(xiàng)目主要用于項(xiàng)目發(fā)布個(gè)人開(kāi)發(fā)者預(yù)覽， 打包發(fā)布等功能。

個(gè)人對(duì)這個(gè)開(kāi)發(fā)環(huán)境評(píng)價(jià)如下：這個(gè)工具最大的作用其實(shí)在調(diào)試和發(fā)布，微信小程序團(tuán)隊(duì)，為開(kāi)發(fā)者提供了打開(kāi)即用，拎包入住式的體驗(yàn)。槽點(diǎn)在于：個(gè)人覺(jué)得官方應(yīng)該出一些generator 類(lèi)似cli或者yoman，然后再用webpack 或者 gulp 插件的方式 更友好一些，給開(kāi)發(fā)者提供一些ci機(jī)制，命令行打包，上傳。插件的機(jī)制在于開(kāi)發(fā)者更靈活，可以用自己更舒服的方式進(jìn)行開(kāi)發(fā)。

2 遇到的一些問(wèn)題

1. 虛擬DOM-閹割版本html標(biāo)簽和盒子模型。

小程序里面的虛擬DOM 處于對(duì)性能提升，閹割掉了，幾乎所有html，當(dāng)然你可以用標(biāo)準(zhǔn)的html標(biāo)簽開(kāi)發(fā)，編譯之后，轉(zhuǎn)換成了 li -> wx-li 這樣把原來(lái)DOM綁定事件綁定機(jī)制移除，取而代之的是虛擬DOM的共有API。因?yàn)槭翘摂M出來(lái)的DOM自然也沒(méi)有盒子模型，只保留了, magin:0; 和view的display block。也就是說(shuō)，當(dāng)你用P ul li 等標(biāo)簽的時(shí)候，高度寬度都是0，要手動(dòng)加 display

如果你view 和 text 標(biāo)簽嵌套使用的時(shí)候，因?yàn)椴皇菢?biāo)準(zhǔn)的文檔流了，經(jīng)常遇到 view里面的內(nèi)容超出 view 組件而產(chǎn)生滾動(dòng)條。在安卓機(jī)上顯而易見(jiàn)，在ios上不明顯，如果誤觸，會(huì)造成頁(yè)面整體滑動(dòng)不流暢。

2. 開(kāi)發(fā)體驗(yàn)有所犧牲

如果你常規(guī)開(kāi)發(fā)項(xiàng)目是用react 或者 vue 開(kāi)發(fā)，那么小程序會(huì)非常憋手，目前還沒(méi)有官方出品的編輯器插件和語(yǔ)法高亮插件，官方格式wxss(css) wxml(html)，基本不被主流編輯器支持。開(kāi)放體驗(yàn)上有所降級(jí)，做好心理準(zhǔn)備。

3. 不支持html渲染

在項(xiàng)目詳情中需要渲染存儲(chǔ)的html 富文本，但是官方是不支持的。解決方案：https://github.com/icindy/wxParse 基本原理是把 html 或者 markdown 轉(zhuǎn)成 Json 提取出圖片，再將json數(shù)據(jù)包裝成 wxml 索支持的格式。插入圖片。

4. 可以使用es6

可以使用es6 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/details.html 可以查詢對(duì)es6的支持情況 ，其中遇到安卓手機(jī) 會(huì)出現(xiàn) 出現(xiàn)內(nèi)部錯(cuò)誤的彈框，定位為引用了bluebird.js ，換成 es6-promise.min.js 之后解決。

5 1M的限制

小程序?yàn)榱吮ＷC用戶體驗(yàn)將打包后的文件大小限制到1M 超出則打包上傳失敗。此項(xiàng)目5個(gè)頁(yè)面就到了500k。

建議可以壓縮空間的地方

1. 圖片icon 盡量用線上可訪問(wèn)的url
2. 產(chǎn)品體量要克制
3. 樣式文件精良抽象到app.wxss，精良減少過(guò)度設(shè)計(jì)。

項(xiàng)目下載：SmallCW-master.zip