使用ionic2移动应用在IOS中遇到的问题

原创

mb638413918930b 2022-11-28 22:58:41 博主文章分类：Web前端 ©著作权

文章标签 ionic2 ios 移动应用 Cant find variable I safari 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者mb638413918930b的原创作品，请联系作者获取转载授权，否则将追究法律责任

在公司工作，正在开发一款APP，途中打包成ios安装测试时，发现：

1、应用在Android中正常运行，在iphone6s中也没有出现什么太大问题（当然我们这里不提运行流畅度的问题），而在低版本的ios中却发现，在首页的菜单点了居然没有什么反应，而本来应打开新的页面的。一直以为是ionic2在ios低版本的兼容问题。然后在 xcode 中再次打包运行的时候，发现当我点击某个菜单要进入页面的时候报错了，以至于没有打开新的页面（当然在android中和iphone6s中没出现过）。

使用ionic2移动应用在IOS中遇到的问题_ionic2

出现如下错误：ERROR: Unhandled Promise rejection: Can't find variable: Intl; Zone: angular ; Task: Promise.then ; Value: ReferenceError: Can't find variable: Intrl

最主要的还是这句 Can't find variable: Intl。当然自己也百思不得其姐，错了，是解。于是 google 了好几下，找到了解决方案，原文如下：

（Ionic 2, Using Angular 2 Pipe breaks on iOS—“Can't find variable: Intl”）

Ionic 2, Using Angular 2 Pipe breaks on iOS—“Can't find variable: Intl” up vote 15 down vote favorite 2 Experiencing the same problem with the date, percent, and currency pipes when using them in a template—

For example, I'm using a simple percent pipe:

{{ .0237| percent:'1.2-2' }}

It works when running on Chrome, but when I deploy to an iOS device, it throws this error:

"EXCEPTION: ReferenceError: Can't find variable: Intl in [{{ {{ .0237| percent:'1.2-2' }} ..."

Has anyone else run into this problem? Any suggestions or help would be greatly appreciated! Thanks!

ios angularjs ionic-framework angular2 ionic2

2 Answers

That's because it relies on the internalization API, which is not currently available in all browsers (for example not on iOS browser).

See the compatibility table.

This is a known issue (beta.1).

You can try to use a polyfill for Intl.

To do so, you can use the CDN version, and add this to your index.html:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

Or if you use Webpack, you can install the Intl module with NPM:

npm install --save intl

And add these imports to your app:

import 'intl';
import 'intl/locale-data/jsonp/en';

（另一个人的回复）

There is a quick fix for this. Add

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

<script src="cordova.js"></script>

See this github answer https://github.com/angular/angular/issues/3333#issuecomment-203327903

解决方案如下：

加入那样的一句话：

使用ionic2移动应用在IOS中遇到的问题_safari_02

完美解决问题~~~ 23333333

2、这里还有一个小问题的提示：你在发现当点击某个菜单时，会发现在ios中会有某名的延迟，这样的延迟就好像我们没点到菜单一样，或者点击了没什么反应。以为是ionic2在ios上的性能问题，后来突发奇想将放置在菜单上的click事件修改为touchstart事件，显然这种延迟就没有了。不妨试试。

（但是，这里仍有个疑问：为啥我看到的教程是使用click事件，却不使用touchstart事件呢？）

** ionic2 中可添加 tappable 属性到元素上避免click事件延迟触发。

3、在ios中iframe加载不了网页的问题（iframe白屏）

　　在config.xml中添加：

<!-- ios中iframe加载不了网页的解决方式 -->
  <!--<allow-navigation href="*" />
  <allow-intent href="*" />
  <access origin="*" />-->
  <allow-navigation href="*" />

　　在index.html文件中添加：

<meta http-equiv="Content-Security-Policy" content="default-src * data: cdvfile: gap:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>

4、iOS-Xcode上传后iTunes Connect构建版本不显示

参考： iOS-Xcode上传后iTunes Connect构建版本不显示

解决：在项目中的plist文件中，配置权限说明。

如下方便复制粘贴用:
麦克风权限:
Privacy - Microphone Usage Description 是否允许此App使用您的麦克风？

相册权限:
Privacy - Photo Library Usage Description 是否允许此App访问您的相册？

相机权限:
Privacy - Camera Usage Description 是否允许此App使用您的相机？

通讯录权限:
Privacy - Contacts Usage Description 是否允许此App访问您的通讯录？

地理位置权限(后台定位):
Privacy - Location Always Usage Description 是否允许此App访问您的地理位置?

地理位置权限(前台定位):
Privacy - Location When In Use Usage Description 是否允许此App访问您的地理位置?

蓝牙权限:
Privacy - Bluetooth Peripheral Usage Description 是否许允此App使用蓝牙？

日历权限:
Privacy - Calendars Usage Description 是否允许此App使用日历？

5、提交APP进行审核时，首次被拒，被拒原因如下：

We were required to install the WeChat app before the we could log in via WeChat. Users should be able to log in with WeChat and access their accounts without having to install any additional apps.

Next Steps

If you would like to offer authentication through WeChat, it would be appropriate to use a mechanism that allows users to log in with WeChat from within your app without first having to install an additional app.

We recommend implementing the Safari View Controller API to display web content within your app. The Safari View Controller allows the display of a URL and inspection of the certificate from an embedded browser in an app so that customers can verify the webpage URL and SSL certificate to confirm they are entering their sign in credentials into a legitimate page.

Resources

For additional information on the Safari View Controller API, please see the webpage, What's New in Safari.

解决：

对于iOS应用，考虑到iOS应用商店审核指南中的相关规定，建议开发者接入微信登录时，先检测用户手机是否已安装微信客户端（使用sdk中isWXAppInstalled函数），对未安装的用户隐藏微信登录按钮，只提供其他登录方式（比如手机号注册登录、游客登录等）。

对于微信分享的功能，也采用上述类似的方法，对未安装微信的用户隐藏微信的分享功能。