【2023最新】超详细图文保姆级教程:App开发新手入门(5)
上文回顾,我们已经完成了一个应用的真机调试,本章我们来了解一下如何引入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, // 设置播放器具体顶部的距离,用于避免覆盖顶部的NavBarw: 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>
下面对修改的部分,简单进行一下代码逻辑讲解:
- 修改
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元素内容。
- 修改
- 在
style
标签内添加 步骤3 新增的dom元素需要的样式代码
<style><!--省略原有代码-->.video-wrap {width: 100%;height: 300px;} </style>
- 在
- 在底部的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, // 设置播放器具体顶部的距离,用于避免覆盖顶部的NavBarw: 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>
- 在底部的script脚本标签内部,新增定义一个
- 修改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 同步代码
- 启动自定义AppLoader,并与 YonStudio工具进行连接(要保证 自定义AppLoader内的。(具体还不会的同学,可以查看上个大章节(4)的相关介绍 )
- 鼠标右键点击 widget 文件夹,并选择
WIFI同步(全量)
(或者可以直接使用对应的快捷键)
- 鼠标右键点击 widget 文件夹,并选择
同步后,即可在AppLoader端查看到运行效果,如下图( 是不是很方便 - )
8.4 后话
上面仅仅是简单的示范了一下使用移动插件的方法,为了方便新手理解,并没有深入的扩展。比如上面使用的moviePlayer
移动插件就有很多的方法,有兴趣的同学可以查看移动插件对应的开发文档,自行修改查看运行效果。
moviePlayer的开发说明文档地址
另外,官方也提供了「自定义插件」的扩展原生插件机制,支持开发者去根据需要自行封装「移动插件」。
友情提示:「自定义移动插件」这块属于扩展功能,不会也完全不影响正常的应用开发,建议掌握了android开发或iOS开发能力的同学查看,其他人可忽略
更多关于「自定义移动插件」的介绍说明,可查看以下链接
- 移动原生插件开发设计规范
- 移动原生插件开发指南-iOS
- 移动原生插件开发指南-AndroidEclipse
- 移动原生插件开发指南-AndroidStudio
(未完待续…)
【2023最新】超详细图文保姆级教程:App开发新手入门(5)相关推荐
- 【2023最新】超详细图文保姆级教程:App开发新手入门(4)
之前章节我们已经完成了一个应用项目的导入.代码更新和代码提交和应用打包编译,本章继续讲述一下,如何在开发过程中进行代码的同步联机调试. 7 代码真机调试 7.1 纯静态CSS页面样式查看 代码调试有多 ...
- 【2023最新】超详细图文保姆级教程:App开发新手入门(2)
上章节我们已经成功的创建了一个 App 项目,接下来我们讲述一下,如何导入项目.编辑代码和提交项目代码. Let's Go! 4. 项目导入 当用户创建一个新的应用时,YonStudio 开发工具会自 ...
- 【2023最新】超详细图文保姆级教程:App开发新手入门(1)
1. 关于 『YonBuilder移动开发』 PS: 本段内容主要目的是去除官方语音描述,用通俗的语言来简单介绍一下『YonBuilder移动开发』,方便新手开发者判断是否适合自己上手学习. 简介: ...
- 超详细图文保姆级教程:App开发新手入门(二)
上文我们已经成功的创建了一个项目,接下来我们讲述一下,如何导入.编辑.提交项目代码下面我们继续. 4. 开发调试 4.1 项目导入 当用户创建一个新的应用时,Studio3开发工具会自动导入项目代码, ...
- 超详细图文保姆级教程:App开发新手入门(三)
上文我们已经完成了一个应用项目的导入.代码更新和代码提交,本章继续讲述一下,如何在开发过程中进行代码的同步联机调试. 4 代码调试 4.1 纯静态CSS页面样式查看 代码调试有多种方式,如果是查看纯粹 ...
- 超详细图文保姆级教程:App开发新手入门(五)
上文回顾,我们已经完成了一个应用的版本编译,本章我们来了解一下如何引入APICloud的原生模块, 并利用模块还完成一个简单的视频播放器. 1. 关于APICloud原生模块的简单概述 1.1 什么是 ...
- 超详细图文保姆级教程:App开发新手入门(六)
设置应用的Logo图标和启动页 上文回顾,我们已经完成了一个简单应用的开发,本章我们简单介绍一下如何设置应用的桌面图标及应用的启动页(本章内容超级简单 -). 1. 修改设置应用的桌面图标 1.1 登 ...
- k8s搭建(超详细,保姆级教程)
1.简介 这里就不赘述,想要了解的朋友直接去这里深入了解什么是K8S. 2.环境要求 2台以上机器,操作系统 CentOS7.7-64位系统 硬件配置:2GB或更多RAM,2个CPU或更多CPU,硬盘 ...
- STM32移植LVGL8.0.2超详细的保姆级教程附移植好的工程文件
文章目录 前言 一.什么是LVGL? 二.先看效果 三.移植前准备工作 1.准备原有工程 2.下载LVGL源码 四.开始移植 1.把源码搬运到工程文件夹里 2.把搬运好的代码添加到keil工程 3.动 ...
最新文章
- 【极客blog图文讲解】ruby以及Jekyll的环境配置(针对mac linux)
- html egg mac os 10.7,HTML Egg
- 内存位置访问无效_万字长文——java内存模型之volatile深入解读
- 解决中文乱码的问题要考虑的8个地方|(utf-8,用于抛砖引玉)
- linux 新分区使用1%,linux下使用fdisk结合partprobe命令不重启系统添加一块新的磁盘分区...
- http://www.appinn.com/bookmark-manager-chrome/
- 查python答案的软件-中国大学MOOC的APP慕课用Python玩转数据答案查题公众号
- php 保存错误日志,PHP中把错误日志保存在系统日志中_PHP教程
- Json与List的相互转换 [谷歌的Gson.jar和阿里的fastJson.jar]
- 【数字信号调制】基于matlab无线电信号调制识别【含Matlab源码 912期】
- IT服务管理的实施过程
- ele表单验证的数字的坑
- digit计算机语言,计算机英语:BASIC语言入门
- excel 的lookup和sumifs函数使用
- MySQL高并发优化指南(万能通用),稳的一批~
- 安卓app源码和设计报告——简易记账本
- 欧几里得算法的实现(Java)
- 惊了,近4成年薪50W+商科TOP1院校的生源都有哪些? | 北大光华2022级推免大数据
- 微信小程序 - 实现导航栏和内容上下联动功能
- VSTO PPT图表对象的操作(2)