Ionic 常见问题及解决方案

àì夳堔傛蜴生んèń 2022-09-23 15:58 321阅读 0赞

# 一些常识与技巧 #

*  `list` 有延迟，可以在`ion-content`处使用 `overflow-scroll="true"`尝试
 *  在`<i>`上用`ng-click`上是没效果的
 *  `<label>`标签内的事件会在整个`label`内被触发，点哪都触发
 *  快捷修改背景色`style="background-color: #212326;"`
 *  能用`ng-if`就用`ng-if`,`ng-if`的效率比`ng-show`和`ng-hide`高
 *  直接在`ion-list`中的`ion-item`中并不能触发`ng-click`事件，可以在item中的元素上再套一层div
 *  可以用`ng-class="{'important': post.important}"`配合css 根据列表元素显示不同的效果
 *  获取日期用`$filter`，`var postdate = $filter('date')(date, 'yyyy-MM-dd HH:mm:ss');`
 *  列表中的元素不能写成 `id : 4`，应写成 `id : "4"`,注意在创建id变量的时候也需要转成string,如`var id = InfoListService.getListLength()+1+"";`
 *  使用`$log`进行log输出,为什么用`$log`而不是console.log呢？可以看看[这个][Link 1]
 *  在安卓上的体验比较差，动画有延迟？可以试试[ionic集成的crosswalk][ionic_crosswalk]
 *  `controllers`和`services` 的文件名可能会重合，但是他们意义差不多，可以将`controllers`中的文件名小写，对应的`services`中的文件名大写进行区分,或者加后缀`xxxControler`,`xxxService`
 *  安装cordova插件的时候用`ionic plugin add ...`的方式添加，这样会在`package.json`中添加这个插件的条目，如果有人clone了你的项目想在本地运行，可以用`ionic state restore`它会根据`cordovaPlugins`条目安装对应的插件。如果直接用`cordova plugin add` 安装则不会更新`package.json`。
 *  上传base64编码的时候如果提示413错误，是因为文件过大导致的，可以在nodejs中设置bodyparser的文件限制:
    
    <table style="border-collapse:collapse; border-spacing:0px; width:640px; padding:0px; margin:0px"> 
     <tbody> 
      <tr style="width:640px; border-collapse:collapse; padding:0px; margin:0px"> 
       <td style="padding:0px; width:640px; border-collapse:collapse; margin:0px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow:auto; font-family:'Roboto Mono',Monaco,courier,monospace; font-size:0.8em; color:rgb(82,82,82); padding:1.2em 1.4em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:rgb(248,248,248)"><span>var bodyParser = require('body-parser');
    app.use(bodyParser.json({limit: '50mb'}));
    app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));</span>
    </pre> </td> 
      </tr> 
     </tbody> 
    </table>
 *  img 中 base64编码的图片无法显示？在源码中发现angular添加了unsafe标签？需要在白名单中添加`data:image`
    
    <table style="border-collapse:collapse; border-spacing:0px; width:832px; padding:0px; margin:0px"> 
     <tbody> 
      <tr style="width:832px; border-collapse:collapse; padding:0px; margin:0px"> 
       <td style="padding:0px; width:832px; border-collapse:collapse; margin:0px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow:auto; font-family:'Roboto Mono',Monaco,courier,monospace; font-size:0.8em; color:rgb(82,82,82); padding:1.2em 1.4em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:rgb(248,248,248)"><span>$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|content|file|assets-library):|data:image\//);</span>
    </pre> </td> 
      </tr> 
     </tbody> 
    </table>
 *  有时候pm2运行有问题，重启一下即可
 *  在ios设备上运行`ionic run ios --device`

--------------------

# 问题列表 #

1.  [如何在某个界面中去掉导航栏?][Link 2]
2.  [如何在ionic中加载本地图片?][ionic]
3.  [如何在ionic中嵌入网页代码?][ionic 1]
4.  [如何将template加载到某个tab或某个sidemenu项目下?][template_tab_sidemenu]
5.  [运行serve命令时ionic报错?][serve_ionic]
6.  [用docker跑ionic的时候，不能把地址绑定到0.0.0.0怎么处理?][docker_ionic_0.0.0.0]
7.  [加载页面的时候会看到双括号一闪而过？][Link 3]
8.  [更新了数据，如何让界面更新呢？][Link 4]
9.  [如何实现IonicView中card上面有一列分割线的效果?][IonicView_card]
10. [controller.js和service.js文件越来越大怎么办?][controller.js_service.js]
11. [如何寻找优秀的范例代码?][Link 5]
12. [如何显示相对时间？][Link 6]
13. [发布应用的时候如果遇到翻译错误即MissingTranslation怎么办?][MissingTranslation]
14. [如何在列表右下方添加时间等信息?][Link 7]
15. [如何回到上一页面?][Link 8]
16. [如何关闭应用?][Link 9]
17. [在安卓设备上如何让title居中?][title]
18. [如何让在sidemenu中的headerbar能够显示头像等其他信息?][sidemenu_headerbar]
19. [ionic的subheader挡住了内容区域怎么办?][ionic_subheader]
20. [对于需要添加数据的list，在添加数据后页面不能及时刷新造成卡顿怎么办?][list]
21. [ionic如何处理回退按钮？例如询问用户是否真的要退出应用][ionic 2]
22. [ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?][ionic 3]
23. [ionic如何实现搜索框内的全部清除按钮?][ionic 4]

#### 如何在某个界面中去掉导航栏? ####

如果某个界面上不想要导航栏，可以简单地在最顶端的标签中添加`hide-nav-bar="true"`

--------------------

#### 如何在ionic中加载本地图片? ####

对于css文件夹中的样式文件中如果要调用本地的图片的话,从该css文件所在的文件夹开始算,例如`www/css/style.css`要加`../`,否则在浏览器中可以正常显示，在设备上不行，结构如下所示：

但是对于在页面中定义的图片路径，从`www`路径开始算,否则浏览器中可显示，但设备上不行,img文件夹和index.html在一级,如：

--------------------

#### 如何在ionic中嵌入网页代码? ####

使用`ng-bind-html`这个类,不过它会过滤原始html的标签，我们可以引入`$sce`模块，用`$sce.trustAsHtml()`方法信任我们获取的网页

--------------------

#### 如何将template加载到某个tab或某个sidemenu项目下? ####

`<ion-nav-view name="menuContent">` 可以指定`name`，然后在子状态中使用该`name`，ionic就知道该把该状态的template渲染到哪边了。例如：

另有一个tabs中声明该auth-signup:
 &lt;ion-tab title="Sign Up" icon-on="ion-ios-personadd"
   icon-off="ion-ios-personadd-outline" href="#/auth/signup"&gt;
   &lt;ion-nav-view name="auth-signup"&gt;&lt;/ion-nav-view&gt;
&lt;/ion-tab&gt;</span>
</pre> </td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### 运行serve命令时ionic报错? ####

看看你是不还有一个终端在运行着serve呢？

--------------------

#### 用docker跑ionic的时候，不能把地址绑定到0.0.0.0怎么处理? ####

可以用`ionic serve -all`的方法解决

--------------------

#### 加载页面的时候会看到双括号一闪而过？ ####

`angularjs` 在使用双括号的时候，第一个加载的页面，也就是应用中的`index.html`,其未被渲染好的模版可能会被用户看到。用`ng-bind`就不会遇到这个问题。造成这种现象的原因是，浏览器需要首先加载HTML页面，渲染它，然后`Angular`才有机会把它解释成你期望看到的内容。不过好消息是，在大多数的模版中你依然可以使用双括号.但是对于index.html页面中的数据绑定操作，建议使用`ng-bind`。

`ng-bind`使用方式如下: `<p ng-bind="greeting"></p>`

--------------------

#### 更新了数据，如何让界面更新呢？ ####

可以用广播，注意[$broadcast 和 $emit的区别][broadcast _ _emit]

--------------------

#### 如何实现IonicView中card上面有一列分割线的效果? ####

在css里定义

--------------------

#### controller.js和service.js文件越来越大怎么办? ####

所有的控制器不必都放在controllers.js这一个文件中，可以新建controllers文件夹，  
然后把每个controller都建一个.js文件，同理services和utils等都是.但注意要在index.html中head部分声明.但是为了避免他们相互覆盖，第一个加载的js中模块中要加\[…\],其他都不需要。如：

// File : /js/directives/myGreatDirective.js
angular.module('app.directives')  
    .directive('myGreatDirective', function(){
        return {
            //...
        }
    });

// File : /js/directives/myBetterDirective.js
angular.module('app.directives')  
    .directive('myBetterDirective', function(){
        return {
            //...
        }
    });

...</span>
</pre> </td> 
  </tr> 
 </tbody> 
</table>

看[angularjs-code-organization][]了解更多,嗯这篇文章写的还不是best practice，因为你还得记着自己把\[\]写到那个模块里了，统一地写在app.js中即可，在app.js最下面加上类似：

可以达到和上面一样的效果，而且可以统一管理.

--------------------

#### 如何寻找优秀的范例代码? ####

目前有些ionic 的app没有进行代码混淆，至少ionic官方的ionic view没有进行代码混淆，下载他们的app，文件名改成zip，解压，所有的 www文件都在assets文件夹中，相当于开源了有木有，看看那些最优秀的practice。看中哪些优秀的app，下下来,如何在googleplay上下载？把googleplay应用的地址贴到[apps.evozi][]中。

--------------------

#### 如何显示相对时间？ ####

如几分钟前，几天前等,[可以用momentjs][momentjs]，看[这篇教程][Link 10]

--------------------

#### 发布应用的时候如果遇到翻译错误即MissingTranslation怎么办? ####

暂时的解决方法是，不进行翻译校正, 在 /platforms/android/build.gradle 中的android \{\}节中加入:

--------------------

#### 如何在列表右下方添加时间等信息? ####

`span` 可以用来将时间之类的附加信息显示到列表右边,如下面会将创建时间显示在name的右边:

--------------------

#### 如何回到上一页面? ####

用`$ionicHistory`这个模块,引入该模块后使用`goBack([backCount])`，backCount指定回去多少个页面（-1代表回去一个页面），默认为-1

--------------------

#### 如何关闭应用? ####

--------------------

#### 在安卓设备上如何让title居中? ####

在headerbar中添加`align-title="center"`,如:

不过这个设置对ion-view无效，亲测，如果要统一让所有navbar上的title居中(包括上面的headerbar)，可以在config里设置,如:

如果要让某一个view title居中，可以用`$ionicNavBarDelegate`，参考[ionic官方文档][ionic 5]

--------------------

#### 如何让在sidemenu中的headerbar能够显示头像等其他信息? ####

解决方案是去掉headerbar,添加一个avatar到sidemenu content中，如:

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px; border-collapse:collapse; border-spacing:0px; width:680px; padding:0px; margin:0px"> 
 <tbody> 
  <tr style="width:680px; border-collapse:collapse; padding:0px; margin:0px"> 
   <td style="padding:0px; width:680px; border-collapse:collapse; margin:0px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow:auto; font-family:'Roboto Mono',Monaco,courier,monospace; font-size:0.8em; color:rgb(82,82,82); padding:1.2em 1.4em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:rgb(248,248,248)"><span>&lt;ion-side-menu side="left"&gt;
	&lt;ion-content class="bar-positive"&gt;
		&lt;ion-list&gt;
			&lt;ion-item class="item item-avatar item-positive" href="#"&gt;
				&lt;img src="img/commander.jpg"&gt;
				&lt;h2 class=" light"&gt;
					&lt;i class="icon ion-ios-star"&gt;&lt;/i&gt;{
       {title}}
				&lt;/h2&gt;
				&lt;a&gt;{
       {username}}&lt;/a&gt;
			&lt;/ion-item&gt;</span>
</pre> </td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### ionic的subheader挡住了内容区域怎么办? ####

解决方案是给`<ion-content>`加类`has-subheader`,同理也可以加`has-header`。如下:

--------------------

#### 对于需要添加数据的list，在添加数据后页面不能及时刷新造成卡顿怎么办? ####

可以使用`$ionicScrollDelegate.resize();`在添加数据后手动进行重新刷新,记得添加依赖

--------------------

#### ionic如何处理回退按钮？例如询问用户是否真的要退出应用 ####

可以在app.js的.run方法中增加对硬件回退按钮的注册处理,这里我在大部分页面都想注册该事件，除去有二级历史页面的我单独判断了下，注意增加依赖。

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px; border-collapse:collapse; border-spacing:0px; width:680px; padding:0px; margin:0px"> 
 <tbody> 
  <tr style="width:680px; border-collapse:collapse; padding:0px; margin:0px"> 
   <td style="padding:0px; width:680px; border-collapse:collapse; margin:0px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow:auto; font-family:'Roboto Mono',Monaco,courier,monospace; font-size:0.8em; color:rgb(82,82,82); padding:1.2em 1.4em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:rgb(248,248,248)"><span>$ionicPlatform.registerBackButtonAction(function(e) {
    var current_state_name = $state.current.name;
    if(current_state_name !== 'sidemenu.post'
     &amp;&amp; current_state_name !== 'sidemenu.contact_town' &amp;&amp;
    current_state_name !== 'sidemenu.contact_people'){
        $ionicPopup.confirm({
            title: '退出应用',
            template: '您确定要退出xxxx吗?'
        }).then(function (res) {
            if (res) {
                //ionic.Platform.exitApp();
                navigator.app.exitApp();
            } else {
                console.log('You are not sure');
            }
        });
        e.preventDefault();
        return false;
    }else{
        navigator.app.backHistory();
    }
},100);</span>
</pre> </td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录? ####

在应用的注册或者登录部分，不记名`token`响应了这个请求并且这个`token`被存储到本地存储中。当你向后端请求一个服务时，你需要把这个`token`放在头部中。你可以在`app.js`的`.config`方法中使用`AngularJS`的拦截器实现这个。每次请求都会被拦截并且会把认证头部和值放到头部中,同理如果服务器端响应`401`或`403`，跳转到重新登录页面.

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px; border-collapse:collapse; border-spacing:0px; width:680px; padding:0px; margin:0px"> 
 <tbody> 
  <tr style="width:680px; border-collapse:collapse; padding:0px; margin:0px"> 
   <td style="padding:0px; width:680px; border-collapse:collapse; margin:0px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow:auto; font-family:'Roboto Mono',Monaco,courier,monospace; font-size:0.8em; color:rgb(82,82,82); padding:1.2em 1.4em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:rgb(248,248,248)"><span>$httpProvider.interceptors.push(function ($q, $location, User, $rootScope) {
    return {
        'request': function (config) {
            config.headers = config.headers || {};
            if (User.getToken()) {
                config.headers.Authorization = 'Bearer ' + User.getToken();
            }
            return config;
        },
        'responseError': function (response) {
            if (response.status === 401 || response.status === 403) {
                //如果之前登陆过
                if (User.getToken()) {
                    $rootScope.$broadcast('unAuthenticed');
                }
            }
            return $q.reject(response);
        }
    };
});</span>
</pre> </td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### ionic如何实现搜索框内的全部清除按钮? ####

在label中的input不能嵌入按钮，因为ionic对于label中的tap事件会进行重定向到input上。解决方案是将label替换成span或div。如下面的搜索框，注意ng-model需要是一个对象才能置空,变量不行:

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px; border-collapse:collapse; border-spacing:0px; width:680px; padding:0px; margin:0px"> 
 <tbody> 
  <tr style="width:680px; border-collapse:collapse; padding:0px; margin:0px"> 
   <td style="padding:0px; width:680px; border-collapse:collapse; margin:0px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow:auto; font-family:'Roboto Mono',Monaco,courier,monospace; font-size:0.8em; color:rgb(82,82,82); padding:1.2em 1.4em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:rgb(248,248,248)"><span>&lt;span class="item-input-wrapper"&gt;
     &lt;i class="icon ion-ios-search placeholder-icon"&gt;&lt;/i&gt;
     &lt;input type="search" placeholder="请输入姓名前缀" ng-model="search.key"&gt;
         &lt;i class="icon ion-close-circled placeholder-icon" style="vertical-align: middle;"
            on-tap="clearSearch()" ng-if="search.key.length"&gt;&lt;/i&gt;
 &lt;/span&gt;</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

源引：http://blog.csdn.net/taohai123/article/details/51492726

[Link 1]: https://stackoverflow.com/questions/24185847/why-use-angulars-log-instead-of-console-log
[ionic_crosswalk]: http://blog.ionic.io/crosswalk-comes-to-ionic/
[Link 2]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#如何在某个界面中去掉导航栏?
[ionic]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#如何在ionic中加载本地图片?
[ionic 1]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#如何在ionic中嵌入网页代码?
[template_tab_sidemenu]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#如何将template加载到某个tab或某个sidemenu项目下?
[serve_ionic]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#运行serve命令时ionic报错?
[docker_ionic_0.0.0.0]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#用docker跑ionic的时候，不能把地址绑定到0-0-0-0怎么处理?
[Link 3]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#加载页面的时候会看到双括号一闪而过？
[Link 4]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#更新了数据，如何让界面更新呢？
[IonicView_card]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#如何实现IonicView中card上面有一列分割线的效果?
[controller.js_service.js]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#controller-js和service-js文件越来越大怎么办?
[Link 5]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#如何寻找优秀的范例代码?
[Link 6]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#如何显示相对时间？
[MissingTranslation]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#发布应用的时候如果遇到翻译错误即MissingTranslation怎么办?
[Link 7]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#如何在列表右下方添加时间等信息?
[Link 8]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#如何回到上一页面?
[Link 9]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#如何关闭应用?
[title]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#在安卓设备上如何让title居中?
[sidemenu_headerbar]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#如何让在sidemenu中的headerbar能够显示头像等其他信息?
[ionic_subheader]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#ionic的subheader挡住了内容区域怎么办?
[list]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#对于需要添加数据的list，在添加数据后页面不能及时刷新造成卡顿怎么办?
[ionic 2]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#ionic如何处理回退按钮？例如询问用户是否真的要退出应用
[ionic 3]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?
[ionic 4]: http://mclspace.com/2016/01/16/ionic-problems-and-solutions/#ionic如何实现搜索框内的全部清除按钮?
[broadcast _ _emit]: https://stackoverflow.com/questions/26752030/rootscope-broadcast-vs-scope-emit
[angularjs-code-organization]: https://calendee.com/2013/12/29/angularjs-code-organization/
[apps.evozi]: https://apps.evozi.com/apk-downloader/
[momentjs]: https://github.com/moment/moment/
[Link 10]: https://scotch.io/tutorials/display-time-relatively-in-angular
[ionic 5]: http://ionicframework.com/docs/api/service/%24ionicNavBarDelegate/