Ionic2+Angular2创建项目打包Android及集成极光推送全解析排坑

最新推荐文章于 2021-06-03 22:08:56 发布

a348639336

最新推荐文章于 2021-06-03 22:08:56 发布

阅读量8k

点赞数 1

文章标签： Ionic2 极光集成项目打包

本文链接：https://blog.csdn.net/a348639336/article/details/70312733

版权

最近学习使用Ionic2，网上很多都是Ionic1的教程，Ionic2毕竟还是有一些区别，小白开始入手所以一切都是靠网上教程和自己摸索，本人就自己在创建项目集成环境的过程中遇到的一系列问题做一个简单记录

本菜鸟参考了好多篇博客文章，综合分析使用得出以下使用方案，

首先是环境配置，这个没什么难度，也没有什么坑，这里参考一片文章：https://segmentfault.com/a/1190000008137785

这里面对于环境配置的方法讲得很仔细，可以完全按照这篇文章中配置环境，注意，Ionic和Cordova安装的步骤，由于国内的网络环境影响，这里有两种安装指令

方法一：针对有挂vpn的朋友

方法二：跟我一样没有翻墙朋友（指令语句中#和后面是注释都应该知道吧）

测试ionic 和 cordova都安装完后这里可能会有警告，不用管，一般是提示版本npm版本不够新

这些截图都是从上面链接地址抠过来的，文章大部分内容都比较靠谱，不过针对国内不能翻墙的朋友有些地方需要我们自己去做其他处理，不然会卡在下载的地方

在这个路径下执行指令：

ionic start youProjectName --v2

这里注意如果你是Android用户，ios还没试验，在创建工程时可以顺便把包名确定好，可以执行下面指令：

ionic start JPush --v2 --id dpary.jpush.demo 这里后面id就是你的包名

还有个问题，国内没翻墙用户在这里执行后会卡在Downloading这个地方：

这里有几个要注意的地方，可能会报一个npm的错，这里可能是npm源的问题，解决方法参考知乎的回答，本人只测试了方法二，行之有效，完美解决问题

到这里，项目创建完成了，你可以使用webstorm visual coede等等之类的工具打开查看项目了

运行在浏览器：

进入项目文件夹路径执行 ionic serve 运行在浏览器，F12查看手机模式巴拉巴拉的就不说了

接下来是打包，如果你想运行在手机，肯定是要build一下的，这里

先执行添加android平台：

ionic platform add android

添加Android平台，这个一般没什么问题，执行完后项目下会生成一个platform文件夹，

vpn用户直接执行指令：

ionic build android

成功后生成的apk会在项目的platforms\android\build\outputs\apk路径下。

无法翻墙的朋友这里稍微麻烦一点，执行上面指令会卡下载gradle的

如果是卡在下载这里，这里就需要我们自己去把插件下载下来，例如，我的插件是gradle 2.14.1,就自己去把这个包下载到本地，不用解压直接拷贝到你项目的下面这个路径：

这里还需要一个操作，就是修改配置：

找到上面这个文件修改gradle的路径查询地址为本地：

这样再去执行build指令： ionic build android 就没有什么问题了，然后你就会在项目的\platforms\android\build\outputs\apk路径下找到一个打包的apk了，这里打包的是带签名的debug apk如果需要正式包，执行指令：ionic build --release android (不知道有没有写错)，如果需要签名，这里自行去网上参考，很多资料，这里不多说

如果需要直接运行在真机，执行指令: ionic run android

好了，到这里项目的环境配置，创建工程，打包什么的都解决了，可能还有其他问题其他坑，我也是小白，本文讲述都是个人在使用过程中所遇到的问题，之后想试验一下集成极光推送，这个过程又遇到了很多坑，下面顺便一起来做个记录：

首先按上面创建好一个项目后，需要下载安装极光推送的插件，这里同样，本人在执行网上教程的指令：

1.到极光官网注册账号，新建应用获得appkey。

详见：https://www.jiguang.cn/app/list

2.引入jpush插件

详见：https://github.com/jpush/jpush-phonegap-plugin

通过 Cordova Plugins 安装，要求 Cordova CLI 5.0+：
cordova plugin add jpush-phonegap-plugin --variable API_KEY=xxxxxx
通过 url 安装：
cordova plugin add https://github.com/jpush/jpush-phonegap-plugin.git --variable API_KEY=xxxxxx
下载到本地安装：
cordova plugin add [localPath] --variable API_KEY=xxxxxx

注意：安装的时候记得带上极光推送新建应用的appkey

先介绍一下jpush的几个常用的事件：

jpush.setTagsWithAlias：设置别名和标签时触发
jpush.openNotification：打开推送时触发
jpush.receiveNotification：接收到通知时触发
jpush.receiveMessage：接收到消息时触发

同样我会卡在这个位置不动，这里我使用另一种指令：

先安装官方的cordova插件

$ cordova plugin add jpush-phonegap-plugin --variable APP_KEY=your_jpush_appkey

在安装本库

$ npm install ionic2-jpush --save

这种方式成功安装极光插件，之后会在下面路径发现已经有了极光插件：

这里还要在插件中导入自己的项目包名操作如下：

这里导入的是你的项目包名：例如 com.abc.demo.R

这里注意项目包名要与你的极光里的项目包名一直，如果你已经在创建ionic项目过程中确定了包名（需要与你在极光注册的包名一致），就不用管了，如果没有，需要在下面文件中修改项目包名：

这样极光的插件配置也基本完成，可以打包测试了（需要在真机测试），下面提供简单的极光使用代码：

home.thml代码：

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>src/pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <button ion-button block (click)="initJPush()">启动推送</button>
  <ion-item>
    <ion-label floating>别名 Alias</ion-label>
    <ion-input type="text" [(ngModel)]="alias"></ion-input>
  </ion-item>
  <button ion-button block (click)="setAlias()" [disabled]="alias == ''">设置别名</button>

  <ion-list>
    <ion-item text-wrap *ngFor="let msg of msgList">
      <ion-avatar item-left>
        <img src="assets/user.jpg">
      </ion-avatar>
      <h2>通知</h2>
      <p>{{msg.content}}</p>
    </ion-item>
  </ion-list>
<!--  <button ion-button block (click)="initJPush()">注册极光</button>
  <button ion-button block (click)="setAlias()">设置别名</button>
  <button ion-button block (click)="getRegistrationID()">获取id</button>-->
</ion-content>

home.ts代码：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var window;
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  alias: string = '';
  msgList:Array<any>=[];
  constructor(public navCtrl: NavController) {

  }
  initJPush() {
//启动极光推送
    if (window.plugins && 　window.plugins.jPushPlugin) {
      window.plugins.jPushPlugin.init();
      document.addEventListener("jpush.receiveNotification", () => {
        this.msgList.push({content:window.plugins.jPushPlugin.receiveNotification.alert})
      }, false);
      alert("注册极光推送")
    }
  }
  setAlias() {
//设置Alias
    if (this.alias && this.alias.trim() != '') {
      window.plugins.jPushPlugin.setAlias(this.alias);
      alert("设置别名:"+ this.alias);
    }else alert('Alias不能为空')
  }
}