11 月 2 日，微信正式宣佈「為便於開發者靈活配置小程式，小程式現開放內嵌網頁能力」。此前，CSDN 也發表《微信小程式內嵌網頁能力開放意味著什麼？》一文，探索微信此舉措的本質，進行一句話總結，即雖然是小功能，但為開發者帶來的開發方式是巨大的改變，小程式的開發成本有了很大的下降。

但如何快速上手小程式開發？基礎的前端開發技術必然不可或缺。但對前端開發者而言，想要記住所有的 API 是不可能的，本文涵蓋前端開發的核心知識，以圖表形式整合 JavaScript、React、Redux、Vuejs、Vuex、Angular 4、Flexbox、SCSS、Stylus、GraphQL 等必備技能，希望對眾多開發者有所助益。

注：以下均有原圖下載地址，藍色字體表示連結。

JavaScript ES2015+ 功能

ECMAScript 6（簡稱 ES6）於 2015 年 6 月正式釋出，是 JavaScript 語言的下一代標準。它的目標，是使得 JavaScript 語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

標準的制定者有計劃，以後每年釋出一次標準，使用年份作為標準的版本。而 ES6 是在 2015 年釋出的，所以又稱 ECMAScript 2015。也就是說，ES6 就是 ES2015。目前最新版本已更新到 ES8。以下為 ES2015、ES2016、ES2017 的新特性。

JavaScript

以下基於 JavaScript 學習資源、以及基本物件、資料物件、核心 DOM 等 API 進行彙總，完整的 API 原圖詳見：http://overapi.com/javascript

JavaScript 正則表示式

JavaScript 正則表示式彙總，如下圖所示。

React

React 是一個用於構建使用者介面的 JavaScript 庫，本 API 主要以 React v15 和 v16 版本為主。

Redux

Redux 對於 JavaScript 應用而言是一個可預測狀態的容器。換言之，它是一個應用資料流框架，而不是傳統的像 underscore.js 或者 AngularJs 那樣的庫或者框架。

Redux 最主要是用作應用狀態的管理。Redux 用一個單獨的常量狀態樹（物件）儲存這一整個應用的狀態，這個物件不能直接被改變。當一些資料變化了，一個新的物件就會被建立（使用 actions 和 reducers）。更多功能特性及準則如下圖所示：

Vuejs

Vue.js 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層，它不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與單檔案元件和 Vue 生態系統支援的庫結合使用時，Vue 也完全能夠為複雜的單頁應用程式提供驅動。

Vuex

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也整合到 Vue 的官方除錯工具 devtools extension，提供了諸如零配置的 time-travel 除錯、狀態快照匯入匯出等高階除錯功能。

Angular 4

就在 2017 年的 3 月，Angular 已經發布了 4.0 的版本（相容 2.x 版本）， 4.0 版本中主要是大幅度的減小了程式碼體積（60%），同時提高了載入的速度（肉眼可查的程度），同時報錯的資訊更清晰了。根據官方的文件，Angular 的版本升級會以比較快的速度進行迭代。

Flexbox

Flexbox 模組提供了一個有效的佈局方式，即使不知道視窗大小或者未知元素情況之下都可以智慧的，靈活的調整和分配元素和空間兩者之關的關係。簡單的理解，就是可以自動調整，計算元素在容器空間中的大小。

SASS

Sass 是對 CSS 的擴充套件，讓 CSS 語言更強大、優雅。 它允許你使用變數、巢狀規則、 mixins、匯入等眾多功能， 並且完全相容 CSS 語法。 Sass 有助於保持大型樣式表結構良好， 同時也讓你能夠快速開始小型專案， 特別是在搭配 Compass 樣式庫一同使用時。

Stylus

GraphQL

GraphQL 是一個由 Facebook 提出的應用層查詢語言。GraphQL並不是一個面向圖資料庫的查詢語言，而是一個數據抽象層，包括資料格式、資料關聯、查詢方式定義與實現等等。GraphQL 也並不是一個具體的後端程式設計框架，如果將 REST 看做適合於簡單邏輯的查詢標準，那麼GraphQL 可以做一個獨立的抽象層，通過對於多個 REST 風格的簡單的介面的排列組合提供更多複雜多變的查詢方式。與 REST 相比，GraphQL 定義了更嚴格、可擴充套件、可維護的資料查詢方式。

使用 GraphQL，你可以基於圖模式定義你的後端，然後客戶端就可以請求所需要的資料集。