自定义cordova插件

作者: love_program | 来源:发表于2018-08-01 18:38 被阅读37次

将android分享功能封装成cordova 插件

进入到已有的cordova项目如何生成cordova项目
安装 pluman npm install -g plugman
通过pluman创建一个插件 plugman create --name ShareToWechat --plugin_id shareToWechat --plugin_version 0.1

plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variableNAME=VALUE]
参数说明:
pluginName: 插件名字
pluginId插件的id
version插件的版本
directory 改目录将生成插件

生成的插件目录结构

image.png
遵循规范，我们接下来新建几个新的文件, 并且新建文件之后的目录结构如下，其中java文件目前为空文件

image.png
plugin.xml的解释

默认的配置

 <?xml version='1.0' encoding='utf-8'?>
 <plugin id="shareToWechat" version="0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0"xmlns:android="http://schemas.android.com/apk/res/android">
 <name>ShareToWechat</name>
 <js-module name="ShareToWechat" src="www/ShareToWechat.js">
   <clobbers target="cordova.plugins.ShareToWechat" />
 </js-module>
 </plugin>

ps: 参数解释
1. id:插件的id
2. version:插件的版本
3. name: 插件的名字
4. clobbers: 这是js中调用该插件的引用，是一个对象

ShareToWechat.js的解释

默认的配置

var exec = require('cordova/exec');

exports.coolMethod = function (arg0, success, error) {
 exec(success, error, 'ShareToWechat', 'coolMethod', [arg0]);
};

配置plugin.xml文件，添加platform节点

 <?xml version='1.0' encoding='utf-8'?>
<plugin id="shareToWechat" version="0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
  <name>ShareToWechat</name>
  <js-module name="ShareToWechat" src="www/ShareToWechat.js">
      <clobbers target="cordova.plugins.ShareToWechat" />
  </js-module>
  
  <platform name="android">
      //src 指定的插件的源码java文件
      //target-dir 会将该源码java文件拷贝到android工程下面的该目录下面
      <source-file src="src/android/ShareToWechat.java" target-dir="src/org/apache/cordova/shareToWechat" />

      <config-file target="res/xml/config.xml" parent="/*"> 
        //feature名称对应着ShareToWecha.js里面exec(success, error, 'ShareToWechat', 'coolMethod', [arg0]);的第三个参数，如果不一样插件是调用不起来的
          <feature name="ShareToWechat">  
            //value指的是java工程该插件对应的文件
              <param name="android-package" value="org.apache.cordova.shareToWechat.ShareToWechat"/>  
          </feature>  
      </config-file>  
  </platform>
</plugin>

ps:更多的plugin.xml配置请看该文章

配置ShareToWechat.js文件

cordova.define("shareToWechat.ShareToWechat", function(require, exports, module) {
var exec = require('cordova/exec');

exports.shareToWxSession = function (arg0, success, error) {
 exec(success, error, 'ShareToWechat', 'shareToWxSession', [arg0]);
};

exports.shareToWxTimeline = function (arg0, success, error) {
 exec(success, error, 'ShareToWechat', 'shareToWxTimeLine', [arg0]);
};

});

ps: 到处去的函数就是我们将要前端js文件中调用的函数

10 添加ShareToWechat.java文件内容,我们将之前实现的功能拿过来稍做修改

package org.apache.cordova.shareToWechat;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.util.Log;

import com.tencent.mm.opensdk.modelmsg.SendMessageToWX;
import com.tencent.mm.opensdk.modelmsg.WXMediaMessage;
import com.tencent.mm.opensdk.modelmsg.WXWebpageObject;
import com.tencent.mm.opensdk.openapi.IWXAPI;
import com.tencent.mm.opensdk.openapi.WXAPIFactory;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.LOG;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.io.ByteArrayOutputStream;
import java.net.URL;

public class ShareToWechat extends CordovaPlugin{
 private static final int THUMB_SIZE = 150;

 private static final String APP_ID = "wx17fa470c77da3077";

 private IWXAPI api;

 private String title;
 private String description;
 private String pageUrl;
 private String imageUrl;
 private String userAction;

//action 对应的是exec(success, error, 'ShareToWechat', 'shareToWechat', [arg0]);第四个参数
 @Override
 public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {

     JSONObject options = args.getJSONObject(0);

     title = options.getString("title");
     description = options.getString("description");
     pageUrl = options.getString("pageUrl");
     imageUrl = options.getString("imageUrl");
     userAction = action;


     Log.i("title", title);
     Log.i("action", action);

     api = WXAPIFactory.createWXAPI(cordova.getActivity(), APP_ID, true);
     api.registerApp(APP_ID);

     api = WXAPIFactory.createWXAPI(cordova.getActivity(), APP_ID, true);
     api.registerApp(APP_ID);

     new Thread(new Runnable() {
         @Override
         public void run() {
             try{
                 // String path = "http://www.wangluodaikuankouzi.com/app/packages/weixin_logo.jpg";

                 WXWebpageObject webpage = new WXWebpageObject();
                 webpage.webpageUrl = pageUrl;
                 WXMediaMessage msg = new WXMediaMessage(webpage);
                 msg.title = title;
                 msg.description = description;

                 //这种方式直接取得是本地的
//                Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.weixin_logo);
                 Bitmap bmp = BitmapFactory.decodeStream(new URL(imageUrl).openStream());

                 Bitmap thumbBmp = Bitmap.createScaledBitmap(bmp, THUMB_SIZE, THUMB_SIZE, true);
                 bmp.recycle();
                 msg.thumbData = bmpToByteArray(thumbBmp, true);

                 SendMessageToWX.Req req = new SendMessageToWX.Req();
                 req.transaction = String.valueOf(System.currentTimeMillis());
                 req.message = msg;

                 req.scene = userAction.equals("shareToWxSession") ? SendMessageToWX.Req.WXSceneSession: SendMessageToWX.Req.WXSceneTimeline;

                 api.sendReq(req);
             }catch (Exception e) {

                 e.printStackTrace();
             }
         }
     }).start();
     return false;
 }

 public static byte[] bmpToByteArray(final Bitmap bmp, final boolean needRecycle) {
     ByteArrayOutputStream output = new ByteArrayOutputStream();
     bmp.compress(Bitmap.CompressFormat.JPEG, 100, output);
     if (needRecycle) {
         bmp.recycle();
     }

     byte[] result = output.toByteArray();
     try {
         output.close();
     } catch (Exception e) {
         e.printStackTrace();
     }

     return result;

     }
 }

安装该插件
1. 插件所在的目录/Users/app_share1/share_weixin/ShareToWechat
2. 切换到cordova项目目录里面
3. 执行安装命令cordova plugin add /Users/app_share1/share_weixin/ShareToWechat
4. 此时插件已经安装上了，如果想卸载的话，执行cordova plugin remove plugin_id
安装完插件之后的项目

image.png
插件的使用

  document.querySelector('#btn').addEventListener('click', function(){
//  cordova.plugins.ShareToWechat.shareToWxSession({
//  title:"自定义标题",
//  description:"自定义描述内容",
//  pageUrl: 'http://www.baidu.com',
//   imageUrl:'http://www.wangluodaikuankouzi.com/app/packages/weixin_logo.jpg'
//   });

     cordova.plugins.ShareToWechat.shareToWxTimeline({

        title:"自定义标题",
        description:"自定义描述内容",
        pageUrl: 'http://www.baidu.com',
        imageUrl:'http://www.wangluodaikuankouzi.com/app/packages/weixin_logo.jpg'
     });

})

网友评论

本文标题：自定义cordova插件

本文链接：https://www.haomeiwen.com/subject/nvgrvftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

自定义cordova插件

将android分享功能封装成cordova 插件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读