ionic开发常见问题及解决方案(三)

1 .如何生成应用图标与启动页面背景:安卓与ios

a.进入resources文件夹;

b.把resources目录下默认的icon(应用图标)和splash图标(启动界面图标)换成当前APP对应的图标;

c.把resources目录下android和ios文件夹删除

d. 执行ionic resources 命令,会自动生成各种尺寸的图标。


注意:
     I.  icon图像文件大小最小192×192 px,且不能为圆角;splash图像文件大小最小2208x2208px。格式可以为 .png.psd.ai

     II.  ionic resources 执行以后发现没有生成,首先检查图片尺寸(必须满足条件),其次是网络。

     III .若是ios与安卓的图标需要有区别的话,则将对应的图标如下放置  resources/android/icon.png ;resources/ios/icon.png 

     可参考:[Ionic 自动创建应用的图标与启动画面【译】]
           http://ionichina.com/topic/54e455ab2be672f1111c01e2

http://blog.csdn.net/zapzqc/article/details/42237935

2 . ionic 开发应用时,发现在某些小屏幕设备上个别页面有问题,在大屏上没有问题。如在iPhone4s (3.5寸)和iPhone5s等上有问题。

解决方案:

     可以个这些设备专门写一些样式处理问题。
     利用css中的media来:例:
      @media screen and (max-width: 320px) {
        .leftText {
            float: left;
            display: inline;
            font-size: 13px;
        }
    }
    上面的例子是说:当屏幕宽度<=320px   (iPhone 5s的宽度)
    时候,leftText类的css样式为 float: left;display: inline; font-size: 13px;
具体可参考:【css判断不同分辨率显示不同宽度布局实现自适应宽度】http://www.jb51.net/css/151312.html

3. ionic使用 html5 中type=”date” 以及type=”time” 如何设置日期格式,与时间制

问题  :日期:我们有些设备日期是英文,有些是中文,有些是日文等等 ;
       时间:有些是12小时制,有些是24小时制;上午,下午,各种语言都有;   

解决方案:如果使用这个date 或time调用系统的日期或者时间选择器,是无法控制的,因为选择器是根据设备系统来的,用户设置什么就是什么语言或时间制;
        除非放弃type="date"  以及type="time";

        当然,angularJS提供了过滤器,可以使我们将用户选择的数据格式化,也就是说不管用户的语言或者时间制是什么,我们都能将数据格式化然后传给后台 ;
        例:
         var confObj = {
                "dateItemNew": $filter('date')(new Date(originalPostObj.dateItem), 'yyyy-MM-dd'),
                "startTimeNew": $filter('date')(new Date(originalPostObj.startTime), 'HH:mm'),    
                "applicationTypeNew": originalPostObj.applicationType
             };
        originalPostObj是选择框传过来的数据,

        dateItem(input type="date")是一个日期格式字符串:例如 :Mon Oct 10 2016 08:00:00 GMT+0800 (中国标准时间),时间是默认加上去的;

        startTime(input type="time")也是Thu Jan 01 1970 12:12:00 GMT+0800 (中国标准时间);日期是默认加上去的


      需求是:将dateItem格式化为yyyy-MM-dd
               startTime格式化为HH:mm


使用$filter 如代码所示:

注意 需要     .controller('ApplicationCtrl', ['$filter', function( $filter) {           }])




附录 : 若是非要使用特定的选择器。。。。只能使用弹出框选择器了,  
https://github.com/ahmerafzal/Ionic-Datepicker 
 (在ios上最好还是用原生的因为漂亮,弹出框不怎么美观;
 安卓上的话,可以用第三方的,因为原生的不怎么美观。
 其实吧,没必要规定选择器的格式啊,就根据用户的设备呗,
 腾讯的手机qq就是根据用户的系统来的。。。。
 当然,最主要的是说服产品)


4. cordova plugin add cordova-plugin-device 失败 报错:

Error: connect ETIMEDOUT 50.17.177.14:80
    at Object.exports._errnoException (util.js:873:11)
    at exports._exceptionWithHostPort (util.js:896:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1077:14)

解决方法:

换成:
cordova plugin add https://github.com/apache/cordova-plugin-device.git

你可能感兴趣的:(ionic开发常见问题及解决方案(三))