ionic 4.0基础配置指南

目录

一、环境

二、调试

三、配置

四、其它

---

       ionic是一个功能相当强大的webAPP开发框架，它配备了很多开箱即用的精美UI组件和API插件。由于它用到了很多辅助工具，比如打包APP的cordova，Android SDK，打包css的node-sass等，这些可能还会用到别的东西和自身版本问题，所以对于初学者，配置的话会感到棘手，下面我就讲解一下我在我的移动硬盘上的win10搭建开发环境和配置的过程。（2018年12月1日）

一、环境

    首先，必需要有的是，node.js-v11，一个win10管理员账户，会添加环境变量等基本操作，安装软件的时候应该默认安装在C盘的特定用户的AppData文件夹或program files等文件夹（选在非C盘时它的主体还是在C盘的，而且不利于多账户系统的使用），最好下载可以为所有系统用户安装的版本（像vscode就有user和system版本），还有因为Android 是谷歌的，所以最好有VPN翻翻墙，推荐一个便宜的https://portal.shadowsocks.nu/，要是这个被墙了，就用启点加速器，百度搜就能搜到，30元一个月不限量。

    接下来打开命令提示符，安装ionic，cordova，如下：

npm install -g ionic
npm install -g cordova

如果npm出现下不了或太慢，一直卡在downloading，大概是被墙了，应该先npm install -g nrm,，nrm ls，nrm use taobao，切换淘宝镜像，当然用VPN也可以的。

等待完成，ionic -v ,cordova -version,检查一下是否成功，要是不对，你可能需要将npm全局包路径添加到系统path中，路径一般是C:\User\<-你的账户名->\AppData\Roaming\npm，里面有同名的Windows脚本命令，这时候也应该在用户环境变量新建NODE_PATH变量指向里面的node_modules文件夹。

    再安装jdk（Java环境），进去在downloads区域选一下Accept License Agreement选项就自由下载安装包了，Windows的大约200MB。

    再安装Android SDK，注意这个的安装路径里不能有中文，空格（所以应该修改下安装路径，或新建），完成后添加系统环境变量ANDROID_HOME为安装路径，顺便添加里面的platform-tools文件夹的路径到系统path变量里（后面要用）。打开Android SDK Manager，选取需要的构建工具build toolds（28.0,27.0），Aandroid API（25,26）和platforms，点击右下角install packages即可，以后项目提示需要再来加就好了。这个可能要下很久，体积大，要是失败很有可能是你要开VPN的时候了。

    再安装Android Studio，这个安装好后给它设置一下刚才Android SDK的路径就好了。（Android SDK Location）

    这个时候，如果在你的项目文件夹里，打开命令提示符（cd到它，或放个cmd快捷方式，或在vscode的terminal界面），输入命令：

ionic start MyApp blank --type=angular

我们就可以在当前文件夹新建应该名为MyApp，使用ionic自带模板blank，使用最新angular（~7.0）环境的项目了，需要注意的是如果type=ionic angular，那就是~5.0，若是ionic1，就是angularjs（很老的版本），我们当然应该用最新的。可是这时npm i时会报错node-sass，这是因为我们还没安装python 2.7和c++环境，编译scss需要的。

    安装python 2.7，不要错装了3.0的（他们可以共存，把python2的exe文件名后面加的2就行），这个时候非常重要的一件事就是-->npm config set python <-python2的安装路径/python.exe->，要手动告诉npm python2的可执行程序的位置，不然它还找不到。

    接下来安装c++环境，这个就是安装vs 2017社区版，选好c++相关的环境，就行了。

    至此，环境完全搭建好了，在项目文件夹里：

ionic cordova build android --prod

就可以打出一个已经签名的App，可以装在手机上了。如果->--release是需要手动签名的，不能直接装。

另外，新建一个页面：

ionic g page newpagename

新建一个组件：

ionic g component cname

 在src/app目录里就可以编辑页面了。

执行以下命令就可以查看页面和简单调试：

ionic serve --lab

 

二、调试

    -->ionic serve 在不需要API的时候非常方便，需要API的时候需要在手机上调试，除了alert（），JSON.stringify() 等页面显示，还有可以连接USB查看控制台。这里有两个方法：

    方法一：

ionic cordova run android -l -c

这个可以打出调试包，但需要通过Android SDK安装HAXM（安卓模拟器），同时需要高性能显卡和兼容的Windows（移动版不行），先跳过。

    方法二：

    首先，下载谷歌浏览器，应用宝（没错，它会自动安装驱动），开启手机USB调试：

开启方法：例如我的小米max2 MIUI10.1，-->设置-->我的设备-->全部参数-->MIUI版本，点它七下，就可以在-->更多设置-->开发者选项，开启‘开发者选项’，‘USB调试’，‘USB调试（安全设置）’。接下来打开APP，连接USB，这里最好在命令提示符：-->adb devices，查看有没有连上，如果是无效的命令，那么就是你前面没有将Android SDK目录的platform-tools文件夹添加到path，重新开启cmd，如果有手机列表，就是连上了，就可以打开谷歌浏览器，访问链接chrome://inspect/#devices，稍等，找到我们的APP，点击inspect，就可以调试了。

    这里其实是获取Android的webview（手机系统内置的浏览器内核，原生APP里打开链接全靠它）控制台，如果你的其他APP使用了内置网页，都可以调试它。

附：第一次浏览器调试时需要下载和手机浏览器相关的文件，浏览器会请求 https://chrome-devtools-frontend.appspot.com，得翻墙才行，否则点击inspect会出现404，调试样式时，貌似不能修改样式表，只能往元素里修改属性style=' your style'才会生效。

三、配置

    关于我们的APP还有一个重要的文件就是config.xml文件，在项目根目录。

    1、APP的名字<name>标签里的文字

    2、APP的packageName，在手机里标识一个不同的APP，缓存目录名就是它了。

    3、APP的启动画面，图标，通过<platform>里的icon标签，splash标签配置，当然ionic提供了其他快捷方法。

    4、APP的权限配置，首先在widget标签添加属性xmlns:android="schemas.android.com/apk/res/android"，这是安卓的命名空间，若不添加就配置权限会造成重名，产生merge错误，再在platform里添加：

<config-file parent="/*" target="AndroidManifest.xml">
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
    。。。。
 </config-file>

填你需要的权限就可以了，需要注意的是，有些权限需要你自己在此配置，否则就算用户手动开启也是没用的。

    比如我们可能需要使用用户手机存储里的一张图片作为img标签的src属性，得到它的路径是原生URI（像这样：file:///storage/emulated/0/piece.jpg），先要转换为webview内置服务器上了URL，（安装webview插件）,this.webView.convertFileSrc(FILE_URI)，得到这样的URL（http://localhost/_file_/storage/emulated/0/piece.jpg）,切换链接，这个时候若不配置或申请权限，用户再怎么操作也是不能显示出图片的。

 

四、其它

    1 、推荐使用vscode或webstorm这样的高级编辑器，可以纠正你百分之九十的错误，还可以提示一个对象里所有可用的方法和属性，了解一个包最好去看看它的index.d.ts文件，里面有它提供给你的所有方法，及其参数类型，返回类型，注释说明。
 

    2、ionic官网文档和cordova官网讲的很详细，基本都配有例子，如果你的英文水平不高的话，可以使用谷歌浏览器自带的翻译网页的功能进行阅读。一步一步来，相信不久就可以开发出好用的APP了。

    3、不妨添加本人QQ格兰德1147940842，一起交流、合作。