Ionic

Ionic的使用并不复杂，关键的问题在于native api调用时，其设计到andriod、ios的问题。

前置准备工作

1.java环境、Android环境

2.node环境

3.ionic环境

4.angular环境

调试

利用Android studio开发

npm install
ionic serve 启动

ionic cap add android 
ionic cap open android  
ionic cap run android -l --external  # 真机热加载写代码

利用cordova tools开发

ionic cordova platform remove android
ionic cordova platform add android(ios or windows)
然后利用cordovatools进行开发

生产APK

利用 ionic cordova build android --release ，会生成未签名的apk
keytool -genkey -v -keystore my-release-key.keystore -alias mks -keyalg RSA -keysize 2048 -validity 10000 , 生成签名工具。
利用keystore文件进行签名。 jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android-release-unsigned.apk mks
查看签名是否成功 jarsigner -verify -verbose -certs android-release-signed.apk
优化APK文件, 利用Android的zipalign命令可以完成优化。 zipalign -v 4 android-release-signed.apk MyExrApp.apk 对于当前项目而言：

密码：123123
ionic cordova build android --release
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore E:\test\patrol\my-release-key.keystore E:\test\patrol\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk mks

高德API使用

生成keystore文件

在项目根目录下面，利用 keytool -genkey -v -keystore my_project.keystore -alias name -keyalg RSA -keysize 2048 -validity 10000 生成keystore文件。

查看SHA1， keytool -v -list -keystore my_project.keystore F5: A2: B1:9F: CC:65:20: FF:00:30:34:45:68:28: FB: E3: E8:64:02:2B

9F:57: C4:6B:08:05: CE:70:8A:2D:2A: D2: FA:44: BF:21:21:62: E9:61

包名可在AndroidMainfest.xml中的package查看。io.ionic.starter
在高德网站申请key， 2403b8562854ff986813dcd1e921aa3b

注意高德测出来的经纬度是做了偏移了，其参考系统为GCJ02，如果要在leaflet上面进行展示的话，需要考虑进行坐标偏移。（木桥你采取的是利用原生Geolocation）

创建

在Ionic中页面和 公共组件 都以模块的形式存在, 方便引入 Ionic 的模块

ionic g page pageName # 创建页面，默认会创建模块

ionic g module module/slider --routing # 创建组件，需要自己先模块
ionic g component module/slider # 再组件。

resource文件夹

resource文件夹 属于ionic和app之间的核心交流文件，可以设置 Icons,Splash Screens 。

其中较为关键的还有其 resource/xml/network_security_config.xml 文件，能够对程序可以访问的网站进行定义。

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">t0.tianditu.com</domain>
        <domain includeSubdomains="true">www.smgi.com.cn</domain>
    </domain-config>
</network-security-config>

第三方库引入的问题

网上的说法纷繁复杂，参考价值真的不是很够(推荐检索时 -csdn， CSDN上面的参考🙉🙉🙉)，只有自身淌水了，才能够找到解决方案。

网上的库可以分为三类，

用ts描述的，即具备 schematic 的第三方库，我们可以在其包内查看到 *.d.ts 文件。针对这种文件，我们可以直接按照import 导入。
用import export描述过的，也是可以直接通过import导入。当然为了其中 schematic 的限制、代码检索功能，可以在网站TypeSearch导入其相关的 *.d.ts 文件如：

npm install d3 --save
npm install @types/d3 --save-dev #注意是开发环境

最原生的javascript，推荐直接在index.html中加入（此时相当于时全局导入），然后再使用时通过 declare var L:any ，再ts文件中引入全局的对象。

注意，这三种方式最好不要交叉使用。

Ionic学习之路