ionic angular h5 移动端开发常见问题记录及各位同僚的解决办法

ios和android唤起软键盘问题

ionic 使用ng-zorro-antd-mobile报错

angular rem移动端适配

移动端唤起电话号拨号键盘

ionic 栅格 grid 取消其弹性自动伸缩的问题

生成二维码

二维码生成图片

angular ios系统路由跳转可能会失败，需要触发两次才能跳转的问题

微信单页面，跳转至通联并支付成功后，点击叉号或返回键会直接关闭整个页面

h5 跳转小程序

iOS 时间处理存在的 - 与 / 问题

ios和android唤起软键盘问题

可以参照这位的博客，记录的十分详细

WebView上软键盘的兼容方案 | Setcina（目前还在更新以及完善中...）

ionic 使用ng-zorro-antd-mobile报错

可以参照我的这篇文章

(63条消息) 在ionic构建的项目中使用ng-zorro-antd-mobile组件报错：inject() must be called from an injection context_未知的人1999的博客-CSDN博客

angular rem移动端适配

主要通过 postcss-pxtorem amfe-flexible 两大插件实现 px 转 rem 适配

可以参照这位的文章

(63条消息) angular12 配合 postcss-pxtorem amfe-flexible 移动端适配_闲鱼_JavaScript的博客-CSDN博客_angular移动端适配

移动端唤起电话号拨号键盘

使用 h5 a 标签属性

<a href="tel:15555555555">拨打电话</a>

如果无法唤起，可以尝试在 index.html 文件的 meta 标签内加入这段代码

<meta name="format-detection" content="telephone=yes">

ionic 栅格 grid 取消其弹性自动伸缩的问题

设置 min-width 限制其最小宽度

生成二维码

借助 qrcode 插件

可参照这位的文章

(63条消息) 使用 Angular 生成二维码_啊咿呀咿呀的博客-CSDN博客

二维码生成图片

<div id="codeDiv" style="display:none"><div>
<div id="qrcode"></div>

ngAfterViewInit(){var qrcode = new QRCode("codeDiv", {text: codeUrl,render: "canvas",  //渲染方式指定canvas方式width: 128,height: 128,typeNumber:-1,//计算模式colorDark : "#000000",   colorLight : "#ffffff",   correctLevel : QRCode.CorrectLevel.H  });var canvas=document.getElementsByTagName('canvas')[0];var img = convertCanvasToImage(canvas);document.getElementById("qrcode").attend(img);//从 canvas 提取图片 image  }constructor(){}convertCanvasToImage(canvas) {  //新建Image对象var image = new Image();  // canvas.toDataURL 返回的是一串Base64编码的URLimage.src = canvas.toDataURL("image/png");  return image;
}

angular ios系统路由跳转可能会失败，需要触发两次才能跳转的问题

开发过程中碰见了一个小问题

this.router.navigate(["home"]);

这种跳转方式在 ios 系统中需要在接口中触发两次才能成功跳转到对应的home路由，经过尝试后修改为如下代码，解决问题。

this.router.navigate(["/home"]);

微信单页面，跳转至通联并支付成功后，点击叉号或返回键会直接关闭整个页面

开发过程中产品希望能够在通联支付后按返回键能够返回移动端 h5 ，但在尝试过 window.open(url,"_blank")；等方式无效后，经过查阅资料发现，可以将支付地址生成一个支付二维码，由用户扫码进行支付后，点击叉号，即可返回h5

h5 跳转小程序

可以参照这位的文章

H5页面跳转微信小程序总结 - 知乎 (zhihu.com)

iOS 时间处理存在的 - 与 / 问题

ios 对于时间的处理比较特殊，以下的实例化Date的方式在ios上可能会被转义为NaN

new Date("2022-03-18");

可以用如下的方式进行实例化

new Date("2022/03/17");

推荐一下这位的文章，我也是纳闷了半天看到这位文章才解决了 ionic 的 dateTimePicker 在IOS 的初始值与 max min 失效的问题

ios的日期格式bug - 奔跑的瓜牛 - 博客园 (cnblogs.com)

持续记录未来遇见的移动端问题ing。。。。