调用cordova插件_cordova 插件调用原理 - CSDN
  • Cordova(PhoneGap)采用的是HTML5+JavaScript混合模式来开发移动手机APP,因此当页面需要获取手机内部某些信息时(例如:联系人信息,坐标定位,短信等),程序就需要调用手机内部的API跟页面进行信息交换。Cordova...

    引言

    Cordova(PhoneGap)采用的是HTML5+JavaScript混合模式来开发移动手机APP,因此当页面需要获取手机内部某些信息时(例如:联系人信息,坐标定位,短信等),程序就需要调用手机内部的API跟页面进行信息交换。Cordova 特别为此定制了完善的解决方案,以方便用户进行程序编辑。在这一章里将为大家逐一介绍Cordova与Actitity通讯的实现原理。

     

    目录

    一、CordovaPlugin类简介

    二、页面通过 cordova.exec 函数调用 CordovaPlugin 插件

    三、CordovaInterface接口说明

    四、页面通过CordovaPlugin插件调用Activity开发实例

     

     

     

    一、CordovaPlugin类简介

    CordovaPlugin是Cordova插件的父类,用户自定义的插件必须继承父类,它的主要常用属性如下

    属性 详细说明
    CordovaWebView 视图管理器,当中包括PluginManager、CordovaWebViewEngine、ICordovaCookieManager等多个对象,用于管理界面渲染,视图加载过程中的生命周期 
    CordovaInterface 定义startActivityForResult、setActivityResultCallback等主要方法,获取调用上下文中的Activity对象
    CordovaPreferences 用于管理bundle中的属性值

    表格1.1

    CordovaPlugin的常用方法如下

    方法 详细说明
    void privateInitialize(String serviceName, CordovaInterface cordova, CordovaWebView webView, CordovaPreferences preferences) 插件初始化时执行,用于定义service名称,cordovaInterface接口,CodovaWebView视图,CordovaPreferences 属性等值
    boolean execute(String action, String rawArgs, CallbackContext callbackContext) 在开发插件时,用户的自定义方法,当页面调用插件时系统首先将会运行此方法 
    boolean execute(String action, JSONArray args, CallbackContext callbackContext) 同上
    boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) 同上
    void onActivityResult(int requestCode, int resultCode, Intent intent) 在开发插件时,用户的自定义方法,插件调用startActivityForResult后的回调函数。
    String getServiceName() 获取在config文件中该服务的名称
    Boolean shouldAllowRequest(String url)  判断是否允许此请求
    Boolean shouldAllowNavigation(String url)  判断是否允许此导航
    Boolean shouldOpenExternalUrl(String url)  判断是否打开外部链接
    boolean onReceivedHttpAuthRequest(CordovaWebView view, ICordovaHttpAuthHandler handler, String host, String realm)
    boolean onReceivedClientCertRequest(CordovaWebView view, ICordovaClientCertRequest request)

    表格1.2

    CordovaPlugin的详细解析可参考官网

    http://cordova.apache.org/docs/en/3.4.0/guide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide

     

    二、页面调用 CordovaPlugin 插件实例

    大概了解 CordovaPlugin 类的使用方法后,下面为大家介绍一下页面调用插件的例子。首先打开文件res/xml/config.xml为插件进行配置。

    <preference/>可用于运行环境中的常用参数,例如:全屏设置,滚动条设置,背景色设置等等
    <preference name="Fullscreen" value="true" />
    <preference name="DisallowOverscroll" value="true"/>
    <preference name="BackgroundColor" value="0xff0000ff"/>

    <feature></feature>节点用于设置插件描述,feature的name属性是设置插件的唯一标示,在页面调用插件时将通过name找到此插件
    在开发插件时,先为此插件添加一个<feature>节点,在<param>中绑定插件的后台执行文件ShowMessagePlugin.java
    <param name="android-package" value="org.apache.cordova.showmessage.ShowMessagePlugin" />

    复制代码
     1 <?xml version='1.0' encoding='utf-8'?>
     2 <widget id="com.sun.androidapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     3     <!--设置运行环境中的参数值  -->
     4     <preference name="loglevel" value="DEBUG" />
     5     <!-- 插件描述 -->
     6     <feature name="Whitelist">
     7         <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
     8         <param name="onload" value="true" />
     9     </feature>
    10     <feature name="ShowMessage">
    11         <param name="android-package" value="org.apache.cordova.showmessage.ShowMessagePlugin" />
    12     </feature>
    13     <allow-intent href="market:*" />
    14     <!-- 该APP名称 -->
    15     <name>AndroidTest</name>
    16     <!-- APP描述 -->
    17     <description>
    18         A sample Apache Cordova application that responds to the deviceready event.
    19     </description>
    20     <!-- 作者信息描述 -->
    21     <author email="dev@cordova.apache.org" href="http://cordova.io">
    22         Apache Cordova Team
    23     </author>
    24     <!-- 默认启动页面 -->
    25     <content src="index.html" />
    26     <!-- 指定app可进行通信的域名,*为所有 -->
    27     <access origin="*" />
    28     <!-- App默认只请允许通过手机端直接打开,若想通过网站,SMS等方式调用APP,则需要设置allow-intent配置 -->
    29     <allow-intent href="http://*/*" />
    30     <allow-intent href="https://*/*" />
    31     <allow-intent href="tel:*" />
    32     <allow-intent href="sms:*" />
    33     <allow-intent href="mailto:*" />
    34     <allow-intent href="geo:*" />
    35 </widget>
    复制代码

    建立org.apache.cordova.showmessage.ShowMessagePlugin类,且继承CordovaPlugin基类,并实现
    bool execute(action,args,callbackcontext) 方法。当页面调用此插件时,默认执行此方法。
    action 是唯一标识符,系统可根据不同的action进行不同的操作。
    args是页面传入的参数,支持String, JsonArray,CordovaArgs 等三种不同的类型。
    callbackcontext是系统的上下文,当完成操作后调用callbackcontext.success(支持多类型参数)方法,表示插件操作已完成,并把参数返还到页面。最终返回true代表插件执行成功,false代表执行失败

    复制代码
     1 package org.apache.cordova.showmessage;
     2 
     3 public class ShowMessagePlugin extends CordovaPlugin {
     4     @Override
     5     public boolean execute(String action,JSONArray args,CallbackContext context) 
     6             throws JSONException{      
     7         if(action.equals("mydream")){
     8             String msg=args.getString(0)+"'s dream is to become a "+args.getString(1);
     9             context.success(msg);
    10             return true;
    11         }
    12         return false;
    13     }
    14 }
    复制代码

    在 cordova.js 包中,最常用的是 cordova.exec(success,failed,service,action,args)函数,页面正是通过此函数调用插件。
    success 用于绑定插件执行成功后回调的回调函数
    failed用于绑定执行失败的回调函数
    service与config.xml配置文件中feature字节的name属性相对应
    action与ShowMessagePlugin对象boolean excute方法中action参数对应,用于分辨插件执行的方法类型,插件可根据action类型的不同作出分类处理。
    args为输入参数

    复制代码
     1        Name: <input type="text" id="txt1"/>&nbsp;&nbsp;&nbsp;&nbsp;
     2        Dream:<input type="text" id="txt2"/>&nbsp;&nbsp;&nbsp;&nbsp;
     3        <input type="button" οnclick="btnclick()" name="btn" value="Click"/> <br/>
     4        <label id="label"></label> 
     5             
     6        <script type="text/javascript">
     7 
     8             function btnclick(){
     9                  var name=$("#txt1").val();
    10                  var dream=$("#txt2").val();
    11                  //通过 cordova.exec (success,failed,serviceName,action,args)函数调用插件
    12                  cordova.exec(success,failed,"ShowMessage","mydream",[name,dream])
    13             }
    14             
    15             //成功调用插件,获取返回值后的页面处理函数        
    16             function success(result){
    17                  if(result!=null)
    18                      $("#label").html(result);
    19                  else
    20                      alert("no message");
    21             }
    22             
    23             //调用失败后的处理函数
    24             function failed(msg){
    25                  ......
    26             }
    27        </script>
    复制代码

     测试结果

     

    三、CordovaInterface接口说明

    CordovaInterface 接口默认是由 CordovaInterfaceImpl 类实现的,当中包括了一个Activity对象。当打开APP时 Cordova 会默认启动此 Activity 以承载 Cordova 核心引擎对程序进行管理。ExecutorService 则负责对象对线程池进行管理,PluginManager则负责对插件进行管理,CordovaPlugin则是Cordova插件的父类,所有插件都必须继承CordovaPlugin。

    属性 详细说明
    Activity 打开APP时 Cordova 会默认启动此 Activity 以承载 Cordova 核心引擎对程序进行管理
    ExecutorService 对线程池进行管理
    PluginManager 插件管理器,用于管理插件的生成,运行,结束等生命周期
    CordovaPlugin 通过startActivityForResult方法绑定CordovaPlugin插件 
    ActivityResultHolder 内部类,封装了requestCode, resultCode, intent等对象

    表格2.1

    CordovaInterfaceImpl定义了三个最常用方法

    方法 详细说明
    void startActivityForResult(CordovaPlugin command, Intent intent, int requestCode) 绑定CordovaPlugin参数,并调用Activity对象的startActivityForResult(intent, requestCode)方法,根据 intent 绑定值跳转到对应的activity
    void setActivityResultCallback(CordovaPlugin plugin) 激发CordovaPlugin对象的onActivityResult事件 
    boolean onActivityResult(int requestCode, int resultCode, Intent intent) 封装Acticity对象的onActivityResult回调函数, 激发CordovaPlugin对象的onActivityResult事件

    表格2.2

    四、页面通过CordovaPlugin插件调用Activity开发实例

    类似于第一节实例,在页面通过cordova.exec(success,failed,service,action,args)方法调用插件,返回时调用success函数进行处理显示结果

    复制代码
     1        出游省份: 
     2        <select id="select1">
     3           <option value='1' selected='selected'>黑龙江</option>
     4           <option value='2'>吉林</option>
     5           <option value='3'>辽宁</option>
     6        </select>
     7        <input type="button" onclick="btnclick()" name="btn" value="查找"/> <br/>
     8        路线景点:
     9        <label id="label"></label><br/>  
    10 
    11        <script type="text/javascript">
    12 
    13             function btnclick(){
    14                  var province=$("#select1").val();
    15                  //通过 cordova.exec (success,failed,serviceName,actionName,args)函数调用插件
    16                  cordova.exec(success,null,"ShowMessage","showMessage",[province]);
    17             }
    18             
    19             //成功调用插件,获取返回值后的页面处理函数        
    20             function success(result){
    21                  if(result!=null)
    22                      $("#label").html(result);
    23                  else
    24                      alert("no message");
    25             }
    26        </script>
    复制代码

     

    插件通过判断action参数判断进行不同的处理,然后通过Intent对象绑定将要启动的Activity,最后通过CordovaInterface中的startActivityForResult(cordovaPlugin,intent,int)方法启动该Activity。当 Activity 结束后,系统将调用回调函数 onActivityResult(int requestCode, int resultCode, Intent intent)

    在此说明一下Intent类的用途,此类主要用于绑定当前的活动与子活动之间关系,当中包含6种构造函数。

    1、Intent() 空构造函数

    2、Intent(Intent o) 拷贝构造函数

    3、Intent(String action) 指定action类型的构造函数

    4、Intent(String action, Uri uri) 指定Action类型和Uri的构造函数,URI主要是结合程序之间的数据共享ContentProvider

    5、Intent(Context packageContext, Class<?> cls) 传入组件的构造函数,也就是此例子中使用到的

    6、Intent(String action, Uri uri, Context packageContext, Class<?> cls) 前两种结合体

    Intent 类中封装了一个Bundle 对象 mExtras,可用于主活动与子活动之间传值,系统可通过 putExtra 方法把参数传入mExtras, 也可通过 getShortExtra、getIntExtra、getBooleanExtra、getByteExtra 等多个方法从mExtras 获取参数值。

    复制代码
     1 public class ShowMessagePlugin extends CordovaPlugin {
     2     private CallbackContext context;
     3     
     4     @Override
     5     public boolean execute(String action,JSONArray args,CallbackContext context)
     6              throws JSONException{
     7         this.context=context;
     8         //根据action判断调用方法
     9         if(action.equals("showMessage")){
    10             //通过Intent绑定将要调用的Activity
    11             Intent intent=new Intent(this.cordova.getActivity(),SpotActivity.class);
    12             //加入将要传输到activity中的参数
    13             intent.putExtra("province", args.getString(0));
    14             //启动activity
    15             this.cordova.startActivityForResult(this, intent, 0);
    16         }
    17         return true;
    18     }
    19     
    20     @Override
    21     public void onActivityResult(int requestCode, int resultCode, Intent intent) {
    22         // 根据resultCode判断处理结果
    23         if(resultCode==Activity.RESULT_OK){
    24             String spot=intent.getStringExtra("spot");
    25             context.success(spot);
    26         }
    27     }
    28 }
    复制代码

    Activity 被触发后先通过 setContentView 方法绑定视图,再从intent 对象中获取输入参数进行处理。
    完成操作后,通过 Activity 类 setResult(int resultCode, Intent data) 方法绑定返回值,其中resultCode可被 cordovaPlugin 插件用作判断返回值的处理结果。
    最后调用 Activity 对象的 finish 方法关闭 SpotActivity,把返回值回传到 CordovaPlugin。

    复制代码
     1 public class SpotActivity extends Activity{
     2     private CheckBox chk1,chk2,chk3;
     3     
     4     @Override
     5     public void onCreate(Bundle savedInstanceState){
     6         super.onCreate(savedInstanceState);
     7         //绑定视图
     8         setContentView(R.layout.goods_list);
     9         //从intent中获取输入参数
    10         Integer province=Integer.parseInt(this.getIntent().getStringExtra("province"));
    11         setSpots(province);
    12     }
    13     
    14     private void setSpots(Integer n){
    15         this.chk1=(CheckBox)this.findViewById(R.id.checkBox1);
    16         this.chk2=(CheckBox)this.findViewById(R.id.checkBox2);
    17         this.chk3=(CheckBox)this.findViewById(R.id.checkBox3);
    18         switch(n){
    19             case 1:
    20                 chk1.setText("漠河");
    21                 chk2.setText("北极村");
    22                 chk3.setText("九曲十八湾");
    23                 break;
    24             case 2:
    25                 chk1.setText("长白山");
    26                 chk2.setText("雾凇岛");
    27                 chk3.setText("朝鲜自治州");
    28                 break;
    29             case 3:
    30                 chk1.setText("鸭绿江");
    31                 chk2.setText("笔架山");
    32                 chk3.setText("凤凰山");
    33                 break;
    34             default:
    35                 break;
    36         }
    37     }
    38     
    39     public void btn_onClick(View view){
    40         String spot="";
    41         if(chk1.isChecked())
    42             spot+=chk1.getText();
    43         if(chk2.isChecked())
    44             spot+=" "+chk2.getText();
    45         if(chk3.isChecked())
    46             spot+=" "+chk3.getText();
    47         //通过setResult绑定返回值
    48         Intent intent=new Intent();
    49         intent.putExtra("spot",spot);
    50         setResult(RESULT_OK,intent);
    51         //关闭该activity,把返回值传回到cordovaPlugin插件
    52         this.finish();
    53     }
    54 }
    复制代码

    Activity 视图

    复制代码
     1 <?xml version="1.0" encoding="utf-8"?>
     2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     3     android:layout_width="match_parent"
     4     android:layout_height="match_parent"
     5     android:layout_alignParentBottom="true"
     6     android:orientation="vertical" >
     7     <TextView
     8         android:layout_width="wrap_content"
     9         android:layout_height="wrap_content"
    10         android:text="选择景点"
    11         android:layout_marginTop="80dp"/>
    12     <CheckBox
    13         android:id="@+id/checkBox1"
    14         android:layout_width="wrap_content"
    15         android:layout_height="wrap_content"/>
    16     <CheckBox
    17         android:id="@+id/checkBox2"
    18         android:layout_width="wrap_content"
    19         android:layout_height="wrap_content"/>
    20     <CheckBox
    21         android:id="@+id/checkBox3"
    22         android:layout_width="wrap_content"
    23         android:layout_height="wrap_content"/>
    24     <Button
    25         android:id="@+id/button1"
    26         style="?android:attr/buttonStyleSmall"
    27         android:layout_width="wrap_content"
    28         android:layout_height="40dp"
    29         android:text="确认"         
    30         android:layout_marginTop="20dp"
    31         android:onClick="btn_onClick"/>
    32 </LinearLayout>
    复制代码

    activity 关闭后,cordovaPlugin 插件将调用回调函数 onActivityResult(int requestCode, int resultCode, Intent intent),回调函数中可根据 resultCode 参数判断处理情况,根据不同的结果对intent 中的返回值 bundler 对象进行不同处理。 最后使用 callbackContext 对象中的 success(string) 方法把处理结果回传到页面;

    处理结果:

    本章小结
    Cordova(PhoneGap) 技术使用了CordovaPlugin 插件化(模块化)技术,使用不同插件对不同HTML5页面进行分别处理。与此同时,系统也可以利用插件调用系统已有的地图、通信录、浏览器等多个API,与 HTML5 页面进行信息交换,真正实现HTML5与Android、iOS系统的无缝对接。

    转自:http://www.cnblogs.com/leslies2/archive/2016/04/08/4836253.html
    展开全文
  • ionic5+如何调用cordova插件中的方法环境安装cordova插件ionic调用cordova插件中的方法总结 目前为止,网上搜到的有关ionic的帖子都是4以下的,但是我的ionic-cli是5.4.4的,所以目录结构与网上说的有所差异,所以在...

    目前为止,网上搜到的有关ionic的帖子都是4以下的,但是我的ionic-cli是5.4.4的,所以目录结构与网上说的有所差异,所以在用ionic开发的程序调用自定义cordova插件方法时,遇到了许多坑,特此说明一下,希望对更新到ionic5+的你有所帮助。废话不多说。
    在这里插入图片描述

    环境

    搭建环境以及版本信息在上一篇文章中就提到了,如果还没搭建环境的小伙伴可以先去看看上一篇 ionic+cordova环境搭建

    安装cordova插件

    这里首先确保你的环境已经搭建好了,ionic项目也创建出来了,并且能够正常运行。
    如何自定义一个本地cordova插件,网上有很多文档说明,这里我就不专门写了,假设你已经有一个本地的cordova插件了。
    cd进入你的ionic项目中,执行如下命令
    ionic cordova plugin add 本地插件绝对路径
    然后添加完插件后,可以用ionic cordova plugin list命令查看添加的所有插件。

    ionic调用cordova插件中的方法

    这里先了解一下ionic5创建出来的项目的目录结构吧,就是因为不了解结构,才绕了好多弯路,这里可以参考ionic5 目录解析 我觉得写得挺好的。
    主要修改内容是 src\app\tab1 文件夹下的tab1.page.htmltab.page.ts两个文件。
    在这里插入图片描述
    tab1.page.html是存放显示页面的代码,
    在这里插入图片描述
    这个里面的布局可以按照你的需求去修改,我把初始项目的list列表删掉了,添加了几个button按钮,并且给按钮添加了点击事件。这里click必须用小括号括起来才有效,双引号里面是方法名,对应的就是.ts里面的方法。

    tab.page.ts文件存放逻辑代码,
    在这里插入图片描述

     declare let cordova: any;
    

    意思是把所有plugins下的cordova插件都引进来。
    然后就用cordova插件中的plugin.xml里面的clobbers定义的变量直接引用插件方法就行,

    	<js-module src="www/uhf.js" name="UHF">
            <clobbers target="uhf" />
        </js-module>
    

    对于window变量引用,因为ts文件不识别window,所有需要加any类型声明,否则编译的时候会不通过。
    此时编译运行,然后就可以了。
    附一张结果图,点击之后会执行成功的回调,这时候就说明成功了,具体效果与插件方法有关。
    在这里插入图片描述
    在这里插入图片描述

    总结

    最后总结一下用到的命令,
    从创建项目开始,
    ionic start myApp tabs //创建项目
    cd myApp //进入项目
    ionic cordova platform add android //添加安卓平台
    ionic cordova build android //编译环境
    ionic cordova run android //真机调试,检验项目正常运行
    ionic cordova plugin add D:\MyCordova\CordovaNewUHF\UHFPlugin //添加本地插件
    修改页面及添加逻辑
    ionic cordova build android //再次编译(修改完文件之后)
    ionic cordova run android //真机调试

    主要是没有了解ionic项目ts文件中怎么调用cordova中的方法,不知道怎么关联,所以才走了好多弯路,之后还会更新ionic项目怎么调用在线插件,以及如何打包上传插件集成到ionic-native集成库中。希望多多支持,共同学习。

    展开全文
  • Cordova项目中,Android端访问远程网站调用Cordova插件正文补充 正文 最近的Cordova项目中,采用了将前端项目放到服务器,App直接跳转到链接的方式开发。这样的目的是为了能频繁的更新,而不用发布新的版本。但是...

    最近的Cordova项目中,采用了将前端项目放到服务器,App直接跳转到链接的方式开发。这样的目的是为了能频繁的更新,而不用发布新的版本。但是在开发中,前端项目调用本地的Cordova插件却出了问题,困扰了我好几天,不过最终还算是成功解决了,下面来分享一下正确姿势(如何在Cordova中打开远程链接,就不再多说,如需了解,可自行百度)。
    image.png

    首先呢,在前端项目的index.html中添加如下的js引用,来加载cordova.js:

    <script src="http://injection/www/cordova.js" type="text/javascript" charset="UTF-8"></script>
    

    然后编辑Android工程CordovaLib/src/org/apache/cordova/engine/目录下的SystemWebViewClient.java,添加如下代码:

    private static final String INJECTION_TOKEN = "http://injection/";
    

    找到shouldInterceptRequest方法,添加如下代码:

        @TargetApi(Build.VERSION_CODES.HONEYCOMB)
        @Override
        public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
    
            // --------------新增------------------
            if (url != null && url.contains(INJECTION_TOKEN)) {
                String assetPath = url.substring(url.indexOf(INJECTION_TOKEN) + INJECTION_TOKEN.length(), url.length());
    
                try {
                    return new WebResourceResponse(
                            "application/javascript",
                            "UTF-8",
                            view.getContext().getAssets().open(assetPath));
                } catch (IOException e) {
                    e.printStackTrace();
                    return new WebResourceResponse("text/plain", "UTF-8", null);
                }
    
            }
            // --------------end------------------
            try {
                // Check the against the whitelist and lock out access to the WebView directory
                // Changing this will cause problems for your application
                if (!parentEngine.pluginManager.shouldAllowRequest(url)) {
                    LOG.w(TAG, "URL blocked by whitelist: " + url);
                    // Results in a 404.
                    return new WebResourceResponse("text/plain", "UTF-8", null);
                }
                ...
            }
        }
    

    这几步的操作,是为了拦截webview的请求,实现加载本地的cordova.js。

    最后就是在前端js中去调用插件了,我们采用cordova.exec()的方式去调用插件,但是在调用之前,需在import语句后添加如下声明:

    declare let cordova: any;
    

    因为在TypeScript中直接调用cordova.exec()会报错。

    至此,便完成了Cordova项目访问远程网站调用Cordova插件,如有疑问可留言。

    image.png

    本文参考:(https://blog.csdn.net/ducp123/article/details/79768020#commentBox)


    补充

    经过测试发现,上面的方法会导致页面卡顿,所以采用了新的方式,如下。

    放弃在前端页面声明script标签的方式,改为Android端在页面加载中注入script标签的方式。在SystemWebViewClient中添加如下代码:

    public void onPageFinished(WebView view, String url) {
        ...
        ...
    
         //-------------新增------------
        // isCordovaInject标示是否注入script标签,避免重复注入
        if (!isCordovaInject && url.startsWith("这里为需要打开的链接地址,避免添加过早而不起作用")) {
            Log.e(TAG, "----------------inject cordova.js--------------");
            String jsWrapper = "(function(d) { var c = d.createElement('script'); c.src = %s; d.body.appendChild(c); })(document)";
            //在InAppBrowser WebView中注入一个对象(脚本或样式)。
            injectDeferredObject(view, INJECTION_TOKEN + "www/cordova.js", jsWrapper);
            isCordovaInject = true;
        }
        //-------------end------------
    
    }
    

    注入script标签的方法:

    private void injectDeferredObject(WebView webView, String source, String jsWrapper) {
            if (webView != null) {
                String scriptToInject;
                if (jsWrapper != null) {
                    org.json.JSONArray jsonEsc = new org.json.JSONArray();
                    jsonEsc.put(source);
                    String jsonRepr = jsonEsc.toString();
                    String jsonSourceString = jsonRepr.substring(1, jsonRepr.length() - 1);
                    scriptToInject = String.format(jsWrapper, jsonSourceString);
                } else {
                    scriptToInject = source;
                }
                final String finalScriptToInject = scriptToInject;
                this.parentEngine.cordova.getActivity().runOnUiThread(new Runnable() {
                    @SuppressLint("NewApi")
                    @Override
                    public void run() {
                        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
                            // This action will have the side-effect of blurring the currently focused element
                            webView.loadUrl("javascript:" + finalScriptToInject);
                        } else {
                            webView.evaluateJavascript(finalScriptToInject, null);
                        }
                    }
                });
            } else {
                LOG.d(TAG, "Can't inject code into the system browser");
            }
        }
    

    这下应该不会导致卡顿了!

    展开全文
  • cordova可以把html css js写的代码打包成app,还可以让js调用原生的api,Ionic...下面我们看看Vue cordova开发混合app之Vue调用Cordova插件 Vue 调用 cordova插件有两种方法: 如果想通过视频教程学习请访问:...

    cordova可以把html css js写的代码打包成app,还可以让js调用原生的api,Ionic就是基于cordova可以很好的开发混合app,cordova还可以和vue、react、angular完美结合来开发混合app。下面我们看看Vue cordova开发混合app之Vue调用Cordova插件

     

    Vue 调用 cordova插件有两种方法:

    如果想通过视频教程学习请访问:Vue+Cordova打造跨平台可安装的混合APP视频教程

    1、使用vue-cordova 插件  (不推荐使用)
                    
                https://github.com/kartsims/vue-cordova        

                1、vue项目安装npm install --save vue-cordova

                2、在main.js引入插件并use插件
                    import VueCordova from 'vue-cordova'
                    
                    Vue.use(VueCordova)
                

                3、调用插件  注意在对应的组件需要引入 var Vue = require('vue');

                    Vue.cordova.camera.getPicture((imageURI) => {
                          window.alert('Photo URI : ' + imageURI)
                    }, (message) => {
                          window.alert('FAILED : ' + message)
                    }, {
                          quality: 50,
                          destinationType: Vue.cordova.camera.DestinationType.FILE_URI
                    })

                4、注意需要在vue项目 index.html引入 cordova.js

                     <script src="cordova.js"></script>


    2、index.html 引入cordova.js  并定义全局变量让vue组件里面直接使用cordova插件。  (推荐的使用方法)
     
                1、在vue index.html引入cordova.js (注意顺序  cordova.js放在build.js上面)

                2、直接可以在组件里面使用cordova的api   (注意cordova里面要安装api的插件)

                        

     

     

    展开全文
  • ionic Android 端访问远程网站调用Cordova插件 最近公司要开发ionic的项目,第一次接触不怎么熟悉,公司准备把前端界面放在服务端APP直接访问连接的方式访问网络,这样可以做到频繁的更新而不用更新APP。在开发中,...
  • 最近用cordova+ionic搭建一个app,因为一些原因就把www目录放到服务器上,然后再在app加载服务器上的页面,因为需要调用cordova插件,试了很久,百度了很久,在国内很少这方面的资料,后来看到一个外国博客...
  • 可以通过 js 调用cordova 插件的方式来实现。本文通过一个简单的例子程序,来实现通过ionic 来调用 原生接口。该例子通过网页打开原生的的一个UIViewController。  一.cordova 插件生成  1. 安装plugman   npm ...
  • 最近项目采用cordova框架开发,所以就苦了前端同学,稍微改动都要Jenkins去打包,所以在想能不能直接访问前端同学本地链接,改完直接就能生效那种,下面开始。 1.修改config.xml文件 在config.xml文件中添加以下...
  • 继上篇博文拓展。 现在开发 环境: ionic 4 + cordova 9 + angular8 + ant design for angular; 正文 基于 angular 使用第三方库 的原理 https://angular.cn/guide/using-librar...
  • 我相信,应该会有一些cordova开发者想过实现下面这种app: 使用cordova制作一个外壳app,用于浏览服务端部署的网站,这样当服务器...因为网站是在远端服务器上,而cordova.js、cordova_plugins.js和上所有cordova插件
  • ... 我相信。应该会有一些cordova开发人员想过实现以下这种app: 使用cordova制作一个外壳app。用于浏览服务端部署的站点,这样当server上站点升级后,这个cordova app能够马上訪问最新版。而不是...
  • 贴出部分关键点:在远端网站的index.html上添加下面的js引用,来加载cordova插件:&lt;script src="file:///android_asset/www/cordova.js" type="text/javascript" ...
  • 我们先通过loadUrl(url)加载我们的本地h5项目,使用loadUrl这个方法一定是继承自CordovaActivity,cordovaActivity的onCreate...h5中如何调用引入的cordova插件呢,以相册选取为例,下面我们来看下: navigator.ca...
  • 演示一个例子,通过cordova插件,去调用摄像头。 一、插件的安装以及基本信息:  我们先在项目中安装调用摄像头的插件cordova-plugin-camera,cd到hello下,执行: cordova plugin add cordova-plugi...
  • cordova js 如何调用原生引用 cordova 安装插件 cordova 生成插件代码与引用文件是否一致。(xcode打包使用代码与web使用代码是否一致) ...程序中如何调用cordova 插件 web 浏览插件效果 app 浏览插件效果
  • vue项目使用webpack构建,打包到了cordova项目的www文件夹下,但是camera插件不能调用插件已经安装,config.xml中也添加了标签,标签value=“ ”,有大神帮帮忙吗?navigator.camera.是undefined
  • 我们知道,按照cordova打包的流程,里面会生成一个www文件夹,里面是h5代码,也是app的启动页,在里面直接引入cordova.js,是可以使用cordova的,但是如果app里面嵌套了一个h5的网页链接,如果想使用cordova,怎么办...
  • 调用方法 JS_NAMESPACE 需要注意是插件下的plugin <js-module src="www/device.js" name="device"> <clobbers target="device" /> </js-module> target 相同.不然会爆不识别的方法 带参数的...
  • ionic中 cordova插件使用

    2019-02-24 00:01:37
    Installation To add Ionic Native to your app, run following command to install the core package: ...$ ionic cordova plugin add cordova-plugin-tts $ npm install --save @ionic-native/text-to-speech ...
  • 困扰了半天时间,项目生成APP后可以在console中直接输入...看到jpush的调用方法是window.plugins.JPushPlugin,但是照葫芦画瓢window.plugins.JMessagePlugin行不通 折腾半天,应该使用 window.JMessagePlugin ...
1 2 3 4 5 ... 20
收藏数 4,512
精华内容 1,804
关键字:

调用cordova插件