自定义cordova插件-进阶

前言

• 本章是上一章自定义cordova插件-入门的续篇,没有阅读上一章的请移步

• 本章需要在com.kit.cordova.nativeLocation插件上添加高德定位功能.所以请务必了解一下高德android定位sdk.需要阅读的内容如下
  

  

运行高德定位demo

• 本步可省略

• 没什么android开发经验?没事.下载demo,照猫画虎也能做出来
  

  

• 下载完解压,找到AMapLocationDemo.用Studio打开,注意整个项目路径不要有中文
  

  

• 点击刷新,然后在真机上运行,可以看到许多定位demo,然后再对照着源码学习
  

  

项目中添加定位功能

• 用Studio打开android项目.你的app项目>platforms>android目录

• 根据官网文档,定位功能只需要添加jar就行了
  

  

• 解压刚刚下载的AMapLocation.zip得到定位jar如下图
  

  

• 拷贝jar到Studio libs目录,如下图,拷贝完成记得刷新一下gradle
  

  

• 在高德开发者控制台,给应用申请app key.发布版和调试版的SHA1值都填debug版本的.如下图,点击提交就会生成一个android定位key.

关于申请key这里有更详细介绍

• 参考官网获取定位数据小节给项目添加其他配置
• 在AndroidManifest.xml中的节点下配置service和key,如下图

• 然后在AndroidManifest.xml中的节点下配置权限和app使用的sdk版本,如下图

由于sdk版本大于23以上的app要动态申请定位权限,所以这里使用sdk版本为22.默认有app需要的所有权限

• 找到NativeLocation.java文件实现定位功能,完整代码已在下面贴出
  
  

package com.kit.cordova.nativeLocation;

import android.content.Context;
import android.util.Log;

import com.amap.api.location.AMapLocation;
import com.amap.api.location.AMapLocationClient;
import com.amap.api.location.AMapLocationClientOption;
import com.amap.api.location.AMapLocationListener;

import org.apache.cordova.CordovaInterface;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;

import org.apache.cordova.CordovaWebView;
import org.apache.cordova.PluginResult;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

public class NativeLocation extends CordovaPlugin {

  CallbackContext callbackContext = null;

  //声明AMapLocationClient类对象
  AMapLocationClient mLocationClient = null;

  //声明定位回调监听器
  AMapLocationListener mLocationListener = new AMapLocationListener() {
    @Override
    public void onLocationChanged(AMapLocation aMapLocation) {
      if (aMapLocation != null) {
        if (aMapLocation.getErrorCode() == 0) {
          int locationType = aMapLocation.getLocationType();//获取当前定位结果来源 定位类型对照表: http://lbs.amap.com/api/android-location-sdk/guide/utilities/location-type/
          Double latitude = aMapLocation.getLatitude();//获取纬度
          Double longitude = aMapLocation.getLongitude();//获取经度
          JSONObject jo = new JSONObject();
          try {
            jo.put("locationType", locationType);
            jo.put("latitude", latitude);
            jo.put("longitude", longitude);
          } catch (JSONException e) {
            jo = null;
            e.printStackTrace();
          }
          Log.w("定位成功:", jo.toString());
          callbackContext.success(jo);
        } else {
          // 错误码对照表 http://lbs.amap.com/api/android-location-sdk/guide/utilities/errorcode/
          Log.e("定位失败错误码:", aMapLocation.getAdCode());
          Log.e("定位失败信息:", aMapLocation.getErrorInfo());
          callbackContext.error(aMapLocation.getErrorCode());
        }
      }
    }
  };

  @Override
  public void initialize(CordovaInterface cordova, CordovaWebView webView) {
    super.initialize(cordova, webView);
    Context context = this.cordova.getActivity().getApplicationContext();
    mLocationClient = new AMapLocationClient(context);
    mLocationClient.setLocationListener(mLocationListener);
    AMapLocationClientOption mLocationOption = new AMapLocationClientOption();
    mLocationOption.setLocationPurpose(AMapLocationClientOption.AMapLocationPurpose.SignIn);// 使用签到定位场景
    mLocationClient.setLocationOption(mLocationOption); // 设置定位参数
  }

  @Override
  public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    this.callbackContext = callbackContext;
    if (action.equals("coolMethod")) {
      // 设置场景模式后最好调用一次stop，再调用start以保证场景模式生效
      mLocationClient.stopLocation();
      mLocationClient.startLocation(); // 启动定位
      PluginResult r = new PluginResult(PluginResult.Status.NO_RESULT);
      r.setKeepCallback(true);
      callbackContext.sendPluginResult(r);
      return true;
    }
    return false;
  }
}

调试

• 刷新项目,给成功失败回调函数均打上断点.点击debug调试按钮
  

  

• 点击app页面上的按钮,在Studio控制台看到定位日志.
  

  

• 这里有定位错误码对照表,常见错误有:

定位key配置错误或key在AndroidManifest.xml文件位置不正确

app没有定位权限,日志如下,错误码为12.设置sdk版本为22或者手动在系统设置中打开app定位权限

• 在chrome下调试,可以看到成功获取到坐标信息

  
  
  

• 此时我们的定位功能开发完成

插件集成

• 拷贝定位jar到插件目录下.复制Studio的NativeLocation.java内容到webstorm插件NativeLocation.java文件中
  

  

• 修改插件的plugin.xml
  

  

  nativeLocation
  
    
  
  
    
      
        
        
      
    

    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    

    
      
       这里填你的key,哈哈
      
      
    
    
    
  

• 修改config.xml指定sdk版本.

• 插件修改完毕,备份一下android项目.用cordova命令打包运行

 cordova platform rm android
 cordova platform add android
 cordova run android

• 在chrome调试看是否能输出坐标信息.如果不能输出,请在Studio控制台看日志

插件优化

• 优化1.修改coolMethod函数名为getLocation

exports.getLocation = function (success, error) {
  exec(success, error, 'nativeLocation', 'getLocation');
};

  click(){
    // getLocation只有两个参数了
    cordova.plugins.nativeLocation.getLocation(res => {
      console.log(res);
    }, err => {
      console.log(err);
    })
  }

• 优化2.把高德定位的key作为参数.如下图添加
  

  

• 拷贝插件到某目录下,如我放在D盘根目录
  

  

• 项目中删除插件并重新安装插件,重新安装需要带参数API_KEY

cordova plugin rm com.kit.cordova.nativeLocation
cordova plugin add D:\com.kit.cordova.nativeLocation --variable API_KEY=e36b642d723fd530a960eb1c5cf38953

• 打包运行并调试,效果如下gif,能够获取到位置,插件全部开发完成

 cordova platform rm android
 cordova platform add android
 cordova run android

• 本插件已上传至github