快速入門uni-app,把想看的網站變APP。
下載hbuildx,這裡官方提供了幾種安裝包,有完全版,還有beta版,還有標準版,隨便下一個吧,或者直接下載標準版的,因為它最小。
1.建立uni-app,直接選擇uni-app 預設模版(hello-app專案可以拿來看看,不建議開發時使用,wap2app是針對wap轉app端的,5+app 使用htmlplus,uni-app對html5+ 進行了整合,並建議直接使用uni-app即可,小程式那就是小程式咯,讓我們心大一點,練習多端吧)
關於目錄結構,可以在開放規範中看到或者直接建立一個heoll 模版專案看看,各個資料夾之間的關係和作用都比較明確,對於uni-app的配置檔案需要仔細看看。
2.配置
manifest.json 這個檔案在移動應用中屢見不鮮,在uni-app也有關這個檔案的解釋https://developer.mozilla.org/zh-CN/docs/Web/Manifest
檔案是應用的配置檔案,用於指定應用的名稱、圖示、許可權等。個人覺得就是對映,在不同的環境下具體的左右略有不同,比如webpack 中是指向原始檔案的對映關係等。
uni-app 中有一些自定義屬性比如appid,是用來標識雲端編譯用的。https://ask.dcloud.net.cn/article/35907
在ide中開啟這個檔案,會有一個新的檢視,是中文的,如果你要詳細了解關係,可以到檔案目錄下開啟這個檔案檢視或者直接點選最下方的原始碼檢視進行檢視。另外有一些配置可能找不到,但是在原始碼檢視中可以找到,還有一些配置,預設專案是沒有的,比如超時時間的設定。
啟動圖:配置.9 圖片製作流程 https://ask.dcloud.net.cn/article/35527
開啟下載工具 draw9patch.bat(這裡我沒有開啟,處理檔案報錯,不去深究了,看第二種方法,通過as,開啟as)
新建一個as專案,找一個png圖片丟到as中,右鍵建立.9 圖片
開啟這個檔案,點選滑鼠座標在邊上即可調整拉伸區域與內容區域,類似下面這種,關於四個邊的概念大家去看下文件,類似下面這種內容居中的圖片(一般都是這樣),拉伸的時候左右兩側和上下兩側拉伸空白,在操作的時候需要先control選擇拉伸區域,然後再shift 去掉一部分的拉伸器區域~
像這樣搞定後就行了,然後根據uni-app的規定指定圖片大小上傳。
另外:此用法只適用與android,ios就一個個上傳吧。
檢視json原始碼,其中有一項為第三方sdk,配置後可使用第三方sdk的整合,一些常用的第三方sdk已整合,比如授權登入、分享、支付等。
更多的配置自行看吧,再此不表。
第二個配置檔案 pages.json 看名字就看的出來是配置頁面用的
關於pages,新增的頁面需要追到到page檔案中,定義全域性樣式後,每個page可以單獨的配置其style。
其中關於導航欄,官方建議使用原生又uni-app提供的原生導航,如果自定義導航,可能會有很多問題,https://ask.dcloud.net.cn/article/34921
尤其是前端導航與下拉重新整理之間的衝突。
關於subNVue,這裡解釋一下nvue,剛開始看的時候我也有點懵,啥意思,vue提供的新擴充套件嗎?並不是,nvue 是與native.js 結合的一種元件規範,它可以直接呼叫原生程式碼中的api,官方建議是隻是在有特定需求的地方使用nvue,
而這裡提到的subNVue 指的是通過nvue 建立的一種子視窗元件,它使用的是原生渲染的方式,通過視窗進行的實現,在做一些浮動的時候,比如遮罩蒙板,視訊彈幕這種的時候用得上。
多頁面通訊:有兩種,官方推薦新的方式,註冊監聽
還有就是關於subNVue的style 並不是我們平時理解的所有樣式表,它自有規則,具體請看官網,其中有幾個重要的屬性,比如type、position、dock。
conditon:
指定頁面,也就說不要不用每次啟動都要重新點一遍來看,只需要指定我們當前除錯的頁面即可,這個配置只在開發時候生效,正式編譯打包後不起作用。
"condition":{ "current":0, "list":[ { "name":"me", "path":"pages/me/me", "query":"" } ] }分包:這裡是針對小程式的,因為小程式對包的大小有限制,所以在上傳小程式的時候需要對包進行管理,小程式允許分包的存在。
另外在配置這個文件中還有package.json ,vue-config.json , uni.scss 的介紹
package.json :因為uni-app 是基於vue的,在編譯時又是依賴與node的,所以可以新增打包檔案,若是通過cli建立的專案,必須自己進行配置,對於通過ide建立的專案,則看需求。
vue.config.js 類似webpack它們都有配置檔案或直接通過cli進行打包或編譯。其中有一些uni-app不支援,知曉即可。
對於內建的scss,可以進行應用與修改,其中的變數通過在style標籤中指定lang 即可進行引用。
另外日誌什麼的,有的集中型別不多說了,在HBuilder裡可以使用程式碼塊,可以快速補全。
生命週期:
這個標題標紅,個人認為生命週期對於一個框架來說非常的重要。
1.應用生命週期:最後一個監聽,比如之前說的nvue和vue之間互動就用它。
應用生命週期監聽一般都在APP.VUE 中進行註冊監聽,作為app的主入口。
應用啟動會,監聽的回撥執行相關邏輯。
h5 列印效果如下:
2.頁面監聽函式
相比應用監聽函式,頁面監聽函式使用的是最多的,uni-app 提供了很多內建鉤子,不截圖了,比較多。
這裡的onLoad 和onShow 給我感覺特別好,相比apicloud 每次新的頁面開啟,除非設定強制重新整理,否則會進行快取,要麼每次開啟的時候傳送訊息事件,一個入口還好,
如果多個入口,會特別痛苦,除非自己再定義一個工具類什麼,而uni-app的這2個鉤子,可以說完美的避開了這些瑣事,再次顯示的時候,我們可以做一些其他事情了。
並且,頁面滾動不要自己再去監聽dom什麼的了,直接提供了鉤子,方便多了。
還有,對於原生搜尋框,也就是之前提到的searchInput 也提供了回撥
關於nvue的宣告週期:基本上與vue保持一致性。
關於各個頁面之間通訊:
使用uni-app 提供的事件自定義監聽機制可以對其進行監聽。(因為是uni所以只能是終端測試)。
全域性監聽提供了4個函式: