小程序开发安卓/ios兼容踩坑合集

这篇具有很好参考价值的文章主要介绍了小程序开发安卓/ios兼容踩坑合集。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

时间格式时IOS不兼容的问题

原因:iOS系统不能识别XXXX-XX-XX(2020-05-20 12:00:00)格式的,需要将格式转换成 2020/05/20
12:00:00

解决:

var date1 ="2020-05-20 12:00:00"
date1 = date1.replace(/-/g, '/');
console.log(date1) //2020/05/20 12:00:00

margin在IOS真机中失效

情境:在页面中元素使用margin值,在某些IOS设备下会出现失效的情况,而安卓机则正常显示。

解决:此问题暂无直接的解决方案,当前使用空DIV控制间距。
本人实际项目中因为涉及到的是样式问题因此最终以判断真机是否为iOS平台而动态加载样式解决,有更好的解决方案或者知道问题所在的朋友欢迎评论区留言指教

input 选择文字更多文字向下滑动,键盘消失问题

情境:input框中选择文字更多的时候向下滑动键盘会消失。

解决:always-embed=“{{true}}”

<input type="text" placeholder="请输入搜索内容" confirm-type="search" placeholder-class="placeholder" value="{{inputValue}}" always-embed="{{true}}" />

input的placeholder属性字体不居中/输入内容不居中

解决:
1、设置line-height及font-size
2、对input设置高度

页面滚动卡顿

解决:设置-webkit-overflow-scrolling:touch;

隐藏scroll-view滚动条

解决:样式中设置

::-webkit-scrollbar{
	width: 0;
	height: 0;
	color: transparent;
}

视频播放格式问题

<video src="{{videoSrc}}" controls   custom-cache="{{cache}}"></video>
cache:false

ios 表单元素 input 和textarea 默认有内阴影

解决:

 input{  -webkit-appearance: none; } 

ios键盘弹出导致页面显示异常

原因: ios上的软键盘会使页面的fixed定位失效。

解决办法: 可以监听resize事件(浏览器窗口大小调整时触发),当键盘弹出的时候,更改页面的position属性值。

安卓ios打开相机选择相册

解决:

<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>
$(function () {
    //获取浏览器的userAgent,并转化为小写
    var ua = navigator.userAgent.toLowerCase();
    //判断是否是苹果手机,是则是true
    var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
    if (isIos) {
        $("input:file").removeAttr("capture");
    };
})

ios底部安全区适配

解决:

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

记录贴,更多踩坑待补充。。。文章来源地址https://www.toymoban.com/news/detail-484641.html

到了这里,关于小程序开发安卓/ios兼容踩坑合集的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【小程序开发】小程序的架构和配置

    🤗这里是前端程序员小张! 🌻人海茫茫,感谢这一秒你看到这里。希望我的文章对你的有所帮助! 🌟愿你在未来的日子,保持热爱,奔赴山海! 小程序的宿主环境为微信客户端 宿主环境执行小程序的各种文件:wxml文件、wxss文件、js文件 当小程序基于 WebView 环境下时,

    2024年02月09日
    浏览(35)
  • python做微信小程序开发,python怎么开发小程序

    大家好,小编来为大家解答以下问题,python做微信小程序开发,python怎么开发小程序,今天让我们一起来看看吧! 大家好,小编为大家解答用python编写一个小程序的问题。很多人还不知道如何用python做小软件,现在让我们一起来看看吧! 大家好,小编来为大家解答以下问题

    2024年03月12日
    浏览(55)
  • 抖音小程序开发教学系列(4)- 抖音小程序组件开发

    在本章中,我们将深入探讨抖音小程序的组件开发。组件是抖音小程序中的基本构建块,它们负责展示数据和与用户交互。了解组件的开发方法和使用技巧是进行抖音小程序开发的重要一步。 抖音小程序提供了许多常用的基本组件,它们分别具有不同的功能和用途。在我们的

    2024年02月09日
    浏览(31)
  • 微信小程序开发15 项目实战 基于云开发开发一个在线商城小程序

    在学完前 4 个模块之后,我相信你会对微信小程序的开发有一个全新的认识。在前面 3 个模块中,俊鹏分别从微信小程序内在的运行原理,小程序工程化开发以及具体实践层面,深度讲解了微信小程序开发所必要的知识和能力。而第 4 个模块里,我带你认识了微信小程序的云

    2024年02月11日
    浏览(35)
  • 微信小程序 -- 小程序开发能力与拓展

    1. 获取用户头像 当小程序需要让用户完善个人资料时,我们可以通过微信提供的头像、昵称填写能力快速完善。如图: 想使用微信提供的头像填写能力,需要两步: 将 button 组件 open-type 的值设置为 chooseAvatar 当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调

    2024年04月15日
    浏览(48)
  • 企业小程序开发步骤【教你创建小程序】

    随着移动互联网的兴起,微信已经成为了很多企业和商家必备的平台,而其中,微信小程序是一个非常重要的工具。本文将为大家介绍小程序开发步骤,教你创建小程序。 步骤一、注册小程序账号 先准备一个小程序账号,在微信公众平台的网站上注册即可。注册时要注意,

    2024年02月11日
    浏览(29)
  • 微信小程序开发---小程序的页面配置

    目录 一、小程序页面配置的作用 二、页面配置和全局配置的关系 三、页面配置中常用的配置项 在每个小程序中,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观,页面效果进行配置。 小程序中,app.json中的windows节点,可以全局配置小程序中每个页面的窗口表

    2024年02月09日
    浏览(35)
  • 微信小程序开发教程(二)--上传小程序

    接上文,我们已经有一个小例子了。 在模拟器的位置,点击头像,会登录。 此时我们可以第一次尝试将我们的小程序进行上传。 点击下图箭头所指位置: 点击确定: 填写版本号和备注信息,选择上传: 在网页管理小程序上,选择上传,以下都选择红框所在位置: 填写相关

    2023年04月25日
    浏览(31)
  • 【微信小程序开发】第 1 节 - 小程序简介

             欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、缘起 2、小程序与普通网页开发的区别 3、API 简介 4、总结         在日常生活中,我们几乎每天都在使用微信小程序,那么,这个微信小程序到底是怎么

    2024年02月07日
    浏览(30)
  • 小程序开发——小程序项目的配置与生命周期

    app.json配置属性   app的页面配置指的是pages属性, pages数组的第一个页面将默认作为小程序的启动页。利用开发工具新建页面时,则pages属性对应的数组将自动添加该页面的路径,若是在硬盘中添加文件的形式则不会触发该效果。pages属性配置示例代码如下所示: 上述代码中

    2024年02月07日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包