前言

最近离职了，找到个短期的活，过程中感觉也有遇到一些值得记录的点，写一下吧！

设备管理 app

这次开发的是一个设备管理 app，对设备的检查、保养、维修等业务进行管理，比如创建维修单，维修人员接单，负责人审核验收。

项目使用 uniapp ，适配 安卓和 ios，不算复杂，但也挺繁琐，因为涉及很多状态，不同状态需要不同操作，对于不同的角色也要进行判断处理，比如刚刚说到的验收，只能是负责人执行。期间也有遇到一些兼容性问题或奇奇怪怪的问题，记录一下吧

问题记录

页面还是组件

场景：点击完成维修按钮，弹出维修结果表单，填写并提交

在 pc 大屏幕，一般会使用弹窗弹出表单组件，在手机小屏幕上有两种方式：

使用组件，全屏覆盖在当前页面上
跳转新页面，填写后返回

最好是使用 2 ，因为用户体验更好，如果使用 1 全屏覆盖的组件，用户侧滑时，期望是关闭这个组件，然而实际上会返回到前一个页面，又要重新进入点击提交了，体验很差。

页面传参

如果使用 1 ，就是组件传参嘛，props emit 传参，如果使用页面的话，可以调用前页面的方法，通过方法参数传递

// 前页面：定义方法
methods: {
    afterConfirm(formData) {
        console.log(formData)
    }
}

// 跳转后的页面：获取前页面实例，调用前页面的的方法
const pages = getCurrentPages()
const prevPage = pages[pages.length - 2]
prevPage.$vm.afterConfirm(this.formData)

iOS 无法预览图片和视频

图片预览

uniapp 有提供图片预览 api ： uni.previewImage(OBJECT) ，但是在预览后端返回的图片 url 时，ios 上会黑屏，而将 url 传到 image 标签 src 上，是可以正常显示的，所以解决方式是自己写一个预览的组件，接收 url ，传到 image 显示，也可以直接用别人做好的： q-previewImage

视频预览

对于视频预览，官方没有相关的 api ，需要写一个 video 标签，接收后端返回的视频 url，打包时需要引入视频模块 ask.dcloud.net.cn/article/283 ，否则会播放不了

iphone11 tab 切换后文字不显示

这是一个奇葩问题，很常见的 tab 切换功能，也没用到什么 api，但是就是在较新的 iphone 上文字显示不正常（试了下我的老 iphone7 正常）

解决方式就是给文字多套一层 view 。。。

<view class="tab-wrap">
      <view :class="['tab-item', {'active': curTab === item.value }]" v-for="item in tabs" :key="item.value" @click="handletabselect(item)">
          <view>{{ item.name }}</view> <!-- 这里多套一层 view -->
      </view>
</view>

IOS type 为 number 的 input 无法输入小数

改用 digit

app 顶部状态栏和底部安全区 padding

app 需要加上顶部状态栏和底部安全区的 padding，不然会挡住状态栏和 iphone 底部的横线，uniapp 有提供相应的变量

ask.dcloud.net.cn/article/355… zh.uniapp.dcloud.io/tutorial/sy…

  padding-bottom: env(safe-area-inset-bottom);
  padding-top: var(--status-bar-height);

uniapp 开发设备管理类 安卓 ios app 总结

前言