小程序框架


一、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工具


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM