文章目录

混合开发

混合开发，是介于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 类似手机qq
		 mui-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>
# javascript
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区