uni-app (1): 正式接觸

正式開始學習uni-app, 在以前須要學習vue的相關知識，還有其餘一些知識一樣須要瞭解，雖然不須要太過深刻，可是至少提到後要會用，或者說心中有數，下面這些技術：

node、npm、less/sass/scss、webpack、babel等等，由於在實際學習過程當中會有不少地方涉及到它們，若是對他們沒有必定的瞭解，在學習過程當中會有不少困惑，因此務必須要花上一些時間去學習。

 

關於學習爲何學習uni-app , 除了說是想多學學知識外，無外乎是想接觸接觸終端應用，小程序，對於一致接觸pc的我尤其有吸引力，而uni-app 號稱多端開發其中又有條件編譯，並且還有不少支持，好比html+、native.js 、nvue（native vue）等等，感受是否是又高端了一點（對於其餘一些框架或集成環境），以前用過apicloud一段時間，說實話，也很方便，對於新手來講仍是比較友好的，可是在使用過程當中若是你不想去多學一些關於vue其餘的一些知識，徹底ok，由於webview環境下跟瀏覽器同樣，寫html和js 就完了，關於ui插件什麼的，用插件市場中的就好，可是總感受少了些什麼，而uni-app不一樣，若是你想使用它就必須學習這些知識，是挑戰也是提高，由於人是懶惰的，只有逼到份上才能向前一步不是麼，另外關於apicloud 關於小程序之類的不是太完善，這但是想學習uni-app的一部分緣由，大概就是如此，若是你想的和我同樣，那麼咱們一塊兒開始吧~

 

在關於uni-app 的隨筆中其中會摻雜一些我的的理解，說的不對的地方煩請指正。

 

關於uni-app,官網中是這樣介紹的：uni-app 是一個使用 Vue.js 開發全部前端應用的框架，開發者編寫一套代碼，可編譯到iOS、Android、H五、以及各類小程序（微信/阿里/百度/頭條/QQ）等多個平臺。

是一套框架，也就是半成品工程，利用這個工程能夠省去不少咱們在開放時間，提高開發效率。

在白話uni-app 中，對uni-app 進行了一些說明，uni-app 提供了一個api 庫，同時定義許多經常使用的內置組件，並解釋了終端運行環境與pc瀏覽器運行環境的區分，咱們知道的，node是基於v8 引擎的運行環境，而混合式開放中的webview 則是根據終端類型進行區分。

在node環境中是沒有window、doc這些瀏覽器內置對象的，故uni-app 中也不會有，數據的渲染與綁定徹底交由vue。

另外由於uni-app 是參考了小程序的，可是其中除了追加了一些api外，基本上與小程序中提供的api一致，只是前綴改了

關於CSS

 

 關於尺寸單位使用px 和rpx ，自適應用rpx。關於佈局沒得說你們都推薦使用flex。

 

關於靜態圖，保存在static 中的：

 

基本上這篇官方的介紹就是這些，開始根據官方文檔學習~

開發規範：

首先要了解什麼是SFC、還有相關的介紹vue-loader，它與webpack配合對vue文件進行預編譯與打包。在看這些以前建議必定要看完webpack，至少看完webpack基本概念~

在vue-loader 的介紹中提到了預處理器，其中關於sass/scss 我的沒有看，只是看了less，看我的喜愛了。另外若是是style 和 圖片資源使用webpack引入，須要把  "sideEffects": false 這個取消掉，不然不會webpack不會進行解析。

在style 標籤中使用lang 屬性能夠指定處理類型，好比

<style lang="scss">
/* 在這裏撰寫 SCSS */
</style>

相比sass/sacss ，less的配置就簡單多了，下載loader，在module中配置lessloader便可：

{
                test: /\.(css|less)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }

另外還有stylus，PostCSS，我的沒關注。

關於webpack與babel ，能夠參考 https://www.webpackjs.com/loaders/babel-loader/

 

scrop css ，但單文件組件中，表有scoped 屬性的style 標籤中的樣式至做用域當前組件，對於其餘引入的組件不起做用。

另外注意的是：

 

關於基礎組件：

uni-app 提供的組件複合VUE 組件規範，因此能夠進行擴展，若是寫html 好比div等這些編譯器會編譯爲view等等。

另外關於組件vue文檔中可使用兩種形式，連字符和駝峯，可是建議使用連字符，由於就算是駝峯在轉義的過程當中也會標記爲連字符，且不區分大小寫。

故uni-app 組件的注意事項以下：

另外uni-app 處理提供基礎組件外，還提供其餘的擴展組件，這些擴展組件並非自帶的，使用的時候須要單獨安裝，另外還有一些其餘的擴展組件，其中一部分是官方的還有一些是用戶自傳的。

安裝方法：

npm ：https://www.npmjs.com/package/@dcloudio/uni-ui

zip：https://github.com/dcloudio/uni-ui

做爲一個模塊包的存在，使用起來也是很是方便的。

 

 另外，安裝文檔中提到：其實你不使用sass 也須要安裝文檔說明安裝scss插件，若是是cli建立的項目也要在webpack中使用相對應的loader

 

再往下看若是不本身跟着敲一敲估計不行了~

那麼開始建立第一個uni-app 練習項目