移動app開發框架uni-app系列2

繼上次對uni-app有了初步認識之後,我們繼續學習這款框架。

首先說一下我對框架提出的一些問題

  • 框架,衆所周知都會內置一些自己css,js和封裝組件,但這些都應該在源文件中找到,以便應對複雜的需求環境,但是我在uni-app的源文件中始終沒找到一個index.css的文件,但是我在谷歌開發者工具中有顯示在某某文件夾下,這讓我很抓狂。(如果哪位大佬找到了,真摯的希望告知一下)

uni-app的upx單位

uni-app 使用 upx 作爲默認尺寸單位, upx 是相對於基準寬度的單位,可以根據屏幕寬度進行自適應。uni-app 規定屏幕基準寬度750upx。
頁面元素寬度在 uni-app 中的寬度計算公式: 750 * 元素在設計稿中的寬度 / 設計稿基準寬度

注意:
動態綁定的 style 不支持直接使用 upx。

<!-- - 靜態upx賦值生效 -->
<view class="test" style="width:200upx"></view>
<!-- - 動態綁定不生效 -->
<view class="test" :style="{width:winWidth + 'upx;'}"></view>

解決辦法:

在js中用uni-app的函數uni.upx2px()轉換爲px之後進行動態綁定

uni-app的css執行順序

導入的css先執行 > 每個頁面裏面的style後執行 > 內聯樣式

@import "../../common/uni.css";
導入外聯樣式表

一些共有的css寫在文件目錄的common文件夾中

原生app、混合app、Webapp
移動app開發框架(uni-app、5+ mui)系列1
移動app開發框架uni-app系列2
移動app開發框架uni-app系列—-填坑

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章