uniapp 开发规范(兼容性适配)

简介: uniapp 开发规范(兼容性适配)

因 uniapp 需同时兼容PC端,移动端,微信小程序端,app端等,建议按以下开发规范开发,可更加有效避开多端不兼容的情况:

vue 文件使用 div标签包裹

<template>
  <div>
    <!-- 页面代码 -->
  </div>
</template>

容器样式不要写在组件上

此处 class 不要写在 u–form,单独用 view 包裹 u–form 来添加样式

<view class="formBox">
      <u--form>

改组件样式使用样式穿透 + !important

直接在组件上添加样式,会出现某些端不生效的情况,建议统一用样式穿透 + !important实现

  ::v-deep .u-button--square {
    border-radius: 0 !important;
  }

文件上传需做 name 兼容处理

微信小程序上上传文件,无法获取到文件名,需做 name 兼容处理

uploadOK(e) {
  if (e.file.name) {
    // 避免文件名中有逗号,导致云存储无法删除
    e.file.name = e.file.name.replace(/,/g, '')
  }
  this.fileList = [e.file]
},
cloudPath: 'blog/' + timeMark + (this.fileList[0].name || Math.floor(Math.random() * 100)),
目录
相关文章
|
2天前
|
SQL NoSQL 关系型数据库
若依修改02,若以提供了多种版本,RuoYi-Cloud和SpringBoot+Vue都是PC端的,如果想要适配手机端,用Uniapp+vue,导入Mysql和启动Redis
若依修改02,若以提供了多种版本,RuoYi-Cloud和SpringBoot+Vue都是PC端的,如果想要适配手机端,用Uniapp+vue,导入Mysql和启动Redis
|
2天前
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
3 0
|
2月前
|
移动开发 小程序 Android开发
基于jeecgboot的flowable为uniapp适配的流程页面调整
基于jeecgboot的flowable为uniapp适配的流程页面调整
28 0
|
2月前
|
开发框架 JavaScript API
uniapp如何实现跨端适配
uniapp如何实现跨端适配
124 0
|
2月前
|
Web App开发 小程序 Android开发
Uniapp match-media 检测节点 适配大屏小屏 不同屏幕视图组件
Uniapp match-media 检测节点 适配大屏小屏 不同屏幕视图组件
57 0
|
8月前
|
小程序 JavaScript 数据安全/隐私保护
适配最新微信小程序隐私协议开发指南,兼容uniapp版本
前一阵微信小程序官方发布了一个用户隐私保护指引填写说明,说是为了规范开发者的用户个人信息处理行为,保障用户合法权益,小程序、插件中涉及处理用户个人信息的开发者,均需补充相应用户隐私保护指引
108 0
|
10月前
|
小程序
uniapp实现微信小程序横屏适配问题demo效果(整理)
uniapp实现微信小程序横屏适配问题demo效果(整理)
|
10月前
|
小程序 iOS开发
uniapp中IOS端小程序底部黑线适配的方法(整理)
uniapp中IOS端小程序底部黑线适配的方法(整理)
|
11月前
|
JavaScript 前端开发 Android开发
uniapp+vue+uview适配安卓4.4项目实现简单登录和操作页面
uniapp+vue+uview适配安卓4.4项目实现简单登录和操作页面
212 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
11 2