IDE已破解，不用預熱，立刻進入「微信小程序」開發

昨晚臨睡覺前，還在想應該給xx打個電話，問問微信應用號應該有原生 UI 吧，要否則跟直接跑 HTML 5 有什麼區別？

而今天一大早我便一本正經胡說八道猜測，微信小程序不會有 JS IDE ，一個小時以後，發現被打臉了，截圖爲證。

在衆多消息裏，啃先生排除掉預測類的信息，汲取了對於技術從業者有用的信息，整理出此文章，說說「微信小程序」開發的設計理念和入門。

在文章的最後告訴你，即便沒有進行內測名單，你也能夠開發微信小程序。

壹 | 設計理念

• 它是一個混合程序，因此即不是純粹的 Native App ，也不是純粹的 Web 應用。

• 它是一個「封閉」的開發套件和框架，而不是「自由」的 JavaScript + CSS + HTML 。所以，你不能任性地使用 jQuery，zepto，更不能使用基於 jQuery 的第三方控件 ，也由不得開發者決定要用 Angular 仍是 React。

• 它很像 Apple 開發者的範式，有開發者帳號，有 IDE ，有構建工具，有 UI 規範等等。

• MVC架構，開發者不可直接操做 DOM 節點，頁面根據數據的變化渲染 UI ，業務邏輯專一於數據操做。

貳 | 生命週期

「微信小程序」開發框架提供了 App 生命週期的管理，從打開一個微信小程序到離開過程是這樣的：

所以在編程時，有如下必不可少的元素：

1. app.json 它是App的配置中心，目前知道的配置項有窗體外觀「window」 ，菜單項及各項的外觀「tabBar」，網絡請求參數「networkTimeout」,以及頁面「page」它配置此App包含哪些頁面。

2. app.wxxs 這是App的公共樣式，就是CSS

3. app.js 這是App的啓動腳本，這裏能夠處理一些App啓動過程當中頁面加載以前要處理的事情。

4. 頁面 一個App可包含多個頁面，頁面的相對訪問路徑被配置在app.json裏，每一個頁面能夠包含 [頁面名].js、[頁面名].wxml、[頁面名].wxxs、以及配置文件 [頁面名].json 。其中 wxxs 和 json 文件不是必須要的，若是有，那麼它們會覆蓋 app.json 和 app.wxxs 的相同配置項。

以上至少四個文件，便可生成一個最簡單的微信小程序。

叄 | app.js 和 [頁面名].js

微信執行環境提供了全局的 App 實例，和 Page 實例，其中 app.js 主要是給 App 實例作配置，例如定義 onLaunch 方法，讓 App 啓動時，執行一些任務。

而頁面的腳本例如 page1.js 則須要給 Page 實例作配置

肆 | 頁面渲染

微信小程序並不容許開發者直接操做頁面 DOM 結點。
那麼頁面 UI 怎麼更新呢？熟悉 React 的應該知道，React 組件根據 state 變化來渲染 UI，業務邏輯專一於數據處理，微信小程序開發框架也是如此。如下 page1.wxml 使了相似 jsx 的語法，它使用 page1.js 的data 屬性進行渲染，而且當 data 改變時，自動完成 UI 更新。

微信提供了幾個 API 用於路由控制

• wx.navigateTo( Object ) 保留當前頁面，跳轉到應用內的某個頁面，使用 wx.navigateBack 能夠返回到原頁面

• wx.redirectTo( Object ) 關閉當前頁面，跳轉到應用內某個頁面

• wx.navigateBack( ) 關閉當前頁面，跳轉到上一頁

陸 | 網絡請求

網絡請求也不是使用 XHR 標準，微信提供了網絡請求相關 API ，有以下接口

柒 | 一些開發 Tips

理論上來說，如下結論是正確的

• 是否支持 JavaScript ES6？不論是否支持，你可使用 ES6 進行編碼，使用 Babel 構建出 ES5 ，而後再到微信開發者工具中構建出微信小程序

• 是否可使用 less 等預處理語言。wxxs 使用的是 CSS 語言，因此應該是能夠的

• HTML標籤與微信的標籤能夠混着用，可是並非全部的標籤均可用，好比a 標籤的 href 屬性是無效的，由於微信小程序只能在 app.json 裏有配置的頁面間跳轉，而且使用路由 API 進行控制，不可任意跳。

• 掌握普通的 Web 開發，對開發微信小程序有沒有幫助。思惟上有幫助，尤爲是對於熟悉 React 開發框架的開發者。

以上，純粹一本正經地紙上談兵，最新消息顯示，微信開發者工具已經被破解了，因此，如今你就能夠開始開發微信小程序了，文章發佈時還可用，小夥伴們儘快去下載安裝，詳見 Github 連接： https://github.com/login?retu...

最後不忘推介一下公衆號，歡迎關注轉發