uniapp 多端实现需要用rem适配吗？

Question

刚接触uniapp需要马上上手，目前来说最大的就是架子的问题
还有公用方法的问题，因为要在内网编写代码需要做充分的准备
最重要就是页面适配的问题，是用rem比较好还是用rpx
没有什么经验，提前准备，rem的话用插件比较好还是手写呢？大佬们有推荐吗？

Answer 1

官方文档

架构问题

1.项目结构： 使用HBuilderX创建项目是最简单的方式。你可以选择内置的模板，如Hello uni-app或uni ui项目模板，这些模板包含了常用的组件和API示例。

2.框架详解： Uni-app基于Vue.js，扩展了一些自定义API，支持跨平台开发。它提供了丰富的UI组件库和生命周期方法，方便开发者快速上手。

公用方法

1.全局公共方法： 可以在utils文件夹下创建一个公共方法文件（如public.js），然后在main.js中挂载到Vue.prototype上，这样在所有页面中都可以通过this来访问这些方法。
2.工具类： 也可以创建工具类文件，将常用的方法放在里面，并在需要的地方引入使用。

页面适配

1.rpx vs rem：

• rpx： 如果你的项目主要面向移动端用户，使用rpx会更方便，因为它能自动适配不同屏幕尺寸，比如主要面向微信小程序用户。
• rem： 如果你的项目需要在多个平台上运行（如Web和移动端），使用rem会更合适，因为它是标准的CSS单位，具有更好的兼容性，比如响应式设计。

rem手写与用插件建议

• 如果你希望快速上手并减少重复工作，使用插件是一个不错的选择，插件推荐使用postcss-pxtorem。如果你需要更高的灵活性和控制力，手写代码更适合你。

rem手写的例子

<template>
  <view class="indexBody">
    <page-meta :root-font-size="fontsize+'px'"></page-meta>
    <!-- 在此处布局 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      fontsize: 12,
    };
  },
  onLoad() {
    let screenNumber = 19.2; // 根据设计图计算的比例
    let that = this;
    uni.onWindowResize((res) => {
      that.fontsize = parseFloat(res.size.windowWidth) / screenNumber;
    });
    uni.getSystemInfo({
      success(res) {
        that.fontsize = res.screenWidth / screenNumber;
      },
    });
  },
};
</script>

Answer 2

用 rpx, 如果是打包到 h5, uniapp 会自动把 rpx 转换为 rem。如果你用 rem,不会主动转换为 rpx,其他平台是不认识 rem 的