uni-app (1): 正式接觸

本文轉載自查看原文 2019-08-07 20:59 439 uni-app

正式開始學習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、H5、以及各種小程序（微信/阿里/百度/頭條/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 標簽中的樣式至作用域當前組件，對於其他引入的組件不起作用。

另外注意的是：