uni-app学习（一）目录结构-跳转页面-尺寸单位

uni-app目录结构

┌─components uni-app组件目录

│        └─comp-a.vue 可复用的a组件

├─hybrid 存放本地网页的目录

├─platforms 存放各平台专用页面的目录

├─pages 业务页面文件存放的目录

│       ├─index

│       │       └─index.vue index页面

│       └─list

│                └─list.vue list页面

├─static 存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此

├─main.js Vue初始化入口文件

├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期

├─manifest.json 配置应用名称、appid、logo、版本等打包信息

└─pages.json 配置页面路由、导航条、选项卡等页面类信息

 

 

路由：

uni-app路由全部交给框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式，不支持 Vue Router

{
			"path": "pages/component/scroll-view/scroll-view",
			"style": {
				"navigationBarTitleText": "scroll-view"
			}
		},

在pages文件夹中新建的页面需要在pages.json中配置路径和样式才能生效。

 

路由跳转：（理解为页面跳转）

uni-app 有两种路由跳转方式：使用navigator组件跳转、调用API跳转。

navigator 类似于<a>标签，超链接模式跳转。

调用API跳转，可理解为请求响应模式跳转。

 

尺寸单位：

uni-app upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。

开发者可以通过设计稿基准宽度计算页面元素 upx 值，设计稿 1px 与框架样式 1upx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

换言之，页面元素宽度在 uni-app 中的宽度计算公式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

也就是说不管屏幕多大都分成750份，其中的一份就是1upx。

• 注意 upx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。
• 动态绑定的 style 不支持直接使用 upx

  <!-- - 静态upx赋值生效 -->
  <view class="test" style="width:200upx"></view>
  <!-- - 动态绑定不生效 -->
  <view class="test" :style="{width:winWidth + 'upx;'}"></view>

  此时可使用 uni.upx2px(Number) 转换为 px 后再赋值。

  <template>
      <view>
          <view class="half-width" :style="{width: halfWidth}">
              半屏宽度
          </view>
      </view>
  </template>
  
  <script>
      export default {
          computed: {
              halfWidth() {
                  return uni.upx2px(750 / 2) + 'px';
              }
          }
      }
  </script>
  <style>
      .half-width {
          background-color: #FF3333;
      }
  </style>