Cordova自定义插件开发

日期:2015-11-5 19:36 | 标签: Cordova | 阅读:1412

这里以开发百度地图 Cordova 插件为例。
教程阅读: https://segmentfault.com/u/afternoonleaf/articles
插件发布请参考:publishing-plugins

为什么要开发

  1. Cordova官网基于浏览器进行定位(传言更快),由于被墙,定位不成功。
  2. 市面上已有插件[cordova-qdc-baidu-location],但是版本比较低。此外,功能大而全,我只需要定位就行了。
  3. 个人想顺便学一学Cordova插件开发。

插件简介

插件中包括一个叫 plugin.xml 的配置文件,一个或多个 js 文件,加上一些 native 代码文件(可选,IOS\Android等),库文件,和相关的内容( HTML, CSS 和其他内容文件)。

创建过程

  1. 新建文件夹,命名为location_plugin
  2. 新建 plugin.xml 文件

    <?xml version="1.0" encoding="utf-8"?>
    <!-- 定义命名空间,ID和插件版本。命名空间须为*http://apache.org/cordova/ns/plugins/1.0* -->
    <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" id="com.kobepeng.location" version="1.0.0">
     <!-- 插件名字 -->
     <name>locationPlugin</name>
     <!-- 作者 -->
     <author>kobepeng</author>
     <!-- 描述-->
     <description>.</description>
     <!-- 关键字-->
     <keywords>LocationPlugin</keywords>
     <!-- 许可-->
     <license>Apache 2.0 License</license>
     <!-- 插件支持的Cordova版本-->
     <engines>
         <engine name="cordova" version="5.0.0" />
     </engines>    
     <!-- 指js文件名-->
     <js-module src="location.js" name="baidu_location">
        <!-- clobbers说明module.exports自动添加到window对象,从而可全局访问-->
         <clobbers target="baidu_location" />
     </js-module>
      <!-- 平台说明文件 -->
     <platform name="android">
         <source-file src="src/LocationPlugin.java" target-dir="src/com/kobepeng/location" />
         <source-file src="libs/android/armeabi/liblocSDK6a.so" target-dir="libs/armeabi" />
         <source-file src="libs/android/armeabi/liblocSDK6a.so" target-dir="libs/armeabi-v7a" />
         <source-file src="libs/android/BaiduLBS_Android.jar" target-dir="libs" />
    
         <config-file target="res/xml/config.xml" parent="/*">
             <feature name="LocationPlugin">
                     <param name="android-package" value="com.kobepeng.location.LocationPlugin"/>
             </feature>
         </config-file>
    
         <config-file target="AndroidManifest.xml" parent="/manifest/application">
             <!-- 在application标签中声明service组件,每个app拥有自己单独的定位service  /-->
           <service android:name="com.baidu.location.f" android:enabled="true" android:process=":remote" />
         </config-file>
    
         <config-file target="AndroidManifest.xml" parent="/*">
            <!-- 这个权限用于进行网络定位-->
            <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
            <!-- 这个权限用于访问GPS定位-->
            <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
            <!-- 用于访问wifi网络信息,wifi信息会用于进行网络定位-->
            <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>
            <!-- 获取运营商信息,用于支持提供运营商信息相关的接口-->
            <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission>
            <!-- 这个权限用于获取wifi的获取权限,wifi信息会用来进行网络定位-->
            <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"></uses-permission>
            <!-- 用于读取手机当前的状态-->
            <uses-permission android:name="android.permission.READ_PHONE_STATE"></uses-permission>
            <!-- 写入扩展存储,向扩展卡写入数据,用于写入离线定位数据-->
            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
            <!-- 访问网络,网络定位需要上网-->
            <uses-permission android:name="android.permission.INTERNET" />
            <!-- SD卡读取权限,用户写入离线定位数据-->
            <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"></uses-permission>
         </config-file>
    
         <config-file target="AndroidManifest.xml" parent="/manifest/application">
            <!--SDK4.2及之后需要在Mainfest.xml设置Accesskey,且必须正确设置,在application标签中加入-->
            <meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="$API_KEY" />
         </config-file>
    
     </platform>
     <!-- 其他说明信息 -->
     <info>.</info>
    </plugin>
    
  3. 进入location_plugin文件夹,新建location.js文件
    var cordova = require('cordova/exec');
    var baidu_location = {
    getCurrentPosition: function(successFn, failureFn) {
       cordova(successFn, failureFn, 'LocationPlugin', 'getCurrentPosition', []);
    }
    };
    module.exports = baidu_location
    
  4. 编写插件Java代码 ,部分代码有省略,具体策略是继承CordovaPlugin,覆盖execute方法,业务可以自由定义。

    // String action:一个类里面可以提供多个功能,action就是指名了要调用哪个功能。 
    // CordovaArgs args:web以json的数据格式传递给Android native,CordovaArgs 是对JSONArray 的一个封装。 
    // CallbackContext callbackContext:这个是回调给web,有success和error两种回调方法。
    public class LocationPlugin extends CordovaPlugin {
      /*略*/
     /*  插件主入口 */
     @Override
     public boolean execute(String action, final JSONArray args, CallbackContext callbackContext) throws JSONException {
         boolean ret = false;
         if ("getCurrentPosition".equalsIgnoreCase(action)) {
             cbCtx = callbackContext;
             PluginResult pluginResult = new PluginResult(PluginResult.Status.NO_RESULT);
             pluginResult.setKeepCallback(true);
             cbCtx.sendPluginResult(pluginResult);
             if (mLocationClient == null) {
                 mLocationClient = new LocationClient(this.webView.getContext());
                 mLocationClient.registerLocationListener(myListener);
                 // 配置定位SDK参数
                 initLocation();
             }
             mLocationClient.start();
             ret = true;
         }
         return ret;
     }
    /*略*/
    }
    

    其它代码,直接参考:v6.2.2Android定位SDK

  5. 新建ionic项目测试 初始化一个项目

    ionic start myApp tabs
    cd myApp
    

    添加插件支持

    //若已添加,则先执行 ionic platform rm android
    ionic platform add android
    ionic plugin add path/to/com.kobepeng.location
    

    编写测试样例

    baidu_location.getCurrentPosition(function(data){
         alert('you did it!data:'+data);
     }, function(err){
         alert('you failed !');
    });
    

    按平台编译->运行

    ionic build android
    // 安装的插件需要硬件支持,必须在手机上才能正确运行
    ionic run android
    

参考

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式