网站 › 『编程语言区』 › 说一下本人用ionic3开发APP走过的坑

炎爷123 发表于 2018-3-1 19:06

说一下本人用ionic3开发APP走过的坑

本帖最后由 炎爷123 于 2019-7-3 11:51 编辑

本人是APP开发的小白，最近初学APP开发，在尝试了androidstudio臃肿之后一直在寻找新的APP开发方法，最后听说了ionic开发更为快速，便开始尝试用ionic开发APP。
从此便踏上了一条坎坷的路{:1_911:} ，先放上一张已经做好的APP的图，我写的是一个2048小游戏，玩起来卡卡的，可能不是安卓原生的缘故:(eew


本来这个东西是我web课程设计的作业，原来我写的是一个网页，网址如下：https://xyy55.github.io/如果打不开的话，多刷新几次
在手机上玩过2048的都知道，2048是用手指滑动来玩的，ionic简直坑爹，监听不到手指上划和下滑的动作，百度出来的也是一下垃圾，最后还好通过某种方法在国外找到了教程，具体如下：
第一步：先在命令行输入`npm install --save ionic-swipe-all`      安装ionic-swipe-all，这个模块可以让你监听到上划和下滑动作第二步：修改app.module.ts文件
```
import { IonicSwipeAllModule } from 'ionic-swipe-all';

@NgModule({
imports: [
    IonicSwipeAllModule,
],
})
export class AppModule {
}
```第三步：在你需要监听的页面使用，用法如下：```
@Component({
    template: `
      <div swipeAll
         (swipe)="swipeAll($event)"
         (swipeleft)="swipeLeft($event)"
         (swiperight)="swipeRight($event)"
         (swipeup)="swipeUp($event)"
         (swipedown)="swipeDown($event)"
      ></div>
    `,
})
export class AppComponent {

    swipeAll(event: any): any {
      console.log('Swipe All', event);
    }

    swipeLeft(event: any): any {
      console.log('Swipe Left', event);
    }

    swipeRight(event: any): any {
      console.log('Swipe Right', event);
    }

    swipeUp(event: any): any {
      console.log('Swipe Up', event);
    }

    swipeDown(event: any): any {
      console.log('Swipe Down', event);
    }

}
```

至此，手势监听事件的坑填完。
接下来是打包生成APK的坑，你是知道的，我很讨厌androidstudio（买不起好电脑可能是一个缘故），但是用命令行打包总是出错，又是一顿乱找，终于有方法解决了。
第一步：安装JDK，安装方法：下载完成，解压，直接按照提示安装，全局点确定，不出意外，最后的安装路径为：C:\Program Files\Java
      OK，jdk安装完成，在cmd中，输入$ java -version验证是否安装成功。

第二步：安装SDK,跟jdk放在一个父目录，便于查找：C:\Program Files\SDK，接着配置环境变量，我的电脑——右键属性——-高级系统设置——-环境变量。
      在下面的系统变量(s)中，新建，键值对如下：
      name: ANDROID_HOME
      key: C:\Program Files\SDK
      然后在path中，全局声明一下，将下面语句加在最后面，前面有【;】分隔符。
`%ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools`
      然后运行CMD，输入$ android -h，如果出现一大堆指令，说明你的SDK安装无误，并且环境变量配置OK。
      现在，打开SDK目录下的SDK Manager.exe
      打开界面上的Tools,选择options，先配置国内镜像：mirrors.neusofe.edu.cn
      下面记得勾选:Force...
      回到主界面，点packages再点reload
      然后根据需求安装安卓版本


第三步：安装gradle,打开：http://services.gradle.org/distributions/选择你想要安装的版本，一般安装bin结尾的，如：gradle-4.6-bin.zip
      同样安装在JDK,SDK的目录下，便于查找。
      同样的配置环境变量：
      GRADLE_HOME=C:\Program Files\SDK\gradle-4.1
      ;%GRADLE_HOME%\bin
      测试命令（查看版本）：gradle -v
如果没错的话环境应该就配置完成了。



接下来填签名的坑
第一步：在JDK目录下的bin文件夹下（C:\Program Files\Java\jdk1.8.0_71\bin），先看看有没有keytool.exe和jarsigner.exe文件，这两个程序用于给APK签名，签名以后即可发布
第二步：生成签名密钥，xyy.keystore就是你的密匙文件，xyy可以修改
`keytool -genkey -v -keystore xyy.keystore -alias xyy.keystore -keyalg RSA -validity 20000`
第三步：给文件签名，app.apk是未签名的apk文件，要放到bin文件夹，生成的complete.apk也在该文件夹，上述命令行均要在此文件夹中运行。
`jarsigner -verbose -keystore xyy.keystore -signedjar complete.apk app.apk xyy.keystore`
      
再接下来是填图标和启动界面的坑
第一步：将项目文件夹下的resources文件夹里的图片替换，splash.png为启动界面图片，icon.png为应用图标
第二步：在项目文件夹下运行，接下来就可以生成APK了
`ionic cordova resources`



APK下载地址：https://github.com/xyy55/2048-ionic/releases

do_now 发表于 2019-7-3 09:17

这个2048游戏的ionic开发的APK，提供的百度下载地址，和提取码是对的，但文档已经被删除无法下载了。作者是不是可恶啊，既然删除文档，这个帖子就应该删除或者说明不能下载了。

kk1212 发表于 2018-3-1 20:28

ionic开发更为快速。当然是需要一个熟练的过程

xp9477 发表于 2018-3-2 06:49

支持一下

wy350124418 发表于 2018-3-20 21:12

正在学习，感谢分享，不过ionic做游戏好像不行。

wushaominkk 发表于 2018-3-21 10:09

界面做的挺美观的,支持一下!

qewen0920 发表于 2018-4-25 11:46

我还以为是源码呢，被误导了，哭。。

吴一弦 发表于 2018-7-25 09:30

感谢分享{:301_996:}

wangyangsn 发表于 2018-8-3 03:31

不错，看看。

kutamy 发表于 2018-8-15 22:20

不错，可以避免入坑！！！

DiGu 发表于 2019-5-18 22:39

正在用！谢谢分享！

查看完整版本: 说一下本人用ionic3开发APP走过的坑