下載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。
另外在pages目錄下新增頁面的時候,配置文件中會自動追加和刪除相關page。
其中關於導航欄,官方建議使用原生又uni-app提供的原生導航,如果自定義導航,可能會有很多問題,https://ask.dcloud.net.cn/article/34921
尤其是前端導航與下拉刷新之間的沖突。
關於subNVue,這里解釋一下nvue,剛開始看的時候我也有點懵,啥意思,vue提供的新擴展嗎?並不是,nvue 是與native.js 結合的一種組件規范,它可以直接調用原生代碼中的api,官方建議是只是在有特定需求的地方使用nvue,
而這里提到的subNVue 指的是通過nvue 創建的一種子窗口組件,它使用的是原生渲染的方式,通過窗口進行的實現,在做一些浮動的時候,比如遮罩蒙板,視頻彈幕這種的時候用得上。
所以使用nvue的時候想要調試必須在終端環境,模擬器或者微信工具。如果運行之前應該有記錄,這里不表。
多頁面通訊:有兩種,官方推薦新的方式,注冊監聽
// 在 subNVue/vue 頁面注冊事件監聽方法 // $on(eventName, callback) uni.$on('page-popup', (data) => { vm.title = data.title; vm.content = data.content; }) // 在 subNVue/vue 頁面觸發事件 // $emit(eventName, data) uni.$emit('page-popup', { title: '我是一個title', content: '我試data content' });
另,官方提供了一些建議:所以不要濫用它為好
還有就是關於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個函數:
uni.$emit(eventName,OBJECT) uni.$on(eventName,callback) uni.$once(eventName,callback) uni.$off([eventName, callback]) // 基本上vue、jqeruy 還有一些第三方庫都有類似的函數
東西很多,框架簡介才看到配置~~~
另外關於這個項目的練習包,如果各位有興趣可以與我一起做練習,提交一些牛X或者感覺很好的東西
github: https://github.com/PengfeiLiOnGit/learnuniapp