小程序之旅(4) 安卓和ios样式兼容问题

博客给出布局建议,指出在布局时应尽量避免使用padding,推荐采用flex布局,为前端布局提供了实用的方法。

布局尽量不要用padding,使用flex布局。

Uniapp安卓iOS系统上存在一些兼容问题,以下是具体介绍: - **设备判断**:可通过`uni.getSystemInfoSync().platform`获取设备平台信息。若返回`android`,则为安卓设备;若返回`ios`,则为iOS设备。示例代码如下: ```javascript let platform = uni.getSystemInfoSync().platform; if (platform == 'android') { try { console.log("安卓") } catch (e) { alert("error:" + e.message); } } else { try { console.log("ios") } catch (e) { alert("error:" + e.message); } } ``` - **时间格式兼容**:在处理时间格式时,iOS安卓存在差异。iOS要求日期字符串中的连字符`-`替换为斜杠`/`,而安卓可以直接使用连字符。示例代码如下: ```javascript let xt = uni.getSystemInfoSync().platform if (xt === 'ios') { // ios new Date(time.replace(/-/g, '/')) } else if (xt === 'android') { // 安卓 new Date(time) } else { // 其他 } ``` - **小程序地图开发**:在小程序地图开发中,可根据点击时`@markertap`回调传递过来的`id`,遍历当前`markers`数组。对于当前显示的`marker`,将其显示模式修改为`ALWAYS`,其他则为`BYCLICK`或者`NONE`。可判断当前是否为iOS系统,针对安卓系统执行此逻辑。示例代码如下: ```javascript updateMarker(markerId) { // 此处的markerId是从 @markertap 回调中得来的:e.mp.detail.markerId。可以参考下方的markerObj.id,是同一个值的概念 for (let i = 0; i < this.markers.length; i++) { if (this.markers[i].id != markerId) { this.markers[i].callout.display = 'BYCLICK' // 此处也可以设置为NONE // 当然这里还可以更新显示文本,图片等。参考:https://uniapp.dcloud.io/component/map.html#app%E5%B9%B3%E5%8F%B0%E5%9C%B0%E5%9B%BE%E6%9C%8D%E5%8A%A1%E5%95%86%E5%B7%AE%E5%BC%82 this.markers[i].iconPath = xxx } else { this.markers[i].callout.display = 'ALWAYS' } } } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值