小程序安卓和ios的坑
2018-07-08 21:52:11 weixin_39793905 阅读数 9317

近来一个朋友问:手写一个日历,为什么在安卓能遍历显示,而苹果里却不显示,你遇到过遍历不出的bug吗?

首先解决下上述问题,我总结下我印象深刻的几个坑~

1.回答下最开始的那个问题,手写一个日历,为什么在安卓能遍历显示,而苹果里却不显示?

首先确定这并不是遍历的bug,肯定是兼容性问题,遍历这是最基本的语法,问题肯定出在遍历的数据处理阶段,看了代码果不其然,结论就是:ios 系统的问题,比如newDate(“2018-08-08”),在ios会出现NaN的情况,ios只支持newDate(“2018/08/08”)

2.video 视频格式m3u8,在ios里边儿不能播放,但是安卓能正常播放?

分析

官方给的例子,是mp4格式的文件,ios可以播放,微信小程序开发者平台的论坛也有类似的问题,但是没有准确的答案,我开始考虑转换下格式,奈何,技术不够,尝试添加在image 标签 添加 custom-cache={{cache}} ,data 中添加 cache:false问题解决了。

解决
    <video src="{{sbDress}}" controls   custom-cache="{{cache}}"></video>

3.微信小程序WxParse 包含图片安卓端无法加载

分析

wxparse 是微信小程序用于解析富文本编辑器生成代码的插件,用于展示一般的图文。在安卓手机端如果内容包含图片的标签时整个内容都无法加载出来,在手机端查看console,发现安卓机在console.dir()的时候报错,这是由于安卓机不支持console.dir()的语法。

结论:

这是安卓机不支持console.dir()的语法,使用console.log()代替。

4.安卓上图片会出现卡顿,变形,然后才会显示正常的图片大小

分析

开发文档里写明:注:image组件默认宽度300px、高度225px,开发时所有image的小图标都使用了mode=”widthFixed”,只设置了宽度,让高度自适应,就会出现图片加载时初始化高度位225px,加载完毕才显示mode的高度,由于安卓机这个卡顿教明显,才会出现瞬时的变形。

结论

今后使用image 标签,尽量固定宽高。

5.navigationBar 在安卓机中位置为左边,在苹果中居中显示,那么标题字数多了之后苹果就会默认使用…代替剩余的文字

分析

这个也不是bug,只不过时显示问题,目前版本6.6.0里支持在window属性里设置navigationStyle由默认样式修改为custom,支持自定义样式。所谓的自定义样式,就是默认导航,只剩一个胶囊的导航。

结论

app.json里边儿设置window{“navitionStyle”:”custom”},后要自己使用在wxml,and wxss里写样式显示头部的导航栏。

注意

由于该属性是微信6.6.0才支持,所以需要将其他的window属性照常写,来兼容低版本。

2019-02-01 15:59:24 huihui_jiang 阅读数 102

@微信小程序----------踩坑记录
关于小程序一些小功能的代码都在这个GitHub上,感兴趣的可以去看看,
https://github.com/huihuijiang/miniProgram 目前有:列表左滑删除,拖拽浮标
一、小程序坑
1.scroll-view横向滚动的时候,包含文字图片等,元素错位,第二个元素掉下去;
hack:给子元素添加

vertical-align:top;

当使用scroll-view横向滚动时要注意几点:
父元素设置宽度,加上这两个样式overflow: hidden; white-space: nowrap;自元素设置成display: inline-block;vertical-align:top;
二、android 和 ios 兼容
1.不定宽高元素使用全铺背景图片,ios没有问题,安卓手机背景图片显示空白
hack:

background-size:cover;(元素加上这一属性)

2.安卓手机缓存严重问题
hack:
在图片后再加上一串随机数
在wxs中:(有些iOS手机不能识别小数的随机数,所以最好用整数

var random = Math.floor(Math.random() * 10 + 1) * 9;

3.ios不支持默认最小定时时间(0或不写)

4.截取字符串遇到表情,安卓没问题,ios会报错;
hack:(判断是否有表情)

var reg = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/;
var re = new RegExp(reg);
var en = str.slice(27, 29);
if (re.test(en)) {
title = str.slice(0, 27)
} else {
title =str.slice(0, 28)
}

5.getTime()时候,iOS必须把时间格式00-00-00转换成00/00/00

6.小程序获取胶囊按钮返回值(一直在变,目前的兼容代码

		const self = this;
		wx.getSystemInfo({
			success: function (res) {
				self.globalData.phonexh = res.model.indexOf("iPhone X");
				var menuButton = wx.getMenuButtonBoundingClientRect();
				//导航栏高度
				self.globalData.totalTopHeight =
					menuButton.height == menuButton.bottom ?
						menuButton.height :
						res.model.indexOf("iPhone") == 0 || (res.platform == 'android' && res.version == '7.0.3') ?
							menuButton.top + menuButton.height + (menuButton.top - res.statusBarHeight) :
							menuButton.top + menuButton.height + menuButton.top + res.statusBarHeight				
				//状态栏高度
				self.globalData.statusBarHeight = res.statusBarHeight;
				//标题栏高度
				self.globalData.titleBarHeight = self.globalData.totalTopHeight - res.statusBarHeight;

			}
		})

7.iOS使用overflow:auto;滚动会卡顿
hack:
-webkit-overflow-scrolling: touch

8.转发到微信列表的转发信息卡片图,iOS当图片尺寸不对时,会出现空白,安卓会自动截取左上角

9.iOS橡皮筋事件
hack:在page.json文件中
"disableScroll": true

10.iOS短时间多次扫码进入不会执行onload

11.new number()强制转换结果为undefined
hack:用parsefloat

12.iOS图片加上阿里云编辑参数加载失败
Hack:binderror事件中对src重新复制,记得带上随机数,不然会因为路径一样不请求,有时候不是一次就能重新请求成功的,所以下一次获取的时候记得去掉随机数

loadimgerror: function (e) {
        console.log("图片加载失败")
        this.setData({
           Src: e.target.dataset.src.split("?")[0] + '?' + Math.floor(Math.random() * 10 + 1) * 9
        })
    },

在这里插入图片描述
未完待续哦——

2019-06-06 10:30:00 weixin_34417200 阅读数 27

h5 ios手机 隐藏input输入光标

问题描述:

input 透明度设为0,在浏览器和安卓中生效不显示输入光标,在iOS中不生效。

解决方案:

修改CSS样式如下


input {  
  text-indent: -999em; /*文本向左缩进*/  
  margin-left: -100%; /*输入框光标起始点向左左移*/ 
  width: 200%; /*输入框增大一倍*/  
  opacity: 0;  
}  

转载于:https://www.jianshu.com/p/73dde7e59ae7

2018-12-20 15:11:34 st646889325 阅读数 234

后台传给我的时间是"2017-08-08 10:30:40"

计算时间戳的话 Date.parse("2017-08-08 10:30:40")

安卓端是可以完美显示的,

但是IOS是国际时间不是中国时间


var arr = dateStr.split(/[- :]/);
let nndate = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]);
nndate=Date.parse(nndate)

得出的nndate是可以完全兼容所有平台时间的

2018-08-30 14:05:19 stp_zsj 阅读数 743

说明:

     在小程序中ios识别的日期格式为:2018/06/30,因此有时后写倒计时等涉及时间的方法时,会出现安卓可以,ios不可以的问题

解决方法:

    日期格式全部设置为xxxx/xx/xx 格式

具体方法:

    xx.replace(/-/g, "/")

    

iOS爬坑小知识

阅读数 10

没有更多推荐了,返回首页