【2023最新】超详细图文保姆级教程:App开发新手入门(5)

news2024/11/14 13:45:47

上文回顾,我们已经完成了一个应用的真机调试,本章我们来了解一下如何引入YonBuilder移动开发的(原生)移动插件, 并利用移动插件完成一个简单的视频播放器。

8. 「移动插件」的使用

8.1 什么是 「移动插件」?

用通俗的话来解释,YonBuilder移动开发内的「移动插件」,是指使用原生语言(android,Object-C)封装好的具备特定功能的SDK程序, 在YonBuilder移动开发引擎的支持下,可以让开发者在JavaScript的编程环境内直接调用使用。开发者无需关心移动插件的内部实现,只需简单的函数调用,即可完成各种复杂原生功能的开发。因为移动插件内部是使用原生语言开发的,所以在运行性能上同原生应用一致,不存在运行性能上的差异,YonBuilder移动开发的「移动插件」是打破混合应用性能瓶颈的绝佳利器。

当前YonBuilder移动开发官网已上线1400+的各种功能的「移动插件」供开发者使用,有兴趣的同学可以访问官方开发者中心 -> 资源市场 -> 移动插件,进行查看 (本方式无需登录)

快速传送门

在这里插入图片描述

可以登录横向的功能分类导航条 或 点击右侧的搜索按钮输入关键词的方式,去查找对应功能的移动插件

8.1.1 移动插件详情页的简单介绍

点击页面列表中的任意一个移动插件图标,即可进入移动插件详情介绍页,查看该插件的具体功能介绍。

在这里插入图片描述

8.1.2 搜索查找需要的功能移动插件,比如我们在搜索框输入”播放器“,就可以显示出和播放器相关的功能移动插件

在这里插入图片描述

8.2. 如何使用移动插件

上面介绍了未登录状态下,查看移动插件的方式,当真正想要使用移动插件时,还是需要在登录状态下进行。当前官方提供两种添加移动插件的方式,下面以集成一个 moviePlayer 为例(这个是官方封装的免费的视频播放器移动插件),详细讲述下如何使用YonBuilder移动开发的移动插件。

8.2.1 添加移动插件

8.2.1.1 方式一:资源市场添加方式

即在登录状态下,按上面 8.1 介绍的方式,访问资源市场 ,搜索栏输入关键词 moviePlayer,找到对应的插件,点击打开插件详情页,然后点击「立即使用」按钮,在弹出的弹窗上选择对应的租户和应用,即可完成插件的添加。

在这里插入图片描述

8.2.1.2 方式二:在应用管理页面内添加(常用推荐)

首先我们先进入云端的应用管理页。

页面访问路径:

  • 登录用友开发者中心网站:developer.yonyou.com - 点击左侧菜单栏中的「移动开发」(或 点击左上角「大风车」图标,选择 云平台-低代码开发平台-移动APP开发)

    在这里插入图片描述

  • 列表页选择对应的应用,点击即可进入应用的管理界面 - 切换导航到「移动插件」- 二级导航切换到「移动插件库」- 搜索栏输入关键词 moviePlayer - 找到对应的插件,点击 + 按钮,完成插件的添加

    在这里插入图片描述

    PS1: 如果想查看插件的功能介绍或者使用文档,可以点击对应的插件左侧的图片,即可弹出详情介绍弹窗;

    在这里插入图片描述

    PS2: 此处「移动插件库」页面的搜索栏,默认是支持全类别搜索的。

    在这里插入图片描述

8.2.2 查看已添加的移动插件

切换导航到「已添加插件」,可查看当前应用已添加的所有移动插件。

在这里插入图片描述

8.2.3 重新编译应用安装包(重要)

每当有新的移动插件添加到应用中时,为了使移动插件在代码中生效,我们需要重新进行一次移动打包编译(自定义Loader或者「移动打包」页的[ 正式版|测试版 ]。其内在原理是 所有的原生移动插件代码源码都存储在官网服务器上,当某个应用需要使用某个移动插件时,服务器需要通过「移动打包」的编译功能动态的将移动插件对应的代码注入到具体的应用中,这样新添加的移动插件才可以在这个应用中生效。

本次教程使用的是自定义Loader进行演示,我们切换导航到「Loader调试」

在这里插入图片描述

编译成功后,重新下载自定义loader,并安装到手机移动端(或者模拟器上)。

在这里插入图片描述

8.3 [实战示范]:引用移动插件并编写对应代码

打开YonStudio开发工具,按以下描述进行代码修改

8.3.1 修改html/main.html文件

先提供一下修改后的 mian.html 文件的完整代码(可以直接复制替换原有的 mian.html 内代码)

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/apiutil.css" />
    <style>
        label {
            margin: 10px;
            font-size: 24px;
            color: red;
        }
        ul {
            margin-bottom: 10px;
        }
        ul li {
            margin: 5px 10px;
            padding: 5px;
            color: #000;
            word-wrap: break-word;
        }
        .video-wrap {
            width: 100%;
            height: 300px;
        }
    </style>
</head>

<body>
    <div id="wrap" class="video-wrap"></div>
    <label>YonBuilder移动开发 视频播放器</label>
    <div id='sys-info'></div>
</body>
<script type="text/javascript" src="../script/apiutil.js"></script>
<script type="text/javascript">
    apiready = function() {        
        // 调用执行初始化播放器
        initMoviePlayer();
    };

    // 定义一个函数,用于初始化 moviePlayer 移动插件对象
    function initMoviePlayer () {
        // 初始化 moviePlayer 移动插件对象
        var moviePlayer = api.require('moviePlayer');
        // 获取上个页面传递的navH参数值
        var navH = api.pageParam.navH;
        // 获取id = wrap dom元素的宽高尺寸
        var videoRect = $api.offset($api.byId('wrap'));
        // 启动播放器
        moviePlayer.open({
            // 设置播放器的尺寸
            rect: { 
                x: videoRect.l,
                y: navH, // 设置播放器具体顶部的距离,用于避免覆盖顶部的NavBar
                w: videoRect.w,
                h: videoRect.h
            },
            // 设置播放器的外观样式
            styles: {
                head: {
                    height: 0
                },
                foot: {
                    bg: 'rgba(0,0,0,0.5)',
                    height: 44,
                    currentTimeLabel: {
                        textSize: 14,
                        textColor: "#FFF",
                        textWidth: 43,
                        marginLeft: 5
                    },
                    totalTimeLabel: {
                        textSize: 14,
                        textColor: "#FFF",
                        textWidth: 43,
                        marginRight: 5
                    }
                }
            },
            // 测试的视频资源地址
            path: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
            // 设置播放器初始化后,是否自动播放
            autoPlay: true
        }, function (ret, err) {
            // 这里的回调参数当播放器状态改变后,会触发相关回调,可以在这里写一些交互逻辑
        });
    };
</script>

</html>

下面对修改的部分,简单进行一下代码逻辑讲解:

    1. 修改 html 页面内的代码,在 body 标签内加入一个 dom 占位元素<div id="wrap" class="video-wrap"></div>,并修改 label 标签内的文字 <label>YonBuilder移动开发 视频播放器</label>
    <body>
        <div id="wrap" class="video-wrap"></div>
        <label>YonBuilder移动开发 视频播放器</label>
        <div id='sys-info'></div>
    </body>
    

    PS: moviePlayer 移动插件是使用原生语音开发的,并不在html的dom文档流内,所以需要创建一个dom元素去占位,避免 播放器的界面遮挡了原来的dom元素内容。

    1. style标签内添加 步骤3 新增的dom元素需要的样式代码
    <style>
        
        <!--省略原有代码-->
    
        .video-wrap {
            width: 100%;
            height: 300px;
        }
    </style>
    
    1. 在底部的script脚本标签内部,新增定义一个 initMoviePlayer 函数方法,用于初始化 moviePlayer 移动插件
    // 定义一个函数,用于初始化 moviePlayer 移动插件对象
    function initMoviePlayer () {
    	// 初始化 moviePlayer 移动插件对象
    	var moviePlayer = api.require('moviePlayer');
    	// 获取上个页面传递的navH参数值
    	var navH = api.pageParam.navH;
    	// 获取id = wrap dom元素的宽高尺寸
    	var videoRect = $api.offset($api.byId('wrap'));
       	// 启动播放器
    	moviePlayer.open({
    	    // 设置播放器的尺寸
    	    rect: { 
    	        x: videoRect.l,
    	        y: navH, // 设置播放器具体顶部的距离,用于避免覆盖顶部的NavBar
    	        w: videoRect.w,
    	        h: videoRect.h
    	    },
       		<!--其余代码略,具体参见上面的完整代码-->
       	});
    };
    

    PS1: 语句var navH = api.pageParam.navH;, 使用了一个 api.pageParam api方法,这个是官方提供的api对象的方法,具体作用是 获取上个页面传递过来的参数值。 更多的关于 api 对象方法的介绍,可见 API对象 官方文档

    PS2: 语句 var videoRect = $api.offset($api.byId('wrap'));, 目的是获取 步骤1 添加的 dom占位元素的宽高尺寸,因为 moviePlayer 初始化时,需要给 rect 参数设置播放器的宽高等位置尺寸,这里获取就是为了保持一致。

    PS3: 语句 var videoRect = $api.offset($api.byId('wrap')); 这部分的代码里使用了 两个 $api 对象方法,$api.byId方法是可以根据 id值去获取 页面内的 dom元素, 功能同 document.getElementById, $api.offset 方法是获取dom元素的形状尺寸, 这个 $api 对象是引入的 script/apiutil.js 脚本实现的, apiutil.js 是官方封装的一个前端工具框架,具体可见 YonBuilder移动开发前端框架 官方文档

    <script type="text/javascript" src="../script/apiutil.js"></script>
    
    1. 修改apiready方法,清空原内部的逻辑代码,并加入了调用 步骤1函数的语句。
    apiready = function() {        
        // 调用执行初始化播放器
        initMoviePlayer();
    };
    

    PS: apiready 方法是 YonBuilder移动开发中 每一个 html 文件的入口启动函数,官方提供的大量api方法(如 api.openWin 等)都需要等页面加载 api 对象后才可以使用,否则程序会报错。而 apiready 函数方法就是 html 页面加载完 api 对象后,会主动调用执行的函数方法。所以我们可以理解为 apiready 函数就是 html 页面的入口自执行启动函数。

8.3.2 修改index.html文件

在 index.html 页面内的 79 行,为 api.openFrame 增加以下 pageParam 参数, 具体代码如下

pageParam: {
    navH: headerH // 顶部NavBar的高度值
}

该修改是为了呼应 8.3.1 操作中 第 3 步 中PS3 描述的 获取 api.pageParam 参数值,将页面顶部 NavBar占据的高度值(包括 statusBar 占据的高度) 发给 main.html 页面,供 播放器 设置距离顶部的距离。

在这里插入图片描述

PS: 每次修改文件后,记得保存文件,这样修改才能生效。

8.3.3 同步代码

    1. 启动自定义AppLoader,并与 YonStudio工具进行连接(要保证 自定义AppLoader内的。(具体还不会的同学,可以查看上个大章节(4)的相关介绍 )
    1. 鼠标右键点击 widget 文件夹,并选择 WIFI同步(全量) (或者可以直接使用对应的快捷键)

    在这里插入图片描述

同步后,即可在AppLoader端查看到运行效果,如下图( 是不是很方便 -

在这里插入图片描述

8.4 后话

上面仅仅是简单的示范了一下使用移动插件的方法,为了方便新手理解,并没有深入的扩展。比如上面使用的moviePlayer移动插件就有很多的方法,有兴趣的同学可以查看移动插件对应的开发文档,自行修改查看运行效果。

moviePlayer的开发说明文档地址

另外,官方也提供了「自定义插件」的扩展原生插件机制,支持开发者去根据需要自行封装「移动插件」。

友情提示:「自定义移动插件」这块属于扩展功能,不会也完全不影响正常的应用开发,建议掌握了android开发或iOS开发能力的同学查看,其他人可忽略

更多关于「自定义移动插件」的介绍说明,可查看以下链接

  • 移动原生插件开发设计规范
  • 移动原生插件开发指南-iOS
  • 移动原生插件开发指南-AndroidEclipse
  • 移动原生插件开发指南-AndroidStudio

(未完待续…)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/432149.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

TensorFlow Lite,ML Kit 和 Flutter 移动深度学习:1~5

原文&#xff1a;Mobile Deep Learning with TensorFlow Lite, ML Kit and Flutter 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【ApacheCN 深度学习 译文集】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 不要担心自己的…

【高危】Apache Spark 权限提升漏洞(CVE-2023-22946)

漏洞描述 Apache Spark 是一款支持非循环数据流和内存计算的大规模数据处理引擎。 使用 spark-submit 脚本在集群中启动任务可以通过指定proxy-user参数限制运行用户。在 Apache Spark 受影响版本中&#xff0c;攻击者通过指定自定义的classpath&#xff0c;则可以覆盖该配置…

2023最新面试题-Java-3

IO流 1. java 中 IO 流分为几种? 按照流的流向分&#xff0c;可以分为输入流和输出流&#xff1b;按照操作单元划分&#xff0c;可以划分为字节流和字符流&#xff1b;按照流 的角色划分为节点流和处理流。 Java Io 流共涉及 40 多个类&#xff0c;这些类看上去很杂乱&…

ChatGPT 70+款可以免费使用的AI工具,建议收藏

ChatGPT风靡全球&#xff0c;人人可用&#xff01; 小红书上有关ChatGPT的笔记已有10w篇&#xff0c;相关话题浏览量也达到了1.12亿次。其中讨论最为热烈的&#xff0c;要数“ChatGPT使用教程”。&#xff08;当然&#xff0c;类似的话题还包括&#xff0c;教你如何使用Midjour…

Navicat图表查看器 Crack

Navicat图表查看器 Crack Navicat图表查看器是一个查看图表工作区文件的简单工具。您可以浏览Navicat的图表工具和Navicat图表创建者创建的区域。 Navicat图表查看器&#xff0c;将图表中的数据显示为强大的可视化效果&#xff0c;允许您使用图形和图表查看数据。 将您的信息转…

Internet Download Manager(IDM)v6.41.11 免激活不弹窗版

Internet Download Manager&#xff08;IDM&#xff09;v6.41.11 免激活不弹窗版可提升你的下载速度多达5倍&#xff0c;安排下载时程&#xff0c;或续传一半的软件。Internet Download Manager的续传功能可以恢复因为断线、网络问题、计算机宕机甚至无预警的停电导致下传到一半…

大数据开发必备面试题Flume篇合集

大数据开发必备面试题Flume篇合集 1 、详细介绍Flume有哪些组件&#xff1f;2、你是如何实现Flume数据传输的监控的&#xff1f;3、Flume参数怎么调优&#xff1f;4、简述下Flume的事务机制。5、 Flume采集数据会丢失吗?6、简述下Flume使用场景。7、简述下 Flume丢包问题。8、…

【C语言】文件操作

目录 1.为什么使用文件 2.什么是文件 2.1 程序文件 2.2 数据文件 2.3文件名 3.文件的打开和关闭 3.1文件指针 3.2文件的打开和关闭 4.程序的顺序读写 4.2对比一组函数 5.文件的随机读写 5.1 fseek 5.2 ftell 5.3 rewind 6.文本文件和二进制文件 7.文件读取结束的…

2023年银行理财子公司研究报告

第一章 行业发展概况 1.1 行业概况 所谓“银行理财子公司”&#xff0c;其实就是由商业银行作为控股股东发起设立的&#xff0c;并经国务院银行业监督管理机构批准&#xff1b;主要从事理财业务&#xff1b;独立于母行&#xff0c;具有独立法人地位的非银行金融机构。像工商银…

Redission分布式锁

实现过程&#xff1a; 只要线程一加锁成功&#xff0c;就会启动一个 watch dog 看门狗&#xff0c;它一个后台线程&#xff0c; 会每隔 10 秒检查一下&#xff0c;如果线程 1 还持有锁&#xff0c;那么就会不断延长锁 key 生存时间。因此&#xff0c;Redisson 解决了锁过期释放…

Commitizen规范git提交代码

首先全局安装Commitizen&#xff0c;运行&#xff1a; npm install -g commitizen 然后在项目中开启终端&#xff0c;安装cz-customizable npm i cz-customizable --save-dev 然后在package.json中配置如下代码&#xff1a; "config": {"commitizen":…

虹科干货| 虹科Redis企业版数据库:告别游戏卡顿,让快乐加速!

“卡顿一分钟&#xff0c;玩家两行泪” 游戏已成为年轻人最主要的消遣娱乐方式之一&#xff0c;游戏卡顿给玩家带来糟糕游戏体验背后的原因是什么&#xff1f;数据存储与查询速度不够快&#xff01; 游戏开发领域&#xff0c;不仅拥有海量的数据&#xff0c;甚至还要做到实时…

Flowable6.x导出/查看/跟踪流程图

Flowable6.x导出/查看/跟踪流程图 项目源码仓库 Flowable诞生于Activiti&#xff0c;是一个使用Java编写的轻量级业务流程引擎。Flowable流程引擎可用于部署BPMN 2.0流程定义&#xff0c;可以十分灵活地加入你的应用/服务/构架。 本文介绍4种绘制流程图的方式&#xff0c;前…

TryHackMe-Set(Windows渗透测试 | WinDefender免杀)

Set 您再次发现自己在Windcorp公司的内部网络上。上次你去那里的味道真好&#xff0c;你回来了 了解更多。 但是&#xff0c;这次他们设法保护了域控制器&#xff0c;因此您需要找到另一台服务器&#xff0c;并在第一次扫描时发现“Set”。 Set被用作开发人员的平台&#xf…

集团企业大数据治理解决方案word

第一章 集团企业大数据治理阶段目标 通过数据平台和BI应用建设&#xff0c;集团企业大数据将搭建统一的大数据共享和分析平台&#xff0c;对各类业务进行前瞻性预测及分析&#xff0c;为集团企业各层次用户提供统一的决策分析支持&#xff0c;提升数据共享与流转能力。 一.1、…

Redis持久化的几种方式

Redis 持久化也是 Redis 和 Memcached 的主要区别之一&#xff0c;因为 Memcached 是不具备持久化功能的。 1.持久化的几种方式 Redis 持久化拥有以下三种方式&#xff1a; 快照方式&#xff08;RDB, Redis DataBase&#xff09;将某一个时刻的内存数据&#xff0c;以二进制的…

SpringAOP入门基础银行转账实例(进阶版)------------事务处理

SpringAOP入门基础银行转账实例**&#xff08;进阶版&#xff09;**------------事务处理 由上一节讲述的通过Connection和QueryRunner对事务进行的处理(详情可以去我之前写的博客文章&#xff1a;https://blog.csdn.net/m0_56245143/article/details/130069160?spm1001.2014…

派盘为您的个人数据安家

现如今,我们的生活中有着各种各样的数据。在工作中会有各种文件、邮件;在生活中则有照片和视频等。数据的来源多,时间点不一致且混乱。 数据是否能安全、稳定、长久的存储以及便捷高效的使用对我们来说相当重要。你是否经常出差需要带上电脑或者移动硬盘,想存网盘又怕丢失或…

牛客网:HJ1 字符串最后一个单词的长度

题目部分&#xff1a; 解题思路&#xff1a; 方案一&#xff1a; 对于本题&#xff0c;看似简单&#xff0c;其实有坑。 就是在获取单词这块&#xff0c;不能直接用cin这样子操作&#xff0c;否则不能获取到完整的单词&#xff0c;因为cin这样的读到空格就不会往后续读了&…

elsticsearch与关系数据库的区别

查看所有索引&#xff08;表&#xff09; 向索引&#xff08;表&#xff09;中添加数据&#xff1a; 自定义id添加数据&#xff1a; 自定义id添加数据&#xff1a;方式二