移动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