一、UI 框架
UI 框架主要提供的是不同樣式的組件,可以方便開發者使用一些現成的樣式,完成自己產品、應用的開發。
| 名稱 | git地址 | 說明 |
|---|---|---|
| WeUI | https://github.com/Tencent/weui-wxss | 由微信官方團隊推出的 |
| iView Weapp | https://github.com/TalkingData/iview-weapp | 一套高質量的微信小程序 UI 組件庫 |
| Vant Weapp | https://github.com/youzan/vant-weapp | 是有贊前端團隊開源的移動端組件庫,於 2017 年開源,組件大多與電商相關 |
二、基礎框架
基礎框架的主要能力是提供小程序的打包、編譯、組件化等能力,讓開發者可以更加簡單,方便的使用自己熟悉的方案,完成應用的開發。


1、MINA
官網地址:https://developers.weixin.qq.com/miniprogram/dev/reference/
是微信團隊為小程序提供的框架命名為MINA的應用框架
2、wepy
文檔地址:https://wepyjs.github.io/wepy-docs/1.x/#/
是騰訊團隊推出的小程序組件化開發框架
3、mpvue
官網地址:http://mpvue.com/
mpvue 2018年3月份在美團點評上開源, 至今好像已停止維護
mpvue(Vue.js in mini program) 是一個使用 Vue.js 開發小程序的前端框架。
框架基於 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 實現,使其可以運行在小程序環境中,從而為小程序開發引入了整套 Vue.js 開發體驗。
使用 mpvue 開發小程序,你將在小程序技術體系的基礎上獲取到這樣一些能力:
1.徹底的組件化開發能力:提高代碼復用性
2.完整的 Vue.js 開發體驗
3.方便的 Vuex 數據管理方案:方便構建復雜應用
4.快捷的 webpack 構建機制:自定義構建策略、開發階段 hotReload
5.支持使用 npm 外部依賴
6.使用 Vue.js 命令行工具 vue-cli 快速初始化項目
7、H5 代碼轉換編譯成小程序目標代碼的能力
初始化項目
# 1. 先檢查下 Node.js 是否安裝成功
$ node -v
v8.9.0
$ npm -v
5.6.0
# 2. 由於眾所周知的原因,可以考慮切換源為 taobao 源
$ npm set registry https://registry.npm.taobao.org/
# 3. 全局安裝 vue-cli
# 一般是要 sudo 權限的,注意vue腳手架版本必須是2.9
$ npm install --global vue-cli@2.9
# 4. 創建一個基於 mpvue-quickstart 模板的新項目
# 新手一路回車選擇默認就可以了
$ vue init mpvue/mpvue-quickstart my-project
# 5. 安裝依賴,走你
$ cd my-project
$ npm install
$ npm run dev
注意事項:新增的頁面需要重新 npm run dev 來進行編譯
4、taro
官方文檔:http://taro-docs.jd.com/taro/docs/README/index.html
Taro 是京東 - 凹凸實驗室打造的一個開放式跨端跨框架,2018年6月7日正式開源
1.x、 2.x都是使用react來開發小程序, 3.x支持使用 React/Vue/Nerv 等框架來開發

支持平台:
H5
reactNative
微信小程序
京東小程序
百度小程序
支付寶小程序
字節跳動小程序
QQ 小程序
釘釘小程序
企業微信小程序
支付寶 IOT 小程序
飛書小程序
安裝及使用
安裝cli工具
# 使用 npm 安裝 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安裝 CLI
$ yarn global add @tarojs/cli
# OR 安裝了 cnpm,使用 cnpm 安裝 CLI
$ cnpm install -g @tarojs/cli
值得一提的是,如果安裝過程出現sass相關的安裝錯誤,請在安裝 mirror-config-china 后重試。
$ npm install -g mirror-config-china
查看 Taro 全部版本信息
npm info @tarojs/cli
項目初始化:
$ taro init my-taro-App
5、uni-app
官網地址:https://uniapp.dcloud.io/
是一個使用 Vue.js 開發所有前端應用的框架,開發者編寫一套代碼,可發布到iOS、Android、Web(響應式)、以及各種小程序(微信/支付寶/百度/頭條/QQ/快手/釘釘/淘寶)、快應用等多個平台。
需要使用HBuilderX IDE工具
