uni-app快速入門教程

一、什麼是uni-app?

uni-app 是一個使用 Vue.js 開發全部前端應用的框架，開發者編寫一套代碼，可發佈到iOS、Android、H五、以及各類小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個平臺。

即便不跨端，uni-app同時也是更好的小程序開發框架。

 

二、uni-app適用於哪些人員？

全部的前端開發人員，尤爲是app和小程序開發人員。

有vue和微信小程序基礎的人員，能快速上手uni-app。

不推薦無前端基礎的直接學。

 

三、uni-app的開發工具

毫無疑問，首選uni-app官方推薦工具：https://www.dcloud.io/hbuilderx.html

 

四、uni-app首選學習通道

毋庸置疑，首選uni-app官方文檔：https://uniapp.dcloud.io

熟悉微信小程序文檔的能夠直接跨越性閱讀。

 

五、快速建立一個uni-app項目

安裝好HBuilder-x工具後，打開界面，新建項目--->選擇uni-app

 

 

 

 六、大概目錄介紹，運行方式能夠直接閱讀工具的中文菜單欄或看文檔。

┌─components            uni-app組件目錄
│  └─comp-a.vue         可複用的a組件
├─hybrid                存放本地網頁的目錄，詳見
├─platforms             存放各平臺專用頁面的目錄，詳見
├─pages                 業務頁面文件存放的目錄
│  ├─index
│  │  └─index.vue       index頁面
│  └─list
│     └─list.vue        list頁面
├─static                存放應用引用靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放於此
├─wxcomponents          存放小程序組件的目錄，詳見
├─main.js               Vue初始化入口文件
├─App.vue               應用配置，用來配置App全局樣式以及監聽 應用生命週期
├─manifest.json         配置應用名稱、appid、logo、版本等打包信息，詳見
└─pages.json            配置頁面路由、導航條、選項卡等頁面類信息，詳見

　　

 

 

 

 

學習重點：閱讀文檔，實在不理解的先去學習vue和微信小程序。