IonIcIonic Framework 一款H5的轻量级框架前言 Ionic Framework是一个开源UI工具包

Ionic Framework 一款H5的轻量级框架

前言

Ionic Framework是一个开源UI工具包，用于使用HTML，CSS和JavaScript等Web技术构建高性能，高质量的移动和桌面应用程序，并集成了Angular，React和Vue等流行框架将核心的Ionic经验与针对Angular开发人员的工具和API相结合

下载安装

首先全局安装ionic的脚手架npm install -g @ionic/cli native-run cordova-res
然后通过命令行创建项目 ionic start app tabs --type=angular --capacitor

创建完成之后通过cd app到当前目录下然后下载基本的UI依赖库 npm install @ionic/pwa-elements

下载完成之后通过 ionic serve运行
这样一个基本的ionic的基本项目就构建好了

下面开始构建Android的打包环境

首先下载 java的SDK 版本 1.8.0
下载android Studio 下载完之后配置一下啊androidSDK的版本要与javaSDK对应

再下载6.5版本的gradle
然后开始配置环境变量

配置完环境变量就可以验证是否配置成功了
首先是打开cmd命令窗口输入 java-c -version可以看到下图就证明成功了

然后输入gradle -v看到下图就成功了

接下来我们就从零开始构建一个 cordova自定义插件

我们利用 plugman 创建一个插件

1、下载 plugman npm install -g plugman

plugman create --name pluginName --plugin_id pluginID --plugin_version version  [--path path] [--variable NAME=VALUE]
 参数说明 
 pluginName：插件名称，如MyToast；
 pluginID：插件id, 如:org.demo.mytoast；
 version：版本号, 如:0.0.1；
 path：插件存放的绝对或相对路径；
 variable NAME=VALUE：扩展参数，如说明或作者，如woodstream

2、安装完成之后 plugman create --name MyToast --plugin_id org.demo.mytoast --plugin_version 0.0.1
3、成功之后目录结构应该是这样的

4、我们要编写插件首先要弄明白plugin.xml这个核心文件

5、然后我们在 src下创建一个 android的文件夹，在android目录下再创建一个 MyToast.java的文件（可以在这个文件中访问android原生的一些方法）


package org.apache.cordova.toast;

import android.widget.Toast;

import com.rscja.deviceapi.Module;
import com.rscja.deviceapi.RFIDWithUHF;
import com.rscja.deviceapi.RFIDWithUHFUART;
import com.rscja.deviceapi.interfaces.IUHF;
import android.util.Log;
import com.rscja.deviceapi.entity.UHFTAGInfo;
import android.os.AsyncTask;
import org.apache.cordova.PluginResult;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaArgs;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;


public class MyToast extends CordovaPlugin {
    public RFIDWithUHFUART mReader;

    @Override
    public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException {
       try{
        mReader = RFIDWithUHFUART.getInstance();
       }catch (Exception e) {
       }
       // 判断动作
        if (action.equals("readData")){
            //这里可以实现一些你的原生逻辑功能4
            //调用设备PDA初始化
            mReader.init();
            UHFTAGInfo strUII = mReader.inventorySingleTag();
            if (strUII!=null) {
                 String strEPC = strUII.getEPC();
                 callbackContext.success(strEPC);
            } else {
                callbackContext.error("调取失败，请重试");
            }
        }
        return false;
    }
}

6、然后我们在www/js文件中自定义一些方法访问java中的方法

var exec = require('cordova/exec');
var myFunc = function(){};
/**
 * MyToast :是plugin.xml中配置的feature的nema
 * readData: 是js中调用的方法名
 */
myFunc.prototype.readData=function(success, error) {
	exec(success, error, "MyToast", "readData", []);
}

var showt = new myFunc();
module.exports = showt;

7、接下来我们添加一些自己的配置（依旧在plugin.xml文件中）

<!--添加我们自己的平台  -->
    <platform name="android">  <!-- 平台类型 -->
        <config-file target="res/xml/config.xml" parent="/*">  
            <feature name="MyToast">  <!-- JS调用时的前缀名字 -->
                <param name="android-package" value="org.apache.cordova.toast.MyToast"/> <!-- .java类名全路径 --> 
            </feature>  
        </config-file>  
        <source-file src="src/android/MyToast.java" target-dir="src/org/apache/cordova/toast" />  
        <!-- src:java源文件的路径， target-dir:插件安装好后，源文件的位置，要和上面的包名对应 -->

        <source-file src="src/android/armeabi/libbarcodereader.so" target-dir="libs/armeabi" />
	

    </platform>

现在我们回到我们ionic 的项目中使用刚刚写的插件

1、检查cordova 是否已经安装 cordova -v 如果能看到下图就证明安装成功了

2、把刚刚写的自定义插件添加进来 cordova plugin add 插件名称 这是添加线上插件的方法，如果像我们是本地插件应该这样 cordova plugin add 插件的绝对路径+名称

3、接下来根据插件中 plugin.xml中 js-module 中的 target 就可以访问到插件中 www/js中的方法了

(window as any).MyToast.readData()  // 此时就调用了插件中js中的方法

接下来我们趁热打铁，讲一下关于ionic app自动升级

首先下载需要用到的插件

1、查看查看app当前版本插件

ionic cordova plugin add cordova-plugin-app-version
npm install @ionic-native/app-version

2、文件插件

ionic cordova plugin add cordova-plugin-file
npm install @ionic-native/file

3、文件传输插件

ionic cordova plugin add cordova-plugin-file-transfer
npm install @ionic-native/file-transfer

3、文件传输插件

ionic cordova plugin add cordova-plugin-file-opener2
npm install @ionic-native/file-opener

下载完相关插件之后
在app.module.ts中服务注入

然后在app.component.ts中进行配置

apkUpdate = async () => {
    const loading = await this.loading.create({
      cssClass: 'my-custom-class',
      message: '正在下载中...',
    });
    await loading.present();
    /**
     * 下载地址
     */
    const source =''; // 下载地址
    const saveurl = this.appFile.externalDataDirectory ? this.appFile.externalDataDirectory : this.appFile.dataDirectory;
    /**
     * apk安装地址
     */
    const apk = saveurl + 'download/' + 'ionic.apk';
    /**
     * 获取当前APP的版本号
     */
    this.appVersion.getVersionNumber().then((vsesion) => {
      console.log(vsesion, '============>');
    });
    /**
     * 获取下载的实例
     */
    const fileTransfers: FileTransferObject = this.fileTransfer.create();
    fileTransfers.download(source, apk).then((entry) => {
      this.fileOpener.open(
        apk,
        'application/vnd.android.package-archive'
      ).then((e) => {
        console.log('开始安装', e);
      })
        .catch(e => {
          console.log('Error openening file', e);
        });
    }, async (error) => {
      loading.dismiss();
      const errorload = await this.loading.create({
        cssClass: 'my-custom-class',
        message: '下载失败请重启APP重试！',
        duration: 1000
      });
      await errorload.present();
    });
    fileTransfers.onProgress(async (event) => {
      const num = Math.ceil(event.loaded / event.total * 100);  // 转化成1-100的进度
      if (num === 100) {
        loading.dismiss();
      }
    });
  }

代码中很多地方都写死了，大家根据自己的业务需求自行更改

IonIc