ionic在iOS16上遇到的一些问题,图片、图标不显示,样式不正常等

发布时间 2023-12-26 16:14:29作者: johnjackson

近日,一个很久之前ionic5开发的APP的iOS版因为签名描述文件(profile、.mobileProvisioning)过期而不能使用了,所以需要重新创建一个描述文件,然后重新打包APP。但过程中却遇到了一系列的问题,特写此文记录下来。

问题1,iOS打包遇到问题:在xcode的Signing & Capabilities 面板中选择(导入)了新创建的mobileProvisioning文件后,下方提示错误

image

image

(注:这里放了两张图片,但问题下面都列了)
最后发现导致问题的原因是好几处:
1.xcode上登录的开发者账号过期了
image
解决方式: 重新登录。
2.草果系统OSX上的开发证书(certificate)过期了
image
解决方式: 这个上苹果开发者后台,重新创建一个certificate,下载后双击导入到钥匙串就可以了。
注意,前面创建的描述文件(profile)也要重新创建,因为之前创建的那个绑定的是过期的certificate。

3. Xcode 的 Build Setting 面板中关于签名的字段设置错误:
解决方式: 下图这个字段一定要设为刚才创建好的certificate。
image

到这里iOS打包成功了。

问题2,iOS16打开ionic APP后白屏

解决方式: 修改src/index.html中<base href="/" />改为<base href="." />
注,这个据网上查到的信息说是iOS16才出现的,反正我的APP,之前是好的。

问题3 ,应用中图片显示不出来,在浏览器上正常,在iphone上不显示

解决方式:
1.HTML中的图片,将原来的src="/assets/imgs/..."改为src="assets/imgs/..."
2.scss中的background,将url(/assets/imgs)改为url(../../../assets/imgs)
注:这两个问题是由于前面改<base href="." />后导致的。关于base标签可以自行上网查。

问题4,iOS16 上背景图片不显示、边框(border)不显示(看不见、隐藏)或显示不全

解决方式: 元素带有border-radius属性后就后出现背景不显示,增加以下两上属性就可以:

    transform: matrix3d(0,0,0);
    will-change: transform;

问题6,input[type='checkbox']元素当勾选状态时不显示(看不见、隐藏)

解决方式: 同上。
注:实测发现只要父元素按上面的方式加了那两个属性,其子元素如果有input[type='checkbox']元素则已经可以正常显示了。

问题7,ion-icon图标不显示

一开始在浏览器里还能显示,后来不知怎么回事就不显示了。在浏览器中查看代码:
image
发现.icon-inner下是空的,正常应该是有SVG元素的,如下:
image
后来发现在控制台有报错:
image
看到window.fetch(vconsole.min.js中),想到之前在网上查“ion-icon不显示”的问题,有个帖子说的就是修改window.fetch函数。然后我断点调试了一下,发现好像是vconsole中也自定义了一个window.fetch函数,应该就是它引起的,果然把vconsole去掉ion-icon图标就出来了。
但是,打包后在手机上运行,图标还是不显示。
于是我上网找到之前看到的修改window.fetch函数的帖子,按上面说的又改了一下,最后手机上的ion-icon图标也出来了。代码如下(我把它放在了src/index.html中了):

        <script type="text/javascript">
            var originalFetch = window.fetch;
            window.fetch = function () {
                var args = [];
                for (var i = 0; i < arguments.length; i++) {
                    args[i] = arguments[i];
                }
                var url = args[0];
                if (typeof url === "string" && url.match(/\.svg/)) {
                    return new Promise(function (resolve, reject) {
                        var req = new XMLHttpRequest();
                        req.open("GET", url, true);
                        req.addEventListener("load", function () {
                            resolve({
                                ok: true,
                                status: 200,
                                text: function () {
                                    return Promise.resolve(req.responseText);
                                },
                            });
                        });
                        req.addEventListener("error", reject);
                        req.send();
                    });
                } else {
                    return originalFetch.apply(void 0, args);
                }
            };
        </script>

总结,上面遇到这一堆问题,之前都是不存在的,只是因为iOS,mac OSX、xcode升级后出现的。而我的项目是比较老的项目了。我真是很想吐槽现在很多第三方库/包的升级完全不考虑兼容性,真的是给开发者带来了好多令人头疼的问题。浪费了大量时间。我个人能做的就是把自己踩过的坑,尽量告诉别人,让今后其它人再遇到同样的问题时有资料可查。