• 首页
  • 攻略

    • appguideplugin是什么

    2023-03-21 19:12 23次浏览 攻略

    在上一个教程中写了Lanta教程：10分钟H5混合应用程序(Android IOS双平台)。介绍了从零开始开发混合型app的方法。很多学生收集并转发过。

    今天我们将对上次的教程进行一次拓展，着重介绍下cordova的各种实用的插件，让您的混合架构app拥有匹敌原生app的能力。

    转载请注明出处：兰塔观察（现已同步开通头条号，百家号，大鱼号，企鹅号，公众号）

    • codova插件简介

    在构建之前先解析下插件的结构。Cordova有大量的关于如何构建插件的文档。"plugin Development Guide"说明了如何为插件创建js接口，还有为每个移动平台创建native插件组件各自的指南。

    Cordova插件是一组扩展或提升Cordova应用功能的文件。开发者向项目中添加插件，通过提供的js接口和插件交互。插件中包括一个叫的配置文件，一个或多个js文件，加上一些native代码文件(可选)，库文件，和相关的内容(HTML, CSS和其他内容文件)。

    文件描述了插件并且告诉CLI复制哪些部分的文件，这些文件在每个平台上都不一样。中还有配置，由CLI用来设置平台方面的con配置。文件中有许多可用选项。

    一个插件中至少有一个js源文件，用来定义插件公开的方法、对象和属性。可以把所有的都封装到一个文件或多个。也可以把其他js类库打包(如jQuery)。

    除了上述两种文件，剩下的文件主要用来定义插件。一般来说，插件要有每个支持平台的一个或多个native源码文件。它们上面还包括其他native文件(源码或预编译的)或内容(图像文件，样式表，HTML文件)。

    构建插件的一个好参考是有大量的可用的示例。项目中下载的插件是zip包，可以解压并分析如何构建。一个方法是修改现有插件来满足需求。

    1.拍照类：

    首先需要安装三个插件：

    cordova plugin add cordova-plugin-camera

    cordova plugin add cordova-plugin-file

    cordova plugin add cordova-plugin-file-transfer

    下面一个参考实例：

    camera.html

    <!DOCTYPE html>

    <html>

    <head>

    <title>Capture Photo</title>

    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"/>

    <script type="text/javascript" charset="utf-8" src="j;></script>

    <script type="text/javascript" charset="utf-8">

    var pictureSource; // 文件资源

    var destinationType; // 设置返回值

    // 等待连接设备

    //

    document.addEventListener("deviceready",onDeviceReady,false);

    // cordova准备启动时

    //

    function onDeviceReady() {

    pictureSource=naviga;

    destinationType=naviga;

    }

    // 当照片被成功调用时

    //

    function onPhotoDataSuccess(imageData) {

    // 图片处理

    //

    var smallImage = document.getElementById('smallImage');

    // 图片元素

    //

    = 'block';

    // 显示图片

    // 图片内联CSS

    //

    = "data:image/jpeg;base64," + imageData;

    }

    // 图片成功检索

    //

    function onPhotoFileSuccess(imageData) {

    // 图片处理

    con(imageData));

    // 图片处理

    //

    var smallImage = document.getElementById('smallImage');

    // 图片元素

    //

    = 'block';

    // 显示图片

    // 图片内联CSS

    //

    = imageData;

    }

    // Called when a photo is successfully retrieved

    //

    function onPhotoURISuccess(imageURI) {

    // Uncomment to view the image file URI

    // con(imageURI);

    // Get image handle

    //

    var largeImage = document.getElementById('largeImage');

    // Unhide image elements

    //

    largeImage. = 'block';

    // Show the captured photo

    // The inline CSS rules are used to resize the image

    //

    largeImage.src = imageURI;

    }

    // A button will call this function

    //

    function capturePhotoWithData() {

    // Take picture using device camera and retrieve image as base64-encoded string

    naviga(onPhotoDataSuccess, onFail, { quality: 50 });

    }

    function capturePhotoWithFile() {

    naviga(onPhotoFileSuccess, onFail, { quality: 50, destinationType: Camera.De });

    }

    // A button will call this function

    //

    function getPhoto(source) {

    // Retrieve image file location from specified source

    naviga(onPhotoURISuccess, onFail, { quality: 50,

    destinationType: de,

    sourceType: source });

    }

    // Called if something bad happens.

    //

    function onFail(message) {

    alert('Failed because: ' + message);

    }

    </script>

    </head>

    <body>

    <button onclick="capturePhotoWithData();">Capture Photo With Image Data</button> <br>

    <button onclick="capturePhotoWithFile();">Capture Photo With Image File URI</button> <br>

    <button onclick="getPhoto);">From Photo Library</button><br>

    <button onclick="getPhoto);">From Photo Album</button><br>

    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />

    <img style="display:none;" id="largeImage" src="" />

    </body>

    </html>

    2.闪屏插件：

    cordova plugin add cordova-plugin-splashscreen

    此插件用于在应用程序启动时显示启动屏幕。

    配置闪屏配置：

    添加启动屏幕不同于添加其他Cordova插件。我们需要打开 con 并在 widget 元素中添加以下代码片段。

    第一个代码段是 SplashScreen 。它具有 value 属性，它是 platform / android / res / drawable – 文件夹中的图像的名称。Cordova提供我们在此示例中使用的默认 图片，但您可能需要添加自己的图片。重要的是为纵向和横向视图添加图像，并覆盖不同的屏幕尺寸。

    <preference name = "SplashScreen" value = "screen" />

    第二个片段，我们需要添加 SplashScreenDelay 。我们正在将值设置为 3000 ，以在三秒后隐藏闪屏。

    <preference name = "SplashScreenDelay" value = "3000" />

    最后一个首选项是可选的。如果值设置为 true，则图像将不会伸展到适合屏幕。如果设置为 false ，它将被拉伸。

    <preference name = "SplashMaintainAspectRatio" value = "true" />

    现在，当我们运行应用程序，我们将看到闪屏。

    3.文件传输

    cordova plugin add cordova-plugin-file-transfer

    安卓con配置

    (after adding just the file plugin)

    (in app/res/xml/con)

    <feature name="File">

    <param name="android-package" value="org.a; />

    </feature>

    (in a)

    <uses-permission android:name="android.; />

    (after adding just the file-transfer plugin)

    (in app/res/xml/con)

    <feature name="FileTransfer">

    <param name="android-package" value="org.a; />

    </feature>

    (in a)

    <uses-permission android:name="android.; />

    ios的config配置：

    <feature name="File">

    <param name="ios-package" value="CDVFile" />

    </feature>

    <feature name="FileTransfer">

    <param name="ios-package" value="CDVFileTransfer" />

    </feature>

    4.其他示例将在以后的篇幅中展开

    今天的教程就到这里，感谢您的耐心观看，有疑问可以在评论区提出，小编会第一时间解答。

    请关注兰塔观察的后续文章。

    1.文章《appguideplugin是什么》援引自互联网，为网友投稿收集整理，仅供学习和研究使用，内容仅代表作者本人观点，与本网站无关，侵删请点击页脚联系方式。

    2.文章《appguideplugin是什么》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

    相关推荐

    ↑