uniapp开发踩坑兼容问题【第一弹！！】，血泪史o(╥﹏╥)o，一次学习终生避雷！！！

站长

2023年08月09日 00:09 · 阅读数 36

2.移动端适配与兼容性问题

1）new Date（）在IOS上出现值为NAN的问题

但在IOS下，这是使用获取到的值是NAN。原因：因为IOS下的new Date()不支持"-“这个字符解决方法：把”-“改成‘”/"就可以了
```
new Date("2017-08-11 12:00:00".replace(/-/g, "/"));
```

2) Android部分机型使用height和line-height等值设置垂直居中，但会显示偏高的问题0

原因：貌似是有部分Android机型有自己默认的line-height，我们额外设置的line-height不起作用。解决办法：设置line-height：normal，再通过padding去设置居中就可以了。

line-height：normal; padding:xxpx 0;

### 3) 防止手机中网页放大和缩小。
- viewport 设置不缩放
```html
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

4) iphone及ipad下输入框默认内阴影

Element {
 -webkit-tap-highlight-color:rgba(255,255,255,0)
}

5) 某些Android手机圆角失效

background-clip: padding-box;

6) 移动端300ms点击延迟

设置meta标签禁止缩放

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

FastClick

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

7) 点击穿透问题

来得很直接github上有个fastclick可以完美解决引入fastclick.js，因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上

window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );

对于B元素本身存在默认click事件的情况，应及用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault()，从而阻止click事件的产生。

$("#aa").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});

8) 电话号码识别

在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：
7 位数字，形如：1234567
带括号及加号的数字，形如：(+86)123456789
双连接线的数字，形如：00-00-00111
11 位数字，形如：13800138000


关闭识别
html复制代码<meta name="format-detection" content="telephone=no" />

9) 邮箱识别

邮箱识别安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的 meta 来管别邮箱的自动识别：


<meta content="email=no" name="format-detection" />

10) 常用meta 标签的设置

<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转
<meta name="full-screen" content="yes">             //全屏显示
<meta name="browsermode" content="application">     //UC应用模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
<meta name="x5-orientation" content="portrait">     //QQ强制竖屏
<meta name="x5-fullscreen" content="true">          //QQ强制全屏
<meta name="x5-page-mode" content="app">            //QQ应用模式

11) 清除输入框内阴影

div {
  -webkit-appearance: none;
}

12) 输入框默认字体颜色

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #c7c7c7;
}

13) 用户设置字号放大或者缩小导致页面布局错误

body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}

14) android系统中元素被点击时产生边框

部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。去除代码如下

css复制代码a,button,input,textarea{
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-user-modify:read-write-plaintext-only; 
}

15) audio 和 video 在 ios 和 andriod 中自动播放

这个不是bug，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。加入自动触发播放的代码

$('html').one('touchstart', function() {
  audio.play()
})

16) iOS 上拉边界下拉出现空白

手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。
在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。

document.body.addEventListener(
  'touchmove',
  function(e) {
    if (e._isScroller) return
    // 阻止默认事件
    e.preventDefault()
  },
  {
    passive: false
  }
)

17) onkeyUp 和 onKeydown 兼容性问题

IOS 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，但是在 ios 手机浏览器中用输入法输入之后，并未立刻相应 keyup 事件

18) IOS12 输入框难以点击获取焦点，弹不出软键盘

定位找到问题是 fastclick.js 对 IOS12 的兼容性，可在 fastclick.js 源码或者 main.js 做以下修改

 FastClick.prototype.focus = function(targetElement) {
  var length
  if (
    deviceIsIOS &&
    targetElement.setSelectionRange &&
    targetElement.type.indexOf('date') !== 0 &&
    targetElement.type !== 'time' &&
    targetElement.type !== 'month'
  ) {
    length = targetElement.value.length
    targetElement.setSelectionRange(length, length)
    targetElement.focus()
  } else {
    targetElement.focus()
  }
}

19) IOS 键盘收起时页面没用回落，底部会留白

通过监听键盘回落时间滚动到原来的位置

window.addEventListener('focusout', function() {
  window.scrollTo(0, 0)
})

//input输入框弹起软键盘的解决方案。
var bfscrolltop = document.body.scrollTop
$('input')
  .focus(function() {
    document.body.scrollTop = document.body.scrollHeight
    //console.log(document.body.scrollTop);
  })
  .blur(function() {
    document.body.scrollTop = bfscrolltop
    //console.log(document.body.scrollTop);
  })

20) iOS 下fixed 失效的原因

软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。解决方法: 不让页面滚动，而是让主体部分自己滚动,主体部分高度设为 100%，overflow:scroll

<body>
  <div class='warper'>
    <div class='main'></div>
  <div>
  <div class="fix-bottom"></div>
</body>

.warper {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */
}
.fix-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

3.获取用户电量进行提示

navigator.getBattery().then(function (battery) {
  // 获取设备电量剩余百分比
  var level = battery.level //最大值为1,对应电量100%
  console.log('Level: ' + level * 100 + '%')

  // 获取设备充电状态
  var charging = battery.charging
  console.log('充电状态: ' + charging)

  // 获取设备完全充电需要的时间
  var chargingTime = battery.chargingTime
  console.log('完全充电需要的时间: ' + chargingTime)

  // 获取设备完全放电需要的时间
  var dischargingTime = battery.dischargingTime
  console.log('完全放电需要的时间: ' + dischargingTime)
})

监听用户电池状态变化

navigator.getBattery().then(function (battery) {
  // 添加事件，当设备电量改变时触发
  battery.addEventListener('levelchange', function () {
    console.log('电量改变: ' + battery.level)
  })

  // 添加事件，当设备充电状态改变时触发
  battery.addEventListener('chargingchange', function () {
    console.log('充电状态改变: ' + battery.charging)
  })

  // 添加事件，当设备完全充电需要时间改变时触发
  battery.addEventListener('chargingtimechange', function () {
    console.log('完全充电需要时间: ' + battery.chargingTime)
  })

  // 添加事件，当设备完全放电需要时间改变时触发
  battery.addEventListener('dischargingtimechange', function () {
    console.log('完全放电需要时间: ' + battery.dischargingTime)
  })
})

兼容性

4.实用工具（一行代码解决问题）

juejin.cn/post/722844…

5.实用工具（操作符）

juejin.cn/post/722760…

6.实用工具（api!!!!!!实用Api）

juejin.cn/post/722951…

7.超爽配置

vscode 点击设置打开 settings.json 中配置

"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\|;:'",.<>/?"
双击选中- —— _ 链接的类名例如："mg-y-sm"

输入效果配置

// power mode 插件配置
"powermode.enabled": true, //启动效果
"powermode.presets": "particles", // flames 火花效果、  particles 粒子、 magic 魔法、 fireworks 烟花、 clippy 曲别针  
"powermode.enableShake": false, // 关闭代码抖动 「建议关闭，开启容易眼睛花」

8.小程序版本更新提示

onShow: function(e) {
			console.log('showed2', e);
			uni.hideTabBar();
            //系统获取   本API返回全局唯一的版本更新管理器对象： updateManager，用于管理小程序更新。
			const updateManager = uni.getUpdateManager();
			console.log(updateManager, "uploadRes");
			updateManager.onCheckForUpdate(function(res) {
				console.log(res, "uploadRes");//返回true 或 false  是否更新
				// 请求完新版本信息的回调
				console.log(res.hasUpdate);
				if (res.hasUpdate) {
					updateManager.onUpdateReady(function(res) {
						uni.showModal({
							title: '更新提示',
							content: '新版本已经准备好，是否重启应用？',
							success(res) {
								if (res.confirm) {
									// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
									updateManager.applyUpdate();
								}
							}
						});

					});
					updateManager.onUpdateFailed(function(res) {
						// 新的版本下载失败
						uni.showModal({
							title: "新版本已更新！",
							content: "新版本已上线，请重启小程序完成更新！"
						});
					});
				}
			});

		},

10.echarts 模板可用网站 (总有一个合适的)

madeapie.com/#/

www.makeapie.cn/echarts_cat…

chart.365api.cn/#/

www.isqqw.com/

ppchart.com/#/

11. vite 打包 config.js文件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import {
  createStyleImportPlugin,
  ElementPlusResolve
} from 'vite-plugin-style-import'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    }),
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name: string) => {
            return `element-plus/theme-chalk/${name}.css`
          }
        }
      ]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    // open: true,
    // host: "127.0.5.1",
    // port: 9000, //配置开发服务器的端口
    // 开发服务器 非开发环境需要代理：Nginx反向代理

    proxy: {
      '/basic-api': {
        target: 'http://192.168.135.136:8080', // 代理的目标地址
        changeOrigin: true, // 开启跨域
        rewrite: (path) => path.replace(/^\/basic-api/, '')
      }
    }
  }
})

12.手机端点击input输入框时网页自动放大

这是因为在移动端自适应宽度的代码中，没有把input的自动缩放关闭！一般常见于苹果手机的ios系统，而安卓系统似乎是默认关闭。

input框自动放大，虽然说有便于用户的输入和阅读，但也同时给用户带来了视觉的麻烦，所以一般情况下，我们都是选择关闭自动缩放的！

那么该如何关闭input输入框在手机端的这个缩放效果呢？

1，找到你的网页头部head的代码，查看代码并找到，下面的这段：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

这段

2，找到之后，将这段代码更改为：

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

转载自:https://juejin.cn/post/7244358444348768315