uni-app入門

uni, 從這個單詞的意思，就能看的出來，Dcoud社區的野心 這個試圖統治整個前端界的技術，到底有沒有那么好呢？

科普

Dcloud是干嘛的？ 著名的國產開源開發工具，Hbuilder，就是他們家的產品之一 他們家另外一款重量級產品，就是H5+App技術

簡單的說，一個前端，可以利用他們提供的開發環境，以及【MUI】 框架
輕輕松松的就可以用JS寫出 安卓 和 IOS應用
（好吧，其實也沒那么輕松，學習成本還是挺高的）
盡管現在已經有了 react-native 和Flutter這樣的 優秀的技術

但個人認為H5+技術，更加接近手機端原生規范。

H5+并沒能滿足他們的野心，于是又推出了uni-app這是一個多端的開發框架。簡單的說： 你寫出一套代碼，然后可以根據需要 打包出 web應用、安卓app、IOSapp、微信小程序、支付寶小程序、頭條小程序、百度小程序......

趕緊去官網看一下介紹，感受一下它牛逼的氣息。

https://uniapp.dcloud.io/

關于uni-app的由來建議大家去看一下這個鏈接 https://uniapp.dcloud.io/history關于小程序，微信并不是鼻祖，Dcloud才是

學習成本高嗎

如果你熟悉微信小程序開發
如果你熟悉vue框架
那么學習成本 ~~ 基本等于0 因為它采用了小程序的項目架構，同時結合vue框架技術來編寫參考這個鏈接即可 （mpvue） http://mpvue.com/

注意事項

為了實現多端兼容，綜合考慮編譯速度、運行性能等因素，uni-app 約定了如下開發規范：

• 頁面文件遵循 Vue 單文件組件 (SFC)，也就是必須單文件組件的形式編寫頁面組件
• 標簽靠近小程序規范，詳見uni-app 文檔也就是用小程序的組件寫頁面標簽
• 接口能力（JS API）靠近微信小程序規范，詳見文檔例如 uni.request(...)
• 數據綁定及事件處理同 Vue.js 規范，同時補充了App及頁面的生命周期例如 onLoad、onShow、onHide等
• 為兼容多端運行，建議使用flex布局進行開發

一個uni-app工程，默認包含如下目錄及文件：

uni-app 在發布到H5時支持所有vue的語法；

發布到App和小程序時，由于平臺限制，無法實現全部vue語法，但uni-app仍是是對vue語法支持度最高的跨端框架。

相比Web平臺， Vue.js 在 uni-app 中使用差異主要集中在兩個方面：

• 新增：uni-app除了支持Vue實例的生命周期，還支持應用啟動、頁面顯示等生命周期
• 受限：相比web平臺，在小程序和App端部分功能受限，具體參見文檔。

https://uniapp.dcloud.io/use

---

uni-app App 端內置 HTML5+ 引擎

我們用 js 可以直接調用豐富的手機端原生能力。
使用H5+ API的時候，需要注意一些內容，詳見文檔https://uniapp.dcloud.io/use-html5plus

---

作為一個跨了這么多端的集大成者，沒有點坑是不可能的

詳情參見文檔，實際的坑，尤其是app端，其實遠不止這么多
不過uni-app發展迅速，相信這些問題很快會得到解決https://uniapp.dcloud.io/matter

動手嘗試一下

1、下載hubuildX工具

2、在點擊工具欄里的文件 -> 新建 -> 項目：

3、選擇uni-app，輸入工程名，如：hello-uniapp，點擊創建，即可成功創建 uni-app。點擊模板里的 Hello uni-app 即可體驗官方示例。

4、運行方式一，瀏覽器運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到瀏覽器 -> 選擇瀏覽器，即可在瀏覽器里面體驗uni-app 的 H5 版。

5、運行方式二，真機運行：連接手機，開啟USB調試，進入hello-uniapp項目，點擊工具欄的運行 -> 真機運行 -> 選擇運行的設備，即可在該設備里面體驗uni-app。

6、運行方式三，在微信開發者工具里運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 微信開發者工具，即可在微信開發者工具里面體驗uni-app。

7、在HBuilderX工具欄，點擊發行，選擇原生app-云端打包，如下圖：

8、發布為H5網頁應用

在 manifest.json 的可視化界面，進行如下配置（發行在網站根目錄可不配置應用基本路徑），此時發行網站路徑是 http://www.xxx.com/h5，如：https://uniapp.dcloud.io/h5。

在HBuilderX工具欄，點擊發行，選擇網站-H5手機版，如下圖，點擊即可生成 H5 的相關資源文件，保存于 unpackage 目錄。

這里是一些官方示例和第三方案例

https://uniapp.dcloud.io/case千鋒HTML5學院：微信小程序學習筆記（五）-- 小程序UI組件庫?zhuanlan.zhihu.com千鋒HTML5學院：uni-app學習筆記（二）-- uni-app詳解?zhuanlan.zhihu.com

總結

以上是生活随笔為你收集整理的5地图组件 uni_uni-app学习笔记（一）-- uni-app简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。