微信小程序（應用號）開發體驗

昨天微信小程序（應用號）內測的消息把整個技術社區炸開了鍋，
我也忍不住跟了幾波，惋惜沒有內測資格，聽聞破解版出來了，
今天早上就着原來的項目資源試開發了一下，總結一下體驗.

整體體驗

1. 開發效率高，6：40左右按教程破解完IDE，7:20左右點作完了首頁和導航欄的佈局，微信把覺見的佈局都作了封裝，比傳統的前端開發效率高。
2. 前端能夠快速上手：熟練的前端能夠很快上手，可能只要一小時讀文檔的時間加一個官方的例子。
3. 開發工具難用，不少目錄的操做和IDE常見的xml配對等功能暫不支持。
4. 開發限制了不少前端常見的Dom,window操做，開發的靈活度和難度下降。
5. 我沒有內測資格，小程序還不能上傳體驗，只能下載代碼本地體驗。

本文代碼放在github

上截圖

相關資源

1. 破解的IDE
2. 開發資源集合

IDE技術棧：NodeWebkit + React

進入的安裝目錄：微信web開發者工具\package.nw\app
這個*.nw就能十有八九猜出是NodeWebkit封裝的Web應用，
詳看依賴node_modules證明了猜測。
在package.json "main": "app/html/index.html"定義了入口。

全部的組件本質是React組件

在入口中能夠看到直接引用了React 和React DOM

"use strict";
function init() {
    tools.Chrome = chrome;
    var n = require("../dist/lib/react.js"),
        e = require("../dist/lib/react-dom.js"),
        i = require("../dist/common/loadInit/init.js"),
        o = require("../dist/components/ContainController.js"),
        t = require("../dist/common/proxy/startProxy.js"),
        r = require("../dist/actions/windowActions.js"),
        s = require("../dist/actions/webviewActions.js"),
        d = require("../dist/stroes/webviewStores.js"),
        u = require("../dist/common/log/log.js"), c = require("../dist/common/shortCut/shortCut.js"), l = global.appConfig.isDev;
        //...
}

看一下組件Dropdown的定義，這不就是咱們熟悉的React在ES5中建立組件的方法嗎？

"use strict";
var React = require("../../lib/react.js"), Dropdown = React.createClass({
    displayName: "Dropdown", render: function () {
        return React.createElement("div", {className: "dropdown"}, React.createElement("div", {className: "dropdown-item"}, React.createElement("img", {
            src: "https://mmrb.github.io/avatar/jf.jpg",
            alt: "",
            className: "dropdown-item-icon"
        }), React.createElement("div", {className: "dropdown-item-info"}, React.createElement("p", null, "公衆號名稱啦")), React.createElement("div", {className: "dropdown-item-extra"}, React.createElement("img", {
            src: "https://mmrb.github.io/avatar/jf.jpg",
            alt: "",
            className: "dropdown-item-extra-icon"
        }))), React.createElement("div", {className: "dropdown-item dropdown-item-active"}, React.createElement("img", {
            src: "https://mmrb.github.io/avatar/jf.jpg",
            alt: "",
            className: "dropdown-item-icon"
        }), React.createElement("div", {className: "dropdown-item-info"}, React.createElement("p", null, "公衆號名稱啦公衆號名稱啦公衆號名稱啦"))), React.createElement("div", {className: "dropdown-item"}, React.createElement("img", {
            src: "https://mmrb.github.io/avatar/jf.jpg",
            alt: "",
            className: "dropdown-item-icon"
        }), React.createElement("div", {className: "dropdown-item-info"}, React.createElement("p", null, "公衆號名稱啦"))), React.createElement("div", {className: "dropdown-item"}, React.createElement("img", {
            src: "https://mmrb.github.io/avatar/jf.jpg",
            alt: "",
            className: "dropdown-item-icon"
        }), React.createElement("div", {className: "dropdown-item-info"}, React.createElement("p", null, "公衆號名稱啦"))))
    }
});
module.exports = Dropdown;

微信限制了小程序的包大小

同時微信限制了小程序包的大小，爲755kb,對緩存和本地文件應該也有控制，這相對原生應用動不動幾十兆上百兆的大小來講，絕對是一個亮點，給網上不少人說裝微信小程序一樣會佔用手機存儲的人一個響亮的耳光。

總結

總的來講，對前端來講絕對是一個好消息，
短時間內前端待遇可能上漲，但小程序開發門檻較低（比前端的低），有一部開發人員是面向工資編程，隨着開發人員的流動，長期仍是會和其它相關的的技術崗持平。
因此，少年，不要激動，還要是把基礎知識打紮實。