web学习笔记09-ionic开发app的几个小坑

点柈

2016-11-02

1.ios设置https访问权限

1.1 问题1

1.1.1问题描述：

ionic开发的app中打包iOS，运行之后窗口报错，网络错误。

Application Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.

1.1.2 原因

出错的原因在于iOS9之后在iOS中引入了新特性：App Transport Security (ATS)，新特性要求App内访问的网络必须使用HTTPS协议。但是现在公司的项目使用的是HTTP协议，使用私有加密方式保证数据安全。现在也不能马上改成HTTPS协议传输。

1.1.3解决办法

在iOS工程中的myApp-Info.plist文件中加入两个字段，第一个是字典Dictionary格式的字段NSAppTransportSecurity。
在NSAppTransportSecurity下添加布尔Boolean类型的NSAllowsArbitraryLoads，值设置为YES。

    <key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <value>YES</value>
<dict>

1.2 问题2

1.2.1问题描述：

上述网络问题解决之后，还出现了一个问题

ERROR Internal navigation rejected - <allow-navigation> not set for url='http://192.168.14.127:8080/TLF_PAY_SDK/app/gatewayTrans'

1.2.2 问题原因

这是因为没有设置白名单，iOS9+ 拒绝发送请求。

1.2.3 解决办法

只需要在myApp -> config.xml中配置

<allow-navigation href="*" /> //即允许跳转到任意http协议的页面

2. 标题把状态栏遮挡

2.1 问题描述：

在iOS真机运行的时候，点击提交，页面跳转进入响应的页面，此时顶层状态栏的背景色为透明，与页面部分想重叠。

2.2 问题原因

缺少相应的配置项

2.3 解决办法

方法一：在每个页面顶层加入一个高为20px的div，样式设置top:0;left:0;position:fixed;这样在iOS上就可以留出20px的高度来放状态栏，而且在页面滚动的时候不会导致状态栏与页面重叠。但是存在一个问题，就是在安卓的部分机器上，页面会多出一块，导致无法完美解决。

方法二：在myApp->config.xml中添加配置项

<preference name="StatusBarOverlaysWebView" value="false"/>

这个方法能够完美解决此问题。

3. 按钮无法点击

3.1 问题描述：

在主页面的提交按钮，点击之后没有反应。

3.2 问题原因

原因有两个：一个是按钮做的时候太小，不容易点击，第二个原因是在点击提交按钮触发的方法中，进行了一些基本的文本框内容的判断，最后没有返回值，所以出现了问题。

3.3 解决办法

一：将按钮的长宽加到原先的两倍；

二：在判断方法的最后加上return true；

4. 呼出键盘无法关闭。

4.1 问题描述：

在点击提交按钮之后进入付款页面，页面无法滑动，点击文本框，键盘弹出来，但是没有完成按钮，键盘无法关闭。

4.2 问题原因

原因主要是因为配置中将ionic的键盘设置给设置死了，所以会出现问题。

4.3 解决办法

一：页面不能滚动，在myApp->www->js->app.js 中修改配置项

cordova.plugins.Keyboard.disableScroll(false);

二：键盘不能收起，在myApp->www->js->app.js 中修改配置项

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);