微信小程序中遇到的iOS兼容性问题小结

前言

随着小程序的热度不减，更多的电商大佬来时使用小程序，在微信小程序开发中，经常会遇到一些兼容性的问题，下面这篇文章就记录下在微信小程序中遇到的一些兼容性问题，iOS兼容性

1.iOS中input的placeholder属性字体不居中

  • 对placeholder设置line-height及font-size
  • 对input设置高度

2.iOS中滚动卡顿

  • 设置-webkit-overflow-scrolling:touch;

3.微信小程序中解决iOS中new Date() 时间格式不兼容

在实现倒计时，根据后台返回的时间格式转换时，后台返回了时间格式为”2018-11-12 11:12:11”，然后利用new Date() 转换时，ios中无法展示，安卓中显示正常

let time = '2018-12-10 11:11:11';
let temporaryTime1 = new Date(time);
this.setData({
 timeRemain1: temporaryTime1,
})
/* 利用正则表达式替换时间中的”-”为”/”即可 */
let time = '2018-12-10 11:11:11';
let temporaryTime = new Date(time.replace(/-/g,'/'));
let temporaryTime1 = new Date(time);
this.setData({
 timeRemain: temporaryTime,
 timeRemain1: temporaryTime1,
 })

4. 微信小程序scroll-view隐藏滚动条方法

在wxss里加入以下代码：

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

暂时遇到的兼容性就是这么多，会持续更新

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • iOS 真机调试微信小程序

    iOS 真机调试微信小程序

    平时开发小程序可以在开发者工具中进行调试,开发者工具提供了类似 Chrome DevTools 的调试面板,对于前端开发者来说入门门槛比较低. 小程序开发完成之后,我们需要在真机上进行测试,真机调试方面小程序开发者工具有预览.远程调试和设置体验版本三大部分功能.除了这三种方式之外,我们还可以使用真机远程调试,在 iOS 上可以通过实现 Safari 调试代码,安卓中可以安装 X5 内核的 inspect 版本,开启 Chrome remote debug 模式.使用真机调试不仅可以发现开发者工具

  • IOS中微信小程序播放缓存的音频文件的方法

    很多时候我们都想把数据预先缓存到本地,节省带宽.但是最近在处理微信小程序播放缓存到本地的音频文件的时候,遇到一些小问题,然后对于安卓和IOS需要采用不同的播放策略. 首先,如果哪怕用audio标签来播放在线的音频文件,假如服务端没有实现断点续传,IOS是无法播放的,这个需要注意. 对于缓存在小程序的音频(wx.saveFile(OBJECT)保存的音频),IOS只能通过播放背景音乐的接口播放,其它播放方法都没有成功实践,而对于安卓,内部 audio 上下文 innerAudioContext 对

  • 微信小程序开发之IOS和Android兼容的问题

    微信小程序开发之IOS和Android兼容的问题 一.时间转换问题: 这不只是小程序上面的问题是ios系统 都有这个问题 就是new  Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如下 1.替换"-"为"/" 2.删除"."后面的字符串(带毫秒也会有问题) 代码如下: /** * 字符串转换为时间 * @param {String} src 字符串 */ strToDa

  • ios版微信小程序跳一跳辅助

    ios版微信小程序跳一跳辅助

    注意:ios的测试环境只能在Mac电脑上,windows上不能测试(黑苹果除外),因为需要安装xcode,而Xcode没有windows版本 本次是针对部分程序员所写不适用于新手 !!!   测试环境是python3 + Mac +苹果7(ios11.1.2操作系统) 安卓版本请移动:安卓版本跳一跳辅助 ios直接改分版本戳这里 飞机票 在安装蟒蛇的前提下,执行如下几步 1.先去github上下载WebDriverAgent这个项目,如果本地有git可以通过指令 git clone https:

  • 微信小程序中遇到的iOS兼容性问题小结

    前言 随着小程序的热度不减,更多的电商大佬来时使用小程序,在微信小程序开发中,经常会遇到一些兼容性的问题,下面这篇文章就记录下在微信小程序中遇到的一些兼容性问题,iOS兼容性 1.iOS中input的placeholder属性字体不居中 对placeholder设置line-height及font-size 对input设置高度 2.iOS中滚动卡顿 设置-webkit-overflow-scrolling:touch; 3.微信小程序中解决iOS中new Date() 时间格式不兼容 在实现倒

  • 微信小程序中target和currentTarget的区别小结

    前言 在小程序中,e.target与e.currentTarget是非常重要的,尤其是涉及到页面传值时 currentTarget和target都是组件的一些属性值集合,由"data-属性名"定义的一些属性值 currentTarget:事件触发的当前事件(当前事件,可能是触发事件的源组件,可能是触发的事件组件(即触发事件源组件的子元素),此时点击子元素还是父元素,都是当前事件,应用e.currentTarget target:触发事件的源组件(事件注册/绑定所在组件) 举个例子: &

  • 解决微信小程序中转换时间格式IOS不兼容的问题

    昨天弄一个微信倒计时;遇到了这个为题,调试了才找到问题的所在,然后在网上找了资料才知道这个问题的原因,来是因为IOS系统不支持2018-08-30这样的格式的时间导致的 let olddata ='2018-08-30 11:00:00'; let mydata=new Date(olddata); console.log(mydata); let newdata=mydata.getTime(); 这样的代码安卓手机开发手机和微信小程序编辑器测试都没有问题,唯独IOS获取的日期为不显示,原来I

  • 微信小程序中使用自定义字体的实现与体验优化

    微信小程序中使用自定义字体的实现与体验优化

    目录 前言 技术难点 1.微信限制 2.机型兼容 文档说明 体验优化 附微信小程序设置全局字体 结尾 前言 前段时间,甲方爸爸提出一个比较个性化的需要:要在他们的小程序中使用他们购买过版权的特殊字体.好家伙,我瞬间万马奔腾,我三十米的大刀呢?奈何甲方爸爸就是上帝,甲方爸爸想到的我们要尽量是实现,甲方爸爸没有想到的我们要提前实现. 怎么实现呢? 开撸之前,先研究一下,探索一下技术方案. 技术难点 1. 微信限制 大家开发过微信小程序的应该都知道,微信平台对小程序的体积大小有限制: 整个小程序所有分

  • 微信小程序中实现一对多发消息详解及实例代码

    微信小程序中实现一对多发消息详解及实例代码 微信小程序中各个界面之间的传值和通知比较蛋疼.所以模仿了iOS中的通知中心,在微信小程序中写了一套类似的通知中心. 通知中心可以做到:1对多发消息,传递object.使用十分简洁. 使用时,在需要接收消息的界面注册一个通知名.然后在需要发消息的界面post这个通知名就可以了.可以在多个界面注册同一个通知名.这样就可以1对多发消息. 使用方法: 1:在app.js中引用notification.js var notificationCenter = re

  • 微信小程序中悬浮窗功能的实现代码

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"

  • 微信小程序中进行地图导航功能的实现方法

    前段时间一直都在做小程序做了两个月了,其中对于小程序还是有很不理解的地方看着一些大企业的小程序自己模仿其实还是有一些难度的,我觉得学习小程序看一遍文档是不够的我们要做的是看别人的例子对着文档一一对照! 好这次我们来开始我们的开发,其实微信小程序里面是不能导航的,原因是小程序的代码最多只能有1M,他的运行内存只能有10M,一个区域地图下载下来就不止1M了所以在应用内我们无法做到导航的,但是应用外呢! 我问过很多做安卓和IOS的同僚一般如果导航这个功能不是很重要的话就会放到应用外来做这个功能,但是高

  • 详解微信小程序中var、let、const用法与区别

    微信小程序可以使用Javascript的最新ES6标准来开发所以微信小程序中var.let.const用法与区别可以视为Javascript ES6标准中var.let.const用法与区别 let命令 基本用法 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中,分

  • 在微信小程序中渲染HTML内容3种解决方案及分析与问题解决

    大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 在微信小程序中渲染HTML内容的3种解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「wxParse」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 后来,小程序增加了「rich-text」组件用于展示富文

  • 微信小程序audio组件在ios端无法播放的解决办法

    微信小程序audio组件在ios端无法播放的解决办法

    解决方法: 给 audio 组件绑定点击事件,手动触发播放暂停方法! 代码片段: wxml文件 <!-- 判断是语音通话,有通话记录,通话描述不包含'未接' --> <view class="reference" wx:if="{{itemList.activity_type === 'phone' && itemList.activity_reference_id && tool.indexOf(itemList.comme

随机推荐