MUI+H5开发移动APP/网易邮箱大师项目实战/Android、IOS跨平台应用开发-王翠英-专题视频课程...

MUI从基础到精通的全方位讲解,系统介绍了移动APP开发基础、MUI各类组件、侧滑菜单、MUI事件管理、MUI窗口管理、底部选项卡切换的多种方式、MUI的Ajax、下拉刷新与上拉加载。...
摘要由CSDN通过智能技术生成
MUI+H5开发移动APP/网易邮箱大师项目实战/Android、IOS跨平台应用开发—488人已学习
课程介绍    
201802071353067350.jpg
    MUI从基础到精通的全方位讲解,系统介绍了移动APP开发基础、MUI各类组件、侧滑菜单、MUI事件管理、MUI窗口管理、底部选项卡切换的多种方式、MUI的Ajax、下拉刷新与上拉加载。
课程收益
    熟练掌握MUI框架的使用,并且能够成功制作出一款移动APP
讲师介绍
    王翠英 更多讲师课程
    具有三年的网站开发、前端开发经验,深入研究多种前端框架,精通Web APP开发,具有丰富的实战经验。
课程大纲
  第1章:HTML开发移动APP基础
    1. 课程介绍  6:28
    2. HBuilder 新建移动APP
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
2018mui教程 mui实战视频教程 web移动开发教程+源码 课程简介: 结合MUI框架完成HTML5移动端混合应用开发(微信实战)。 本课程将介绍如何使用HTML5完成移动端混合应用开发课程移动端框架MUI为基础,以微信项目为目标,介绍MUI框架的使用,包含移动端排版布局,HTML5借助框架完成手机摄像头调用、手机相册调用、手机重力感应调用等特效,并最终完成微信案例项目课程目标: 学习HTML5移动端混合应用开发,并完成微信项目实战,本课程介绍了MUI框架的使用,以及Hbublder工具的基本操作。适用人群本课程适合具有HTML与CSS基础,了解HTML5及CSS3,并想入HTML5移动端混合应用开发领域的同仁。 课程目录介绍: 1【MUI框架】HTML5混合应用开发MUI框架 2 MUI移动端框架初体验 3【微信主页】顶部标题栏 4【微信主页】底部Tab导航 5【微信主页】底部Tab导航样式调整 6【微信主页】图文列表 7【微信项目】整体效果展示 8【微信子页面】DIV方式创建子页面 9【真机调试】HTML5程序真机调试 10【微信子页面】WebView方式创建子页面 11【微信子页面】WebView方式创建子页面 12【微信子页面】webView子页面效果演示 13【微信子页面】底栏Tab页面切换 14【微信子页面】打开微信聊天子页面 15【微信子页面】聊天页面效果展示 16【微信子页面】页面间传值 17【相册】Html5访问手机相册,发送单张图片 18【相册】Html5访问手机相册,发送多张图片 19【摄像头】Html5访问手机摄像头,发送拍摄照片 20【摇一摇】获取重力感应 21【摇一摇】监控重力感应及摇一摇实现逻辑 22【微信子页面】发现页面 23【朋友圈】朋友圈页面布局 24【朋友圈】下拉刷新 25【朋友圈】上拉加载 26【事件】移动端事件 27【其他】MUI其他相关 28【案例包】项目案例包效果展示 29【案例包】项目案例包源码获取 30【应用退出】应用程序退出实现 31【打包部署】应用程序云端打包与发布 Mui视频教程部分 MUI - dialog对话框、ipnut (表单).mp4 MUI - datepicker(时间选择器).mp4 MUI 介绍、新项目创建、 基础布局.mp4 MUI - 窗口管理及窗口之间的数据传递.mp4 MUI - 复选框、单选框、使用js获取选择值.mp4 MUI - cardview(卡片视图)、mask(遮罩蒙版).mp4 MUI - accordion(折叠面板)、button(按钮).mp4 h.js 使用教程.mp4 MUI - actionsheet(操作表)、badge(数字角标).mp4 MUI - slide(轮播组件).mp4 APP与服务器之间的交互原理、MUI Ajax使用.mp4 MUI - progressbar(进度条)、滑块及switch开关.mp4 MUI - 事件管理及自定义事件详解.mp4 微信实战-结合MUI框架完成HTML5移动端混合应用开发视频教程
WebApp mui&H5+ 可以结合使用 Native.js for Android 完成视频录制和处理。以下是大致的实现步骤: 1. 引入 Native.js for Android 插件,该插件可以在 H5+ 中使用 Native 方法。 2. 使用 H5+ API 调用 Android 摄像头,获取视频流,并且使用 Native 方法将视频流传递给 Android Native 代码。 3. 在 Android Native 代码中,使用 Camera2 API 获得视频流,并且使用 MediaRecorder API 将视频流录制为 MP4 格式的视频。 4. 将录制好的视频文件保存到指定的路径,并且使用 Native 方法将视频文件路径传递给 H5+ 代码。 5. 在 H5+ 代码中,使用 HTML5 Video 标签来播放录制好的视频。 示例代码如下: H5+ 代码: ``` // 引入 Native.js for Android 插件 document.addEventListener('plusready', function() { var nativeApi = plus.android.importClass('io.dcloud.NativeApi'); var nativeObj = new nativeApi(); // 使用 H5+ API 调用 Android 摄像头 var cmr = plus.camera.getCamera(); cmr.startVideoCapture(function(path) { // 使用 Native 方法将视频流传递给 Android Native 代码 nativeObj.exec('com.example.camera', 'startRecording', [path], function(result) { console.log(result); // 使用 Native 方法将视频文件路径传递给 H5+ 代码 nativeObj.exec('com.example.camera', 'getVideoPath', [], function(path) { console.log(path); var video = document.getElementById('video'); video.src = path; video.play(); }, function(e) { console.log(e); }); }, function(e) { console.log(e); }); }, function(e) { console.log(e); }, {filename:'_doc/video/', index:1}); }); ``` Android Native 代码: ``` public class CameraPlugin extends CordovaPlugin { private CameraDevice cameraDevice; private MediaRecorder mediaRecorder; private String videoFilePath; @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if ("startRecording".equals(action)) { startRecording(args.getString(0), callbackContext); return true; } else if ("getVideoPath".equals(action)) { getVideoPath(callbackContext); return true; } return false; } private void startRecording(String path, CallbackContext callbackContext) { try { mediaRecorder = new MediaRecorder(); mediaRecorder.setVideoSource(MediaRecorder.VideoSource.SURFACE); mediaRecorder.setOutputFormat(MediaRecorder.OutputFormat.MPEG_4); mediaRecorder.setOutputFile(path); mediaRecorder.setVideoEncodingBitRate(10000000); mediaRecorder.setVideoFrameRate(30); mediaRecorder.setVideoSize(1280, 720); mediaRecorder.setVideoEncoder(MediaRecorder.VideoEncoder.H264); mediaRecorder.prepare(); mediaRecorder.start(); videoFilePath = path; callbackContext.success(); } catch (Exception e) { callbackContext.error(e.getMessage()); } } private void getVideoPath(CallbackContext callbackContext) { callbackContext.success(videoFilePath); } // ... } ``` 需要注意的是,在 Android 6.0 及以上版本的系统中,需要动态请求摄像头和存储权限。同时,在录制视频时,需要使用新版的 Camera2 API 替换旧版的 Camera API。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值