uni-app詳解
一哨免、介紹
uni-app 是一個使用 Vue.js(opens new window)開發(fā)所有前端應用的框架蔚出，開發(fā)者編寫一套代碼捐名，可發(fā)布到iOS、Android棋恼、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）锈玉、快應用等多個平臺爪飘。
uni-app底層集成了native技術，就是h5+引擎拉背，能調用手機原生api师崎，所以uniapp能開發(fā)接近原生性能的app，這是js引擎部分椅棺；它是雙引擎犁罩，渲染又是獨立一個獨立引擎。這個渲染引擎又分為nvue渲染和webview渲染两疚，nvue其實就是集成的weex床估，webview這個有了解的應該知道它的內核是webkit。
二鬼雀、uni-app和vue的區(qū)別：
- uni-app可以通過打包實現一套代碼多端運行顷窒，而vue不行。
- uni-app有自動的框架預載源哩，加載頁面的速度更快鞋吉，vue沒有。
- uniapp使用小程序的標簽励烦，vue使用web端的標簽谓着。
- uni不支持vue-router，使用自帶的路由坛掠。
三赊锚、uni-app優(yōu)點：
- uni-app是一套可以適用多端的開源框架，一套代碼可以同時生成ios屉栓，Android舷蒲，H5，微信小程序友多，支付寶小程序牲平，百度小程序等。
- uni-app對前端開發(fā)人員比較友好域滥，學習成本比較低纵柿，首先uni-app是基于vue.js的蜈抓。其次封裝的組件和微信小程序的組件一樣。
- uni-app使用HBX進行開發(fā)昂儒，HBX對于vue語法等支持可以說是比較完備了沟使。
以下內容分別使用Vue CLI 和 云開發(fā)平臺教您從頭開始構建自己的應用。
Vue-CLI 快速搭建項目
一渊跋、搭建本地開發(fā)環(huán)境
- Vue CLI 4.x 需要Node.js 8.9 或更高版本（推薦v10+）腊嗡。您可以使用n、nvm或nvm-windows 在同一臺機器上管理多個版本的Node刹枉。 要了解如何安裝 Node.js叽唱，參閱nodejs.org。 如果你不確定系統(tǒng)中正在運行的 Node.js 版本是什么微宝，請在終端窗口中運行node -v棺亭。
- npm 包管理器 因為我們通常都會使用Hexo 提供的腳手架搭建項目結構，所以要下載并安裝 npm 包蟋软。本指南使用 npm 客戶端命令行界面镶摘，該界面默認安裝在 Node.js。要檢查你是否安裝了 npm 客戶端岳守，請在終端窗口中運行 npm -v 凄敢。
- 你可以使用 Vue CLI 來創(chuàng)建項目，生成應用和庫代碼湿痢，以及執(zhí)行各種持續(xù)開發(fā)任務涝缝，比如測試、打包和部署譬重。
要安裝新軟件包拒逮，請使用以下命令之一：
npm install -g @vue/cli@4
二、創(chuàng)建uni-app
- 使用正式版（對應HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project
- 使用alpha版（對應HBuilderX最新alpha版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
- 使用Vue3/Vite版
1.創(chuàng)建以 javascript 開發(fā)的工程（如命令行創(chuàng)建失敗臀规，請直接訪問 gitee(opens new window)下載模板）
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
2.創(chuàng)建以 typescript 開發(fā)的工程（如命令行創(chuàng)建失敗滩援，請直接訪問 gitee(opens new window)下載模板）
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
此時，會提示選擇項目模板（使用Vue3/Vite版不會提示塔嬉，目前只支持創(chuàng)建默認模板）玩徊，初次體驗建議選擇 hello uni-app 項目模板，如下所示：
三谨究、啟動應用服務器
進入工作區(qū)目錄恩袱，并啟動這個應用。
cd my-project
yarn serve
hexo server命令會構建本應用胶哲、啟動開發(fā)服務器憎蛤、監(jiān)聽源文件，并且當那些文件發(fā)生變化時重新構建本應用纪吮，
也會打開瀏覽器俩檬，并訪問 http://localhost:8080/ 。
你會發(fā)現本應用正運行在瀏覽器中碾盟。
參考文獻：https://uniapp.dcloud.io/
云平臺一鍵部署uni-app
作為uni-app開發(fā)者的你棚辽，云開發(fā)平臺為你提供了一站式，全云端的開發(fā)平臺冰肴，讓你可以打開瀏覽器就完成開發(fā)屈藐，調試，上線熙尉，同時云開發(fā)平臺底層調用的是阿里云集團Serverless產品联逻，可以實現低門檻開發(fā)，部署检痰，調試包归，降低開發(fā)上手成本，讓uni-app框架可以一鍵快速部署铅歼！
一公壤、創(chuàng)建環(huán)境
想要一鍵部署uni-app，需要以下賬號和服務：
- Github賬號 (https://github.com/)椎椰，
- 阿里云賬號厦幅，并使用阿里云賬號登錄云開發(fā)平臺 (https://workbench.aliyun.com/)，為保證最好的使用體驗慨飘，請使用Chrome瀏覽器确憨。開通OSS服務。
- 未開通阿里云OSS的用戶瓤的，點擊鏈接 (https://workbench.aliyun.com/product/open?code=oss)開通OSS服務休弃。OSS開通免費，有一定的免費額度堤瘤，超過額度之后按量付費玫芦。
二、創(chuàng)建uni-app應用
- 創(chuàng)建前端應用本辐。打開快速開始 https://workbench.aliyun.com/app桥帆，找到uni-app點擊創(chuàng)建「創(chuàng)建應用」按鈕。
- 云資源訪問授權慎皱。如果您之前沒有使用過云開發(fā)平臺老虫，會出現云資源授權管理的選項，往下拉出現直至同意授權的字樣茫多，點擊「同意授權」后出現授權成功祈匙，點擊進入「下一步」。
- 綁定Github賬號。授權完成后選擇來源倉庫為Github夺欲，按照提示點擊去綁定跪帝，綁定GitHub帳號，登錄后并點擊Authorize Aliyunworkben允許云開發(fā)平臺構建些阅、發(fā)布你的GitHub代碼為可訪問的網站伞剑。
- 選擇fork好的“uni-app”代碼倉庫。選擇第一步中的代碼倉庫市埋，主干分支黎泣，并點擊下一步。主干分支一般指的是代碼的master或main等分支缤谎。
填寫基本信息抒倚，完成創(chuàng)建。填寫基本信息并點擊「完成」坷澡。成功后進入到應用詳情和部署界面托呕。
三、在日常環(huán)境部署
- 一鍵進行應用部署洋访。在應用詳情頁面點擊日常環(huán)境的「部署」按鈕進行一鍵部署镣陕，部署狀態(tài)變成綠色已部署以后可以點擊訪問部署網站查看效果。
- 訪問uni-app網站姻政。日常環(huán)境的測試域名也是可以訪問的呆抑，點擊訪問已部署網站按鈕會出現一個彈出，點擊彈出上的立即訪問就能夠訪問已經部署好的站點了汁展。在部署完成后鹊碍，可以繼續(xù)本地編碼，并將代碼push到應用的“基本信息”中對應的代碼倉庫內食绿。
多端應用一鍵上云侈咕！
現如今身處在隨時會到來新狀況的大環(huán)境下，做好自己便是在不安中樹立了一顆屹立不倒的松樹器紧。作為開發(fā)者們每天都要面臨新的代碼耀销、應用，保持隨時學習的狀態(tài)和能力也可讓自己多一份安穩(wěn)铲汪。阿里云云開發(fā)平臺的初衷是為每一位開發(fā)者提供免費熊尉、便捷的云上研發(fā)工作平臺，通過學習與實操演練兩種模式掌腰，從入門到精通快速上手Serverless和云開發(fā)技術狰住。0門檻全云端開發(fā)、隨時隨地在線協(xié)同齿梁、業(yè)界領先Serverless架構催植、行業(yè)應用一件初始化等特性也通過每次的實踐伴隨著你肮蛹、我。
云原生應用创南、主機應用部署伦忠、前端應用部署三大板塊的提供，供開發(fā)者們找到最合適自己神器扰藕，令開發(fā)工作事半功倍缓苛。其中滿足IoT語音技能、小程序邓深、H5應用等開發(fā)者低門檻應用開發(fā)的需求；也支持代碼編譯部署到ECS主機服務器的場景笔刹，幫助用戶管理傳統(tǒng)主機應用的能力芥备；讓前后端應用能夠更高效地協(xié)同。平臺將持續(xù)與開發(fā)者一起共同成長舌菜，幫忙開發(fā)者更好萌壳、更快以及更低成本的開發(fā)，多端的應用更加快速的上云日月。
