文章目录

  • 混合开发
    • 混合开发介绍
    • MUI 初步认识
    • HBulid初入时遇到的坑
      • Q0：Uncaught ReferenceError: plus is not defined (提示: 请在plus ready后再调用plus api)
      • Q1：上机运行报错error
      • Q2：手机上显示主页怎么调？
      • Q3：mui 是 5+ 封装的
    • MUI框架
      • Dialog 消息框
      • 图文列表
      • 侧滑菜单
      • 选择器
      • 城市三级联动
      • 选项卡
      • 导航栏滑动透明度
      • 滑动选项
      • 图片查看
    • 窗口管理
      • 双webview模式
      • 页面协值跳转
      • 预加载
    • HTML5+ API
      • create
    • 下拉刷新
      • 单 webview 模式

混合开发

混合开发，是介于H5和原生之间的一种开发模式，既有原生的部分，也有H5的部分，结合了各自有优点，这种开发模式，既可以做到跨平台，也能上各大应用市场。

混合开发介绍

  1. 移动应用开发的三种方式

    • Native App： 本地应用程序（原生App）
    • Web App：网页应用程序（移动web）
    • Hybrid App：混合应用程序（混合App）：美团，爱奇艺，微信
  2. web 应用
    • 优点

      • 不需要下载，不需要安装，保证最新版本
      • 对于开发者相对简单
    • 缺点
      • 浏览器提供的api，大部分系统级硬件不能用
      • 性能不如原生
  3. 混合开发：native app 和 web app 的结合，最外有层壳（原生），里面放的网页系统提供的 Webview（网页渲染控件）
    • 优点

      • 兼容多平台
      • 顺利访问手机多种功能
      • App stroe中可以下载(web应用中套原生应用的外壳)
    • 缺点
      • 不确定上线时间
      • 用户体验不如本地应用
      • 性能较慢

MUI 初步认识

https://dev.dcloud.net.cn/mui/
这是他的官网

HBulid初入时遇到的坑

Q0：Uncaught ReferenceError: plus is not defined (提示: 请在plus ready后再调用plus api)

这个报错的话应该是你没有添加事件，上来就运行 mui .XXX 的控件了
我解决的方案就是加个事件来触发mui.XXX

Q1：上机运行报错error

修改文件夹的名字，不要有横杠 - 或是下划线 _ 之类的符号（我找了好久的错误，浏览器能运行，到手机上就不好使了）

报错信息如下

Q2：手机上显示主页怎么调？

不用每次都修改index，而是

Q3：mui 是 5+ 封装的

所以5+的方法一定要上手机真机上测试，手游模拟器也行，chrome等pc浏览器是测不出来的，因为没有安卓环境
他俩的封装关系类似 Bootstrap 和 css 之间的关系，Bootstrap 是 css 的封装

MUI框架

Dialog 消息框

如果想要一个消息框类似如下，可以写这样的代码

 <body><script src="../../js/mui.js"></script><script type="text/javascript">mui.init()</script><button class="btn1">弹出提示框</button></body><script type="text/javascript">var btn = document.querySelector('.btn1')var arr = ['取消','确定'];btn.onclick = function(){mui.confirm('这是一段内容','标题',arr,function(e){console.log(e);});}</script>

如果想把她的样式变成IOS的，可以在confrim的参数里添加 div

     btn.onclick = function(){mui.confirm('这是一段内容','标题',arr,function(e){console.log(e);/* 在下面添加 'div'  */},'div');}

图文列表

样式如下
代码如下

<ul class="mui-table-view"><li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="../../imgs/girl1.png"><div class="mui-media-body">幸福<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p></div></a></li><li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="../../imgs/girl1.png"><div class="mui-media-body">木屋<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p></div></a></li><li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="../../imgs/girl1.png"><div class="mui-media-body">CBD<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p></div></a></li></ul>

侧滑菜单

样式类似这样的

     <!-- 在最外层这个类里改变样式mui-scalable 类似手机qqmui-slide-in 菜单也会跟随着滑动--><!-- 侧滑导航根容器 --><div class="mui-off-canvas-wrap mui-draggable mui-scalable"><!-- 菜单容器 --><aside class="mui-off-canvas-left"><div class="mui-scroll-wrapper"><div class="mui-scroll"><!-- 菜单具体展示内容 -->菜单具体展示内容</div></div></aside><!-- 主页面容器 --><div class="mui-inner-wrap"><!-- 主页面标题 --><header class="mui-bar mui-bar-nav"><a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a><h1 class="mui-title">标题</h1></header><div class="mui-content mui-scroll-wrapper"><div class="mui-scroll"><!-- 主界面具体展示内容 -->主界面具体展示内容</div></div>  </div></div>

选择器

样式如下


代码如下

<head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="../../css/mui.css" rel="stylesheet" /><link rel="stylesheet" href="../../css/mui.picker.css"><link rel="stylesheet" href="../../css/mui.poppicker.css"></head><body><script src="../../js/mui.js"></script><!-- picker的引入要在mui 的下面 --><script src="../../js/mui.picker.js"></script><script src="../../js/mui.poppicker.js"></script><script type="text/javascript">mui.init()</script><button class="btn1">点我触发选择器</button></body><script>(function($,doc){$.init();var user = new $.PopPicker();user.setData([{value:'cxq',text:'陈晓晴'},{value:'zzh',text:'张子涵'},{value:'hsj',text:'黄圣杰'}])var btn = doc.querySelector('.btn1');btn.addEventListener('tap',function(){user.show(function(items){console.log(items);//return false 弹框不会自动关闭})})})(mui,document)</script>

城市三级联动

想要做这个需要以下文件

链接：https://pan.baidu.com/s/1vGK2rjoTJ4SLpPdiv6UgDg
提取码：219x

样式如下

代码如下

<head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="../../css/mui.css" rel="stylesheet" /><link rel="stylesheet" href="../../css/mui.picker.css"><link rel="stylesheet" href="../../css/mui.poppicker.css"></head><body><script src="../../js/mui.js"></script><script src="../../js/mui.picker.js"></script><script src="../../js/mui.poppicker.js"></script><script src="../../js/city.data-3.js"></script><script type="text/javascript">mui.init()</script><!-- 显示的容器 --><div id="what"></div></body><script>/* 设置选择器的层级 */var picker = new mui.PopPicker({layer: 3});picker.setData(cityData3);picker.pickers[0].setSelectedIndex(1);picker.pickers[1].setSelectedIndex(1);picker.show(function(SelectedItem) {console.log(SelectedItem);//显示你选的是那个城市what.innerHTML = SelectedItem[0].text + SelectedItem[1].text;})</script>

选项卡

样式如下

代码如下

<body><script src="../../js/mui.js"></script><script type="text/javascript">mui.init()</script><header class="mui-bar mui-bar-nav"><a href="" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a><h1 class="mui-title">标题你好</h1></header><nav class="mui-bar mui-bar-tab"><a href="#fir" class="mui-tab-item mui-active"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首页</span></a><a href="#sec" class="mui-tab-item "><span class="mui-icon mui-icon-help"></span><span class="mui-tab-label">help</span></a><a href="#thr" class="mui-tab-item "><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">charset</span></a><a href="#for" class="mui-tab-item "><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首页</span></a></nav><div class="mui-content"><div id="fir" class="mui-control-content mui-active">1</div><div id="sec" class="mui-control-content">22</div><div id="thr" class="mui-control-content ">333</div><div id="for" class="mui-control-content">4444</div></div></body>

导航栏滑动透明度

卧槽不知道咋写标题了，看效果吧

具体实现如下

 <!-- 导航栏滑动逐渐变得不透明，只需要这里的一个类 mui-bar-transparent--><header class="mui-bar mui-bar-transparent"><h1 class="mui-title">标题</h1></header><div id="" class="mui-content"><img src="../../imgs/girl1.png"></div>

滑动选项

样式如下

代码如下

<div class="mui-content"><ul class="mui-table-view"><!-- 左滑删除 --><li class="mui-table-view-cell"><div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-red">删除</a></div><div class="mui-slider-handle">左滑删除</div></li><!-- 右滑删除 --><li class="mui-table-view-cell"><div class="mui-slider-left mui-disabled"><a class="mui-btn mui-btn-red">删除</a><a class="mui-btn mui-btn-blue">删除</a></div><div class="mui-slider-handle">右滑删除</div></li><!-- 左右滑删除 --><li class="mui-table-view-cell"><div class="mui-slider-left mui-disabled"><a class="mui-btn mui-btn-red">删除</a></div><div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-red">删除</a></div><div class="mui-slider-handle">左右滑删除</div></li></ul></div>

图片查看

所需要的插件如下
链接：https://pan.baidu.com/s/1ISSSYmnqYv8br8qZOaNtlA
提取码：d8k6

代码如下

<!doctype html>
<html><head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><!-- 注意你的路径是否对应，我的修改过 --><link href="../../css/mui.css" rel="stylesheet" /><!-- 引入应在mui.css下面 防止不必要的错误 --><link rel="stylesheet" href="../../css/imageV.css"></head><body><script src="../../js/mui.js"></script><script type="text/javascript">mui.init()</script><!-- 敲mheader就会出来了 --><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">标题</h1></header><div class="mui-content"><!-- 为了层级结构一样 --><div class="mui-content-padded"></div><!-- 如果data-preview-group="1" 组相等的话就会在放大的时候滑动查看一族内的图片--><p>这是第一张图</p><p><img src="../../imgs/girl1.png" alt="" data-preview-src="" data-preview-group="1"></p><p>这是第2张图</p><p><img src="../../imgs/girl2.png" alt="" data-preview-src="" data-preview-group="1"></p></div></body><script type="text/javascript" src="../../js/mui.zoom.js"></script><script type="text/javascript" src="../../js/mui.previewimage.js"></script><script type="text/javascript">/* 初始化控件是必须的 */mui.previewImage();</script>
</html>

窗口管理

双webview模式

Q1:在mobile app开发过程中，经常会出现 共用的导航栏或者选项卡，每次打开页面都需要重新渲染，而且容易出现卡头卡尾的现象。并且此时若使用局部滚动，在android手机上会出现滚动不流畅的问题；

解决如上问题，官方给了两种方法，这里说其中一种叫 双webview模式
在index中插入脚本

/* 嵌入 url为你要插入的页面路径id就是给它起名字*/mui.init({subpages:[{url:'html/0318/image.html',id:'image.html',styles:{top:'45px',//mui标题栏默认高度为45px；bottom:'0px'//默认为0px，可不定义；}}]});

官方给的工作原理如下

页面协值跳转

使用的方法mui.openWindow

     /* 这是传值的页面 ,我传递一个 name:"cao" 给B页面*/mui.openWindow({url:"bPage.html",id:"bPage.html",extras:{name:"cao"}})

接收

     /* 这是接收值的页面 */mui.plusReady(function(){//这个plusReady只能在手机上显示!!!!!!!var self = plus.webview.currentWebview();//吐司显示mui.toast(self.name);});

预加载

预加载的测试思路

  1. 通过mui.openWindow()打开预加载的页面，看是否带有转圈圈的loading框，如果有，就说明没有预加载，如果秒跳转就说明预加载成功
  2. var array = plus.webview.all();来获取所有webview，看是否有预加载的webview

官方文档给了两种方法

mui.init mui.preload
优点 可以预加载多个页面 性能好
缺点 可能造成的页面栈过多 只能预加载一个页面
特性 异步（解决：设置延时定时器） 同步

HTML5+ API

具体使用详见如下链接，这里叙述些重要的API
https://www.dcloud.io/docs/api/zh_cn/webview.html

create

用途：创建新的Webview窗口

WebviewObject plus.webview.create( url, id, styles, extras );
  • 这是创建一个webview窗口，而不是新的网页！！，新创建的窗口等待我们show方法使用
  • 如果style对象是空的，那么写个空 对象就行 let newWindow = plus.webview.create("new.html","new.html",{},{msg:'nima'});

下拉刷新

单 webview 模式

样式如下

代码如下

 <body><div id="pullfresh" class="mui-content mui-scroll-wrapper"><div class="mui-scroll"><ul class="mui-table-view mui-table-view-chevron"></ul></div></div></body><script type="text/javascript">/* 下拉刷新更新信息 */mui.init({pullRefresh:{container:"#pullfresh",down:{style:"circle",callback:pulldownRefresh}}})window.onload = function(){// 初始化20条数据addDate(20);}function addDate(item){var table = document.querySelector('.mui-table-view');var cell = document.querySelectorAll(".mui-table-view-cell");// console.log(cell.length);for(let i = cell.length,len = i + item; i < len;i++){var li = document.createElement('li');li.className = 'mui-table-view-cell'li.innerHTML = "<a class='mui-navigate-right'> " +  (i + 1) +  " </a>";// 在末尾追加// table.appendChild(li,table.firstChild);table.insertBefore(li,table.firstChild);}}function pulldownRefresh(){setTimeout(function(){addDate(5);mui('#pullfresh').pullRefresh().endPulldownToRefresh();mui.toast("已经刷新5个元素");},1500)}</script>

【前端22_混合开发】介绍、初步认识MUI、UI组件、窗口管理相关推荐

  1. 如何开发一个基于 Vue 的 ui 组件库

    如何开发一个基于 Vue 的 ui 组件库 开发模式 预览 demo 在开发一个 ui 组件库时,肯定需要一边预览 demo,一边修改代码. 常见的解决方案是像开发一般项目一样使用 webpack-d ...

  2. Unity开发使用DOTween插件实现ui组件慢慢消失和慢慢出现

    有时候做游戏提示的话,需要一个慢慢出现慢慢消失的效果,Unity开发使用DOTween插件实现ui组件慢慢消失和慢慢出现非常的方便. 做一个简单的小笔记,也分享在csdn上,直接上步骤 这里需要导入D ...

  3. 基于H5的混合开发介绍（一）WebView

    转自: https://www.cnblogs.com/sanchang/p/9261461.html 一 WebView到底是什么    1 WebView是一种控件,它基于webkit引擎,因此具 ...

  4. mui教程2——窗口管理、调用相册、调用摄像头、调用重力感应、微信朋友圈界面（仿制）分析

    一.窗口管理 1,页面初始化 在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5 ...

  5. 微信小程序开发实战（二）UI组件介绍 Vant Weapp

    微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 1 第三方组件库 Vant We ...

  6. [精易软件开发工程师Leo学习笔记]009组件-窗口

    列举几个组件 按钮.编辑框.标签.组合框.时钟.服务器.客户端.通用对话框等等... 组件分类: 属性(组件的外观或者配置相关):共有属性/私有属性 方法(组件提供的命令):共有方法/私有方法 事件( ...

  7. flutter打包的app有多大_Flutter原生混合开发

    使用 Flutter 从头开始写一个 App是一件轻松惬意的事情.但是对于成熟产品来说,完全摒弃原有 App 的历史沉淀,全面转向 Flutter 并不现实.用 Flutter 去统一 iOS/And ...

  8. 微信小程序——开发介绍

    一.开始微信小程序 有人问我微信小程序的开发需要学什么,有什么视频啥的.想起来我刚接触微信小程序的时候,也是十分的迷茫,用了很长的时间研究如下的问题.下面的介绍是我学习了 vue 之后,再次学习微信小 ...

  9. android调用flutter aar_Flutter原生混合开发

    混合开发简介 使用Flutter从零开始开发App是一件轻松惬意的事情,但对于一些成熟的产品来说,完全摒弃原有App的历史沉淀,全面转向Flutter是不现实的.因此使用Flutter去统一Andro ...

最新文章

  1. 软件工程白盒测试的流图怎么画_功能安全理论 | 黑盒 与 白盒
  2. 人工智能，也许是另一场文艺复兴！
  3. 从浏览器中下载文件如何修改默认保存位置
  4. C#3.0 Sepcification（中英文对照） （转）
  5. 一键换ip命令_软网推荐：高效命令行备份更简单
  6. ArcGIS Runtime SDK for .NET (Quartz Beta)之连接ArcGIS Portal
  7. Numpy 基本除法运算和模运算
  8. 微信小程序wx.request请求用POST后台得不到传递数据
  9. 成功激活windows server 2008 sp2!
  10. [原创]Tsys 2.0 beta 官方版无法使用自定义SQ
  11. Android 中 View的类关系图
  12. Please either set ERLANG_HOME to point to your Erlang installation or place
  13. linux——18数据库SQLite3
  14. 【趣味实践】自动补帧算法——RIFE的使用
  15. kubernetes-----pod资源创建与Harbor私有仓库
  16. 黑苹果注入显示器EDID解决部分核显独显黑屏花屏颜色不对等一系列问题
  17. AntV G6将节点修改成图片
  18. 1千6百多甲骨文汉字对应表ACCESS\EXCEL数据库
  19. 一张图解读小米公司的商业模式
  20. 周鸿祎：互联网成功十大案例

热门文章

  1. [Android] 隐藏头顶状态栏
  2. 单片机中的几种通信方式
  3. 微信小程序/vue通过阿里云上传图片
  4. 如何估算普通LED灯珠的额定电压和功率
  5. Flutter 动态加载自定义字体
  6. Android Settings总结
  7. 基于Neo4j的关联数据评估风险投资人业绩
  8. MIMIC IV数据库衍生表格配置
  9. 调试运用（电流标幺化,PWMDAC调试,ARCTAN反正切）
  10. uni-app使用canvas生成图片并保存到相册