标签归档:iOS

iOS 11 中 fixed 容器中 输入框光标错位的问题处理

iOS11 之后,fixed浮层内的输入框光标会发生偏移。即 fixed 定位的容器中输入框光标的位置显示不正确,没有正常地显示在输入框中,而是偏移到了输入框外面。

这个问题很容易复现,只要满足以下条件即可触发此问题:

1、页面 body 高度超过视窗高度,即页面有滚动条。
2、点击页面中 fixed 定位的容器中的输入框,键盘弹起如果发生页面滚动或者键盘弹起后手动滚动页面则会出现如上面视频中光标偏移的问题。偏移量为页面滚动的距离。

目测确实是 iOS 11 新版 WebKit 引入 的 bug。目前处理的方案有两个。

一:在弹窗显示时,通过给 body 设置相关样式,使body不可滚动:

height: 100%!important;
overflow: hidden!important;

关闭弹窗后,注意要把相关样式移除。

二:在输入框blur的时候将页面滚动到顶部(起始位置):

<input type="tel" @blur.prevent="scrollTop()" @focus.prevent="stopScroll()" class="login-phone" v-model.trim="loginPhone" placeholder="请输入手机号"/>
......
scrollTop: function(){
	if(this.$fun.isIOS()){
		this.scrollTimer = setTimeout(()=>{
			document.body.scrollTop = 0
    		document.documentElement.scrollTop = 0
		},10)
	}
},
stopScroll: function(){
	if(this.scrollTimer && this.$fun.isIOS()) clearTimeout(this.scrollTimer)
},

这个方案用在了vue项目,需要注意是input blur的时候需要做一下延迟,否则会有抖动现象,focus的时候取消定时。

在Dcloud 下开发 iOS App 的上架 App Store 流程

在Dcloud开发app也有一段时间了,针对iOS App,一直是使用企业账号进行打包,并上传到fir.im进行分发测试。最近申请了公司账号,打包后不能再使用企业账号的in-house方式打包了,只能使用ad-hoc方式(需要为每个测试的设备添加UDID,并且最多支持100台设备)。

下面来说说打包发布 App Store 的过程,首先,按照官方提供的教程申请发布(Distribution)证书和描述文件,注意是发布的证书,不是开发的,完成后,在HBuilder中采用刚才申请的发布证书和描述文件进行打包。

接着下载ApplicationLoader,安装后,通过公司账号登录,并上传刚才打包的app,在iTunes Connect会使用到。

登录iTunes Connect,点击进入My App ,创建新的App,并填写相关的资料,在构建版本选择刚才在ApplicationLoader上传的app。App 预览和屏幕快照的图片,可以通过iOS模拟器截图,快捷键Command + s。完成后,点击提交审核即可。