uni-app (2) : 開始

下載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