快捷導(dǎo)航

微信小程序應(yīng)用號(hào)開(kāi)發(fā)體驗(yàn)

更新時(shí)間：2016年09月23日 14:25:34 作者：段隆賢

這篇文章主要介紹了微信小程序（應(yīng)用號(hào)）開(kāi)發(fā)體驗(yàn)的相關(guān)資料,需要的朋友可以參考下

昨天微信小程序（應(yīng)用號(hào)）內(nèi)測(cè)的消息把整個(gè)技術(shù)社區(qū)炸開(kāi)了鍋，我也忍不住跟了幾波，可惜沒(méi)有內(nèi)測(cè)資格，聽(tīng)聞破解版出來(lái)了，今天早上就著原來(lái)的項(xiàng)目資源試開(kāi)發(fā)了一下，總結(jié)一下體驗(yàn).

總體體驗(yàn)

開(kāi)發(fā)效率高，6：40左右破解完IDE，7:20左右點(diǎn)做完了首頁(yè)和導(dǎo)航欄的布局，微信把覺(jué)見(jiàn)的布局都做了封裝，比傳統(tǒng)的前端開(kāi)發(fā)效率高。
前端可以快速上手：熟練的前端可以很快上手，可能只要一小時(shí)讀文檔的時(shí)間加一個(gè)官方的例子。
開(kāi)發(fā)工具難用，很多目錄的操作和IDE常見(jiàn)的格式化代碼，html配對(duì)等功能暫不支持。
開(kāi)發(fā)限制了很多前端常見(jiàn)的Dom,window操作，開(kāi)發(fā)的靈活度和難度降低。
我沒(méi)有內(nèi)測(cè)資格，小程序還不能上傳體驗(yàn)，只能下載代碼本地體驗(yàn)。

本文代碼放在github

上截圖

相關(guān)資源

破解的IDE

開(kāi)發(fā)資源集合

IDE技術(shù)棧：NodeWebkit + React

進(jìn)入的安裝目錄：微信web開(kāi)發(fā)者工具\(yùn)package.nw\app
這個(gè)*.nw就能十有八九猜出是NodeWebkit封裝的Web應(yīng)用，
詳看依賴(lài)node_modules證實(shí)了猜想。
在package.json "main": "app/html/index.html"定義了入口。

所有的組件本質(zhì)是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中創(chuàng)建組件的方法嗎？

"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, "公眾號(hào)名稱(chēng)啦")), 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, "公眾號(hào)名稱(chēng)啦公眾號(hào)名稱(chēng)啦公眾號(hào)名稱(chēng)啦"))), 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, "公眾號(hào)名稱(chēng)啦"))), 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, "公眾號(hào)名稱(chēng)啦"))))
  }
});
module.exports = Dropdown;

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

同時(shí)微信限制了小程序包的大小，為755kb,對(duì)緩存和本地文件應(yīng)該也有控制，這相對(duì)原生應(yīng)用動(dòng)不動(dòng)幾十兆上百兆的大小來(lái)說(shuō)，絕對(duì)是一個(gè)亮點(diǎn)，給網(wǎng)上很多人說(shuō)裝微信小程序同樣會(huì)占用手機(jī)存儲(chǔ)的人一個(gè)響亮的耳光。

總結(jié)

總的來(lái)說(shuō)，對(duì)前端來(lái)說(shuō)絕對(duì)是一個(gè)好消息，短期內(nèi)前端待遇可能上漲，但小程序開(kāi)發(fā)門(mén)檻較低（比前端的低），有一部開(kāi)發(fā)人員是面向工資編程，隨著開(kāi)發(fā)人員的流動(dòng)，長(zhǎng)期還是會(huì)和其它相關(guān)的的技術(shù)崗持平。所以，少年，不要激動(dòng)，還要是把基礎(chǔ)知識(shí)打扎實(shí)。

以上就是對(duì)微信小程序的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: