南风知我意的技术博客

一、ionic 命令整理

shell

1.安装Node.js
    node -v    
2.npm命令
  2.1 查看npm的版本 npm -v 
  2.2 更新npm的安装 npm install npm -g
  2.3 安装特定的版本插件 npm install -g cordova@6.0.0
  2.4 查看npm安装的插件 npm list
  2.5 更新npm  npm i npm@latest -g  
  2.6 查询npm安装的插件 npm list search ios-deploy  
 

3.git命令
  3.1 查看git版本 git --version 

4.cordova命令
  4.1 安装Cordova npm install -g cordova
  4.2 查看cordova版本 cordova -v  
  4.3 卸载 npm uninstall cordova -g

5.ionic命令
  安装脚手架：npm i -g @ionic/cli
  5.1 安装ionic npm install -g ionic
  5.2 查看ionic版本 ionic -v
  5.3 创建ionic项目 ionic start appName [tabs/blank/sidemenu] [--v2] 
      默认是tabs模版 tabs blank sidemenu
  5.4 预览运行 ionic serve [--p 8100 可以指定端口]   
  5.5 安装iOS模拟器 npm install -g ios-sim 
  5.6 添加/移除移动平台 ionic cordova platform add/remove ios/android/windows
        指定版本：ionic cordova platform add android @版本号
  5.7 在模拟器上运行 ionic cordova emulate [platform]
      ionic cordova emulate ios --target="iPad-Air" 指定要模拟的设备
  5.8 查看全部iOS设备类型列表 ios-sim showdevicetypes
  5.9 将控制台日志输出到终端窗口 ionic cordova emulate ios -l -c   
  5.10 在设备上测试（真机）ionic run ios -l -c 
  5.11 指定app名称 ionic start myApp -a "湖北贵州沃受理" 加双引号 防治空格
  5.12 指定appId ionic start myApp -i com.mycompany.appname
  5.13 添加/移除插件 ionic cordova plugin add/remove[rm] [plugin id]
  5.14 查看插件列表 ionic cordova plugin ls
  5.15 ionic生成器 ionic -g [page|component|directive|pipe|tabs] [element name]
       注：ionic 2 使用kebob-casing(烤肉串命名法)来命名文件名，对于TypeScript中的JavaScript类则采用Pascal命名法。
  5.16 预览各平台之间的差异 ionic serve --lab
  5.17 指定运行的IP地址 ionic serve --address 112.365.365.321
  5.18 安装部署插件 npm install -g ios-deploy
  5.19 输出日志 emulate和run 都支持将控制台日志和服务器日志重定向到ionic CLI
       注：开启控制台日志 --consolelogs / --c
          查看服务器日志 --serverlogs / --s 
  5.20 查看ionic CLI 的全部状态和它的支持工具 ionic info 
       注：查看完整的列表 ionic --help
  5.21 设置淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org  
  5.22 保存插件 ionic cordova plugin save
  5.23 自动生成尺寸图标和启动页 ionic resources / ionic cordova resources --[icon/splash]
  5.24 构建release版 ionic cordova build ios --release --prod
  5.25 控制台打印详细日志 ionic serve --verbose

二、ionic 问题整理--IOS

1、ios版本发送https 请求错误问题

参考地址: 修改webstrom 工程platforms-->MyApp-->AppDelegate.m-->在末尾追加如下代码如下:

 @implementation NSURLRequest(DataController) + (BOOL)allowsAnyHTTPSCertificateForHost:(NSString *)host {
     return YES;
 } @end

2、打开ios jar

命令：shift+command+G

4、禁止侧滑返回

<ion-nav #myNav [root]="rootPage" [class] = "selectedTheme" swipeBackEnabled="false"></ion-nav>

或者：
<ion-nav #myNav [root]="rootPage" [class] = "selectedTheme"  swipe-back-enabled="false"></ion-nav>

或者：
this.navCtrl.swipeBackEnabled = false;//禁止侧滑返回

或者：
IonicModule.forRoot(MyApp,{
  tabsHideOnSubPages: 'true',         //隐藏全部子页面tabs
  swipeBackEnabled: false,
  mode: 'ios',  //强制使用ios风格
  iconMode:'ios', //强制使用ios风格icon
  backButtonText: '返回', //顶部返回按钮文字
  platforms: {
    ios: {

    },
    android: {

    }
  }
}),

5、 ios 11系统statusBar和title重叠在一起的问题

Please install three Cordova plugins：
5.1、cordova-plugin-disable-ios11-statusbar
安装命令：cordova plugin add cordova-plugin-disable-ios11-statusbar
5.2、cordova-plugin-statusbar
5.3、cordova-plugin-wkwebview-engine 这个可以不用安装因为在构建加入平台的时候默认安装了webview 这个插件，如果再次安装ios在编译的时候会出现两次同样的代码的报错
set property：
viewport-fit=cover    
如果通过上述设置，依旧会出现重叠问题请降低cordova 版本 cordova 7.0.0

6、仅适用于内容不大于屏幕的页面，滚动反弹 ios 将此添加到您的app.scss

全局添加：
.content-ios:not([no-bounce])>.scroll-content::before { bottom: 0; }
单页面添加：
<ion-content no-bounce></ion-content>

7、 ios谷歌浏览器跨域命令

open -a "Google Chrome" --args --disable-web-security -user-data-dir
或者：
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yangdong/chrome-disabled --ignore-certificate-errors --allow-file-access-from-files

8、 ios跨域问题解决方案

https://blog.csdn.net/u012365780/article/details/80449682

9、基于ios的ionic DatePicker设置中文

/**
 * 预约时间
 */
showDatePicker(type: number) {
  this.datePicker.show({
    date:type == 0?new Date():new Date(new Date().getTime() + 24*60*60*1000),// 安卓时间不兼容 string 不支持 官网写的有问题
    mode: 'date',//时间类型   
    minDate: type == 0?new Date().getTime():(new Date()).getTime() + 24*60*60*1000, //日期最少要选明天，不允许选今天以前的日子
    // minDate: type == 0?new Date().getTime():new Date((new Date()).getTime() + 24*60*60*1000).getTime(), //日期最少要选明天，不允许选今天以前的日子
    allowOldDates:false,//是否可以选择以前的时间
    allowFutureDates:true,//是否可以选择将来的时间
    locale: 'zh-cn', //ios 默认是 en_us 英文的，需要改成中文。安卓默认是中文的
    doneButtonLabel:'确定',
    cancelButtonLabel:'取消',
    androidTheme: this.datePicker.ANDROID_THEMES.THEME_HOLO_DARK
  }).then(
    date => {
      console.log('showDatePicker date: ', date);
      if(type == 0){
        this.commitParam.installDate = this.datePipe.transform(date,"yyyy-MM-dd"); //0是预约开通时间
      }
      else if(type == 1){
        this.commitParam.openDate = this.datePipe.transform(date,"yyyy-MM-dd"); //1是开通时间
      }
    },
    err => console.log('showDatePicker error: ', JSON.stringify(err))
  );
}

10、普通的input标签和ionic 自带的ion-input的异同：

    1、两者都可以使用[(ngModel)] 进行双向绑定数据
    2、input 标签：在inphone 6s和8 android 版本 [(ngModel)] +事件绑定 是可以及时响应的，也能及时的获取[(ngModel)]绑定的数据值
             在inphone 6和6p 事件是可以及时响应的，但是[(ngModel)]绑定的数据值不能及时获取
       ion-input 标签：能很好的兼容。

11、iOS禁止横屏

在AppDelegate.h添加如下代码
- (NSUInteger)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window
{
     return UIInterfaceOrientationMaskPortrait;
}

12、拉取代码

    12.1 ionic start wsl-hb -a "湖北沃受理" blank;
    12.2 ionic serve
    12.3 rm -rf .git 删除.git   初始化.git
    12.4 拉取代码
    12.5 加入ios 模拟器  一定要先加入模拟器  因为加入插件 有些插件跟ios不兼容，先加入模拟器可以最后对这些插件单独的处理。
    12.6 添加对应的插件

13、添加scheme

14、安装插件错误提示：

npm ERR! A complete log of this run can be found in:
npm ERR!/Users/yangdong/.npm/_logs/2018-06-12T03_03_24_699Z-debug.log
    at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/_cordova-common@2.2.3@cordova-common/src/superspawn.js:169:23)

解决方案：sudo npm install -g ios-sim

15、打包报错提示

UnhandledPromiseRejectionWarning: ios-deploy was not found. Please download, build and install version 1.9.2 or greater from https://github.com/phonegap/ios-deploy into your path, or do 'npm install -g ios-deploy'

解决方案：npm install -g ios-deploy

16、使用prompt弹出框不居中显示的问题

解决方案：需要重新设置样式 padding-top: 10rem !important;

17、ios打包报错

问题原因：插件使用了xcode9的新特性但是当前版本的编译器不支持。
目前影响的插件：$ionic cordova plugin add phonegap-plugin-barcodescanner@7.0.2
              $ npm install --save @ionic-native/barcode-scanner
              指定安装7.0.2 版本 
解决方案：1.提升当前的编译器版本 2.删除使用新特性的插件，替换成支持当前编译器可编译的版本。

18、下载指定版本的xcode

https://blog.csdn.net/shihuboke/article/details/78112266

19、 node从6.x升级到8.x后，旧项目编译scss文件时报错

ERROR in ./src/app/note/account/user.component.scss
Module build failed: Error: Missing binding D:\webstormProjects\my-project\node_modules\node-sass\vendor\win32-x64-57\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x
Found bindings for the following environments:
  - Windows 64-bit with Node.js 6.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass --force` to build the binding for your current environment.
    at module.exports (D:\webstormProjects\mj-project\node_modules\node-sass\lib\binding.js:15:13)
    at Object.<anonymous> (D:\webstormProjects\mj-project\node_modules\node-sass\lib\index.js:14:35)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\webstormProjects\mj-project\node_modules\sass-loader\lib\loader.js:3:14)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)

解决方案：

npm uninstall node-sass
npm install node-sass

20、打包证书验证不过

bundle identifier 没有被对应的证书识别。

21、npm i报错

设置淘宝镜像：npm install --registry=https://registry.npm.taobao.org

22、WKWebView window.open()不起作用

window.open()在WKWebView无缘无故的失效，但是在UIWebView中是可以正常使用的。
解决方案
配置：<allow-navigation href="*" />
1.使用window.location.href = "";
2.添加cordova-plugin-ionic-webview-openblank --save 插件

23、platfrom_metadata报错

解决方案：
cordova 降级：
npm install cordova@7.0.0

24、ionic serve 报错

解决方案：
      检查是否翻墙。如果翻墙关闭翻墙，重新运行。

25、xcode 编译ionic项目插件报错

解决方案：插件未移除干净在xcode找到对应的文件移除重新编译下。

26、回调函数的问题

//跳到选择页面,回调函数处理
this.navCtrl.push('PaperlessPage', {'paperlessData':paperlessData,  'successCallback':(resp)=> {
    if (resp && resp.success) {
      this.doMergeQuery();
    }
  }
});

接受回调：需要在该生命周期里接受回调函数，ionViewDidEnter 生命周期里接受不到函数。
ionViewDidLoad(){
  console.log('ionViewDidLoad PaperlessPage');
  this.successCallBack = this.navParams.get("successCallback");
  console.log(this.successCallBack);
}

处理回调：
let resp = {
  'success':false,
};
resp.success = true;
this.navCtrl.pop();
this.successCallBack(resp);

27、ios-deploy 安装报错

解决方案：

sudo npm install -g ios-deploy --unsafe-perm=true

28、xcode-select: error: tool 'xcodebuild' requires Xcode错误解决方法

原因:Xcode重命名后，xcodebuild找不到原来的Xcode了。
解决方法：在终端输入命令
xcode-select -switch 新的xcode路径
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/

29、ionic兼容iphoneX的刘海屏问题

处理方案参考：https://blog.csdn.net/mcp1490644562/article/details/84839547

30、抖动撤销

处理方案：方案一：加入插件 https://github.com/nleclerc/cordova-plugin-ios-disableshaketoedit 方案二：设置iOS手机软文参考： https://forum.ionicframework.com/t/disable-shake-gesture-for-undo-typing-on-app/7543/2

31、Xcode 10 iOS12 "A valid provisioning profile for this executable was not found.

解决方案：

32、webview版本过高

参考：https://www.jianshu.com/p/67146af7ef50 解决方案：

33、页面特定返回

ionViewDidEnter(){
  // 根据跳转来源，返回不同的页面
  this.fromPage = this.navParams.get("fromPage");
  if (this.fromPage === 'cb-product-change') {
    this.navBar.backButtonClick = this.backButtonClick;
  }
}

backButtonClick = (e: UIEvent) => {
  this.navCtrl.popTo(this.navCtrl.getByIndex(this.navCtrl.length()-3));
};

34、监听页面声明周期事件

import {App} from "ionic-angular";

    this.app.viewDidLoad.subscribe(res=>{
      console.log(res);
      console.log(res.component.name);
      // do something
    })

参考：https://segmentfault.com/a/1190000015130204?utm_source=tag-newest

35、ionic 时间选择 [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false

解决方案：在html节点上加上：touch-action: none

36、Ionic App 启动时报Application Error - The connection to the server was unsuccessful

最近在更新App的时候，发现在华为手机上报这个错误，有点困惑，查找资料分析，大概原因是程序在加载index.html网页时，加载的资源过多，造成时间超时，解决方案：在config.xml中加入

 <!--解决程序启动问题:Application Error - The connection to the server was unsuccessful-->

  <preference name="loadUrlTimeoutValue" value="700000" />

37. iOS/Xcode:Invalid bitcode signature

对项目archive、profile都提示错误： error: Invalid bitcode signature clang: error: linker command failed with exit code 1 (use -v to see invocation) 但是直接run可以正确运行app。首先，简单说下这个bitcode，照我的理解是一个编译方式。苹果官方说明是，如果你勾选了bitcode，那么可以提高你的app在手机上运行的速度。可以理解为编译针对每一种特定的机器、系统进行了优化。但是目前接入很多第三方的framework，或者project，是不支持bitcode的。本质的原因我不懂，也不会把他们改成可以支持bitcode。最傻瓜式的解决方案就是设置bitcode = NO，就可以顺利archive/profile你的项目！在你的项目中，进行如下设置： feab40db-d5ae-40a9-afb5-b7348b2706db But!还是编译错误，clean也没用。考虑到以前添加支付宝的库（第三方库/项目）也出现过bitcode问题，这次我添加的是aliyun的两个库AliyunOSSiOS.framework和AliyunOSSSwiftSDK.framework。因为pod install一个小时都没反应，无法下载，所以我是从官网拿的项目，自己buid生成的库，手动添加进去的。所以猜测原因是buid aliyun项目的时候，bitcode设置的问题。一看果然如此，果断按照上面的步骤，把aliyun项目的bitcode设置为NO，重新build生成AliyunOSSiOS.framework和AliyunOSSSwiftSDK.framework，再重新添加到我的项目中。再次profile或archive，都可以通过编译！

参考：https://www.jianshu.com/p/94313efe4ab9

38. JAVASCRIPT HEAP OUT OF MEMORY的几种解决办法

参考：https://www.cnblogs.com/telwanggs/p/11243011.html https://stackoverflow.com/questions/56354079/npm-build-gives-ineffective-mark-compacts-near-heap-limit-allocation-failed

39. Cannot find module '../../src/cordova/platform_metadata'

凡事说降低cordova版本的全是瞎扯，我都升级版本了，还让我降低回去！！！原因：现安装的插件，不满足当前的cordova版本，移除不满足的插件，重新安装即可。 ios平台一般是如下插件不满足。

cordova plugin rm cordova-plugin-add-swift-support
cordova plugin add cordova-plugin-add-swift-support

android平台较多，需要仔细查看控制台日志。

40. Cordova error: Using “requireCordovaModule” to load non-cordova module “q” is not supported

原因：cordova 9.0的问题，有些插件不兼容尝试：

cordova plugin rm cordova-android-support-gradle-release
cordova plugin add cordova-android-support-gradle-release@latest

不行再尝试：参考网址：https://stackoverflow.com/questions/55304065/cordova-error-using-requirecordovamodule-to-load-non-cordova-module-q-is-no

三、ionic 问题整理--Android--Mac电脑

1.ionic cordva build android报错

解决方案：

1.步骤一：
sudo chmod 755 /Applications/Android\ Studio.app/Contents/gradle/gradle-4.4/bin/gradle
2.步骤二：
移除平台 ionic cordova platform rm android
再次添加平台 ionic cordova platform add android
3.再编译

2.ionic生成的android项目，如何引用第三方项目作为library?

解决方案:

在所有library项目的build.gradle中添加语句publishNonDefault true即可。参考CordovaLib的build.gradle

3.bad class file magic or version报错

原因：build.gradle 中的 CordovaLib中的build.gradle 需要与当前编译的JDK版本兼容。注：改完之后需要clean Project 和rebuild Project

4.R文件报错

5.编译报错 No resource identifier found for attribute 'appComponentFactory' in package 'android'

在项目级别的build.gradle 的allprojects节点下面加上

configurations.all {
    resolutionStrategy.force 'com.android.support:support-v4:24.0.0'
}

6. 安装老版插件

首先打开官网，进入老版的API文档新版的插件：老版的插件需要带@4 默认安装老版最新的。安装命令：

## 指定插件版本
ionic cordova plugin add phonegap-plugin-barcodescanner@7.0.2 
## 指定ionic-native引用目录
npm install --save @ionic-native/barcode-scanner@4

7. 自定义插件注意项目结构

8. Error: /Users/xxx/xxx/platforms/android/gradlew: Command failed with exit code EACCES

解决方案：删除平台目录，并重新安装每个平台（这里以Android为例）

$ cd <your-project-directory>
$ rm -r platforms  
$ cordova platform add android
$ cd <your-project-directory>/platforms/android/cordova
$ chmod a+x build

一、ionic 命令整理 ​

二、ionic 问题整理--IOS ​

1、ios版本发送https 请求错误问题 ​

2、打开ios jar ​

4、禁止侧滑返回 ​

5、 ios 11系统statusBar和title重叠在一起的问题 ​

6、 仅适用于内容不大于屏幕的页面，滚动反弹 ios 将此添加到您的app.scss ​

7、 ios谷歌浏览器跨域命令 ​

8、 ios跨域问题解决方案 ​

9、 基于ios的ionic DatePicker设置中文 ​

10、普通的input标签和ionic 自带的ion-input的异同： ​

11、iOS禁止横屏 ​

12、拉取代码 ​

13、添加scheme ​

14、安装插件错误提示： ​

15、打包报错提示 ​

16、使用prompt弹出框不居中显示的问题 ​

17、ios打包报错 ​

18、下载指定版本的xcode ​

19、 node从6.x升级到8.x后，旧项目编译scss文件时报错 ​

20、打包证书验证不过 ​

21、npm i报错 ​

22、WKWebView window.open()不起作用 ​

23、platfrom_metadata报错 ​

24、ionic serve 报错 ​

25、xcode 编译ionic项目插件报错 ​

26、 回调函数的问题 ​

27、ios-deploy 安装报错 ​

28、xcode-select: error: tool 'xcodebuild' requires Xcode错误解决方法 ​

29、ionic兼容iphoneX的刘海屏问题 ​

30、抖动撤销 ​

31、Xcode 10 iOS12 "A valid provisioning profile for this executable was not found. ​

32、webview版本过高 ​

33、页面特定返回 ​

34、监听页面声明周期事件 ​

35、ionic 时间选择 [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false ​

36、Ionic App 启动时报Application Error - The connection to the server was unsuccessful ​

37. iOS/Xcode:Invalid bitcode signature ​

38. JAVASCRIPT HEAP OUT OF MEMORY的几种解决办法 ​

39. Cannot find module '../../src/cordova/platform_metadata' ​

40. Cordova error: Using “requireCordovaModule” to load non-cordova module “q” is not supported ​

三、ionic 问题整理--Android--Mac电脑 ​

1.ionic cordva build android报错 ​

2.ionic生成的android项目，如何引用第三方项目作为library? ​

3.bad class file magic or version报错 ​

4.R文件报错 ​

5.编译报错 No resource identifier found for attribute 'appComponentFactory' in package 'android' ​

6. 安装老版插件 ​

7. 自定义插件注意项目结构 ​

8. Error: /Users/xxx/xxx/platforms/android/gradlew: Command failed with exit code EACCES ​

一、ionic 命令整理

二、ionic 问题整理--IOS

1、ios版本发送https 请求错误问题

2、打开ios jar

4、禁止侧滑返回

5、 ios 11系统statusBar和title重叠在一起的问题

6、仅适用于内容不大于屏幕的页面，滚动反弹 ios 将此添加到您的app.scss

7、 ios谷歌浏览器跨域命令

8、 ios跨域问题解决方案

9、基于ios的ionic DatePicker设置中文

10、普通的input标签和ionic 自带的ion-input的异同：

11、iOS禁止横屏

12、拉取代码

13、添加scheme

14、安装插件错误提示：

15、打包报错提示

16、使用prompt弹出框不居中显示的问题

17、ios打包报错

18、下载指定版本的xcode

19、 node从6.x升级到8.x后，旧项目编译scss文件时报错

20、打包证书验证不过

21、npm i报错

22、WKWebView window.open()不起作用

23、platfrom_metadata报错

24、ionic serve 报错

25、xcode 编译ionic项目插件报错

26、回调函数的问题

27、ios-deploy 安装报错

28、xcode-select: error: tool 'xcodebuild' requires Xcode错误解决方法

29、ionic兼容iphoneX的刘海屏问题

30、抖动撤销

31、Xcode 10 iOS12 "A valid provisioning profile for this executable was not found.

32、webview版本过高

33、页面特定返回

34、监听页面声明周期事件

35、ionic 时间选择 [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false

36、Ionic App 启动时报Application Error - The connection to the server was unsuccessful

37. iOS/Xcode:Invalid bitcode signature

38. JAVASCRIPT HEAP OUT OF MEMORY的几种解决办法

39. Cannot find module '../../src/cordova/platform_metadata'

40. Cordova error: Using “requireCordovaModule” to load non-cordova module “q” is not supported

三、ionic 问题整理--Android--Mac电脑

1.ionic cordva build android报错

2.ionic生成的android项目，如何引用第三方项目作为library?

3.bad class file magic or version报错

4.R文件报错

5.编译报错 No resource identifier found for attribute 'appComponentFactory' in package 'android'

6. 安装老版插件

7. 自定义插件注意项目结构

8. Error: /Users/xxx/xxx/platforms/android/gradlew: Command failed with exit code EACCES