使用mui+vue框架做原生app的坑(一)

最新推荐文章于 2024-05-14 12:35:31 发布
最新推荐文章于 2024-05-14 12:35:31 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： 前端框架 文章标签： html5 app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jikuicui7402/article/details/106954248
版权
 
 
 
               
一、app连接不到后台：
    1.ajax部分写的url路径错误
    2.访问被拦截。
    3.访问的ip和端口是否正确，这里是个统一配置的js。将一些默认配置写在里面，减少重复代码而已。
          
 
二、  app用的是缓存，全局通用，不是session。
                 //设置缓存信息
                plus.storage.setItem("user",userInfo);
                //读取本地存储，检查是否为首次启动
                var showGuide = plus.storage.getItem("lauchFlag");
                //仅支持竖屏显示
                plus.screen.lockOrientation("portrait-primary");
 
 
 
 
 
 
 
 
 
        mui.init({
            swipeBack:true,//启用右滑关闭功能
            pullRefresh: {
                container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                down: {
                    style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                    color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
                    height: '50px', //可选,默认50px.下拉刷新控件的高度,
                    range: '100px', //可选 默认100px,控件可下拉拖拽的范围
                    offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
                    auto: true, //可选,默认false.首次加载自动上拉刷新一次
                    callback: downpullfresh, //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                    auto: true,//可选,默认false.首次加载自动下拉刷新一次
                },
                up: {
                    height: 50, //可选.默认50.触发上拉加载拖动距离
                    auto: true, //可选,默认false.自动上拉加载一次
                    contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                    callback: uppullfresh, //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                }
            },
        });
 
 
 
function openPage(url, id) {
            
            mui.openWindow({
                url: url,
                id: id,
                styles: {
                    top: '100px', //新页面顶部位置
                    bottom: '200px', //新页面底部位置
                },
                extras: {},
                createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
                show: {
                    autoShow: true, //页面loaded事件发生后自动显示，默认为true
                },
                waiting: {
                    autoShow: true, //自动显示等待框，默认为true
                    title: '正在加载...', //等待对话框上显示的提示内容
                }
            })
        }
 
 
var winAll = plus.webview.all(); //获取所有窗体
   //console.log(JSON.stringify(winAll))
 var tab_home = plus.webview.getWebviewById("tab_home.html"); //获取指定的页面
 
 
 
 
##刷新列表页
                var list1 = plus.webview.getWebviewById('index-assessment.html');
                        //触发列表界面的自定义事件（refresh）,从而进行数据刷新
                        if (list1) {
                            mui.fire(list1, 'refresh_list');
                        }
                        mui.back();
 
 
document.addEventListener('refresh_list', function(event) {
                news.items = [];
                start = 0;
                pullupRefresh();
            });
 
##vue
1、data参数需要逗号隔开，而不是分号。
2、methods支持绑定方法 如@click="reverseMessage"
 
var appvue = new Vue({
            el: '#testvue',
            data: {
                show: false,
                use: true,
                url: 'login.html',
                isColor: false,
                isSize: true,
                idinfo: '2220',
                message: 'helloWorld!'
            },
            methods: {
                reverseMessage: function() {
                    this.message = this.message.split('').reverse().join('')
                },
                changeUrl:function(){
                    this.url = 'home.html';
                }
            }
        })
 
        function test() {
            console.log(appvue);
            appvue.url ='abc.html';
            //appvue._data.url='def.html';
            //appvue.data.url = 'html/home.html';
        }
 
 
 
  
 
当然也可以用v-bind:value="idinfo"
 
还有像v-bind:value这种都可以简写为:value
 
 
 
##修改窗口标题控件的样式和标题内容
 
 
 
 
这个是动态修改 窗口创建的标题栏控件
 
 
 
##关于弹出菜单位置的设置
 
 
 
 
demo的里面，由于设置的position: fixed;然后导致了内容过长会导致 弹出层被遮挡，需要把position: fixed改成position:absolute;
 
 

相关代码:

index.html

<html><head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css">
		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}

			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}

			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}

			.oa-contact-avatar {
				width: 75px;
			}

			.oa-contact-avatar img {
				border-radius: 50%;
			}

			.oa-contact-content {
				width: 100%;
			}

			.oa-contact-name {
				margin-right: 20px;
			}

			.oa-contact-name,
			oa-contact-position {
				float: left;
			}
		</style>
	</head>

	<body>
		<!-- <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> -->
		<nav class="mui-bar mui-bar-tab">
			<a id="tab_home" class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a id="tab_vue" class="mui-tab-item" href="javaScript:openPage();">
				<span class="mui-icon mui-icon-email">
					<!-- <span class="mui-badge"></span> --></span>
				<span class="mui-tab-label">vue部分</span>
			</a>
			<a id="tab_setting" class="mui-tab-item">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
		<!-- <div class="mui-content">
		</div> -->
	
	<script src="js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack:true, //启用右滑关闭功能
			subpages: [ //首先加载首页  
				{
					url: 'html/home.html',
					id: 'tab_home',
					styles: {
						top: '0px',
						bottom: '60px'
					}
				}
			],
			preloadPages: [ //预加载其他页面  
				{
					url: 'html/vue_demo.html',
					id: 'tab_vue',
					styles: {
						top: '0px',
						bottom: '60px'
					}
				},
				{
					url: 'html/setting.html',
					id: 'tab_setting',
					styles: {
						top: '0px',
						bottom: '60px'
					}
				}
			],
		});
		mui.plusReady(function() {
			// 			// 获取所有Webview窗口
			// 			var winAll = plus.webview.all(); //获取所有窗体
			// 			//console.log(JSON.stringify(winAll)) 
			var tab_home = plus.webview.getWebviewById("tab_home");
			var tab_vue = plus.webview.getWebviewById("tab_vue");
			var tab_setting = plus.webview.getWebviewById("tab_vue");
		});

		document.getElementById("tab_home").addEventListener("tap", function(even) {
// 			var tab_home = this.webview.getWebviewById("tab_vue");
// 			console.log(JSON.stringify(tab_home));
// 			tab_home.show();
			//tab_vue.hide(); //这一步必须有
			//tab_setting.hide(); //这一步必须有
		})
		
		document.getElementById("tab_vue").addEventListener("tap", function(even) {
			mui.toast(4444);
// 			var tab_vue = plus.webview.getWebviewById("tab_vue");
// 			tab_vue.show();
			openPage("html/vue_demo.html","html/vue_demo.html");
		})
		document.getElementById("tab_setting").addEventListener("tap", function(even) {

		})
		function openPage(url,id) {
			mui.toast(8899);
			mui.openWindow({
				url:url,
				id:id,
				styles: {
					top: '100px', //新页面顶部位置
					bottom:  '200px', //新页面底部位置
				},
				extras: {
				},
				createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
				show: {
					autoShow: true, //页面loaded事件发生后自动显示，默认为true
				},
				waiting: {
					autoShow: true, //自动显示等待框，默认为true
					title: '正在加载...', //等待对话框上显示的提示内容
				}
			})
		}
	</script>

</body></html>

home.html

 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
		<style>
			
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
	
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
		</style>
	</head>

	<body>
		<!-- <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" id="refreshContainer">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">Item 1
					<span class="mui-badge mui-badge-primary">11</span>
				</li>
				<li class="mui-table-view-cell">Item 2
					<span class="mui-badge mui-badge-success">22</span>
				</li>
				<li class="mui-table-view-cell">Item 3
					<span class="mui-badge">33</span>
				</li>
			</ul>
			<div class="title">首页</div>
			<div id="tabbar" class="mui-control-content mui-active">
				<div class="title">这是div模式选项卡中的第1个子页面.</div>
				<div class="title">何谓div模式的选项卡？
					其实就是通过DIV模拟一个独立页面，通过DIV的显示、隐藏模拟不同页面的切换，典型的SPA模式；</div>
				<div class="title">
					这种模式适合简单业务系统，因为每个选项卡内容要写在一个DIV中，
					若逻辑复杂，会导致当前页面DOM结构繁杂，造成webview响应缓慢，甚至崩溃；
					因此若系统较复杂，需要下拉刷新等操作，推荐使用webview模式的选项卡；</div>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack:true,//启用右滑关闭功能
			pullRefresh: {
				container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				down: {
					style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
					color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
					height: '50px', //可选,默认50px.下拉刷新控件的高度,
					range: '100px', //可选 默认100px,控件可下拉拖拽的范围
					offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
					auto: true, //可选,默认false.首次加载自动上拉刷新一次
					callback: downpullfresh, //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					auto: true,//可选,默认false.首次加载自动下拉刷新一次
				},
				up: {
					height: 50, //可选.默认50.触发上拉加载拖动距离
					auto: true, //可选,默认false.自动上拉加载一次
					contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
					contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
					callback: uppullfresh, //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				}
			},
		});
		
		
			//下拉
		function downpullfresh() {
			mui.toast(12);
			//注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
			//没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
			mui('#refreshContainer').pullRefresh().endPulldown();
		}
		//上拉
		function uppullfresh() {
				mui.toast(32);
			//业务逻辑代码，比如通过ajax从服务器获取新数据；
			//注意：
			//1、加载完新数据后，必须执行如下代码，true表示没有更多数据了：
			//2、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
			this.endPullupToRefresh(true | false);
		}
	</script>
</html>

 

程序员ken
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
mui+vue结合开发的商城APP实例
09-28
在网上花了很多时间找的mui+vue结合开发的商城APP实例，大家可以和学习借鉴一下，mui开发实例 ，vue开发实例
Vue+mui 上拉加载
07-11
mui上拉插件结合vue示例代码
使用mui+vue框架做原生app的坑(二) 打包
程序员ken的博客
06-25 430
怎么打包 ，这里不赘述，网上有很多教程。 打包成功后 ，app会出现未加入push功能。 后面查询需要这样配置权限，权限要在manifest.json里面配置，后面就尝试写了消息推送这块。可能你觉得你没加push这个我开始也是这样认为的利用全局搜索plus.push发现了这个 这是登录页面，获取推送设备写的东西。有用这个就需要配置上述图片的push权限。 1.关于推送 如果没有写上述的clear方法 ，推送信息会一直追加上面。 ...
2024年最全vue配合mui框架详细讲解 上拉加载demo(1)，2024Web前端开发面试解答
最新发布
2401_84437170的博客
05-14 392
资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。思路是：mui.init() 初始化调用pullRefresh方法，mui.init({up: {contentrefresh: ‘正在加载…’,contentnomore: ‘没有更多数据了’,});pullupRefresh放在vue app的methods里面pullupRefresh去调用methods的page方法，
Vue之MUI整合
伐木小屋
05-31 2530
前言         MUI跟Element-ui都属于美化页面，个人觉得MUI用于移动端项目比较合适，Element-UI用于PC端。 了解         MUI不能通过npm或者yarn、cnpm下载，只能通过去网上下载的方式，亦或者利用HBuildX来辅助下载，可以在HBuildX里新创建H5+APP，用mui模板创建。然后抽取muid的js
mui html5 vue,MUI和VUE数据绑定 mui框架入门 （一）
weixin_39647977的博客
06-28 2724
MUI和VUE数据绑定 mui框架入门 (一)mui.ajax或者mui.getJSON给我们这些对VUE以及AJAX一穷不通的小白们提供了一个很好的入门。但MUI框架，还是有一些坑的，比如：如果你是底部导航配合侧滑栏，那么你就会体验到什么是 CAO TM D。我们静态写好后发给后端，后端会把主页擦开分为底部导航和其他的子界面。但是这样侧滑栏就会有bug。来回到我们的标题MUI与VUE结合给博客写...
mui+vue的商城APP源码
11-12
Mui，全称为Mobile UI，是一个专为移动端设计的前端框架，它提供了丰富的组件库和手势支持，使得开发者能够快速构建出高性能的原生App体验。Vue.js，则是一款轻量级的JavaScript框架，以其简洁的API、强大的指令系统...
mui+vue开发的商城APP实例
11-14
在本文中，我们将深入探讨如何使用MUI和Vue.js框架来开发一款功能完善的商城应用程序。MUI是一个基于HTML5的移动开发框架，它为开发者提供了丰富的组件和样式，旨在简化移动应用的前端开发。Vue.js则是一个轻量级的...
mui-vue2：mui + mint + vue2.x + vue-router + vuex + webpack最终打包成原生apk的应用项目，样式使用vue移动端mint ui框架，原生手机能力偏重于mui框架，欢迎星级！
02-20
基于mui + vue2.x的H5 APP项目，页面视图全部都是html5页，不是嵌入app原生页面，项目可以直接运行在PC上调试，也可以在hbuilder上真机调试，可以直接下载安装。 项目文档地址： 。 考虑访问速度：码云项目地址： ...
基于mui+mint+vue2.x+vue-router+vuex+webpack制作H5app项目
11-05
1. **MUI**：MUI是一个针对移动设备优化的前端框架，提供了丰富的UI组件和原生App的交互体验。它主要针对HTML5移动应用，提供了类似iOS和Android原生界面的组件，如导航栏、滑动菜单、下拉刷新等。 2. **Vue2.x**：...
mui +vue 移动端demo
10-12
使用mui+ vue开发，数据使用豆瓣api的top250，仿照现有教程写的页面，仅供参考
web前端 MUI+VUE教程
08-14
包括MUI的教程和VUE.js的新手入门教程和VUE.JS的普通教程
VueNative是一个使用JavaScript构建跨平台原生移动应用程序的框架
08-11
Vue Native是一个使用JavaScript构建跨平台原生移动应用程序的框架
基于vue框架搭建的一款在线点菜app
08-09
基于vue框架搭建的一款在线点菜app
MUI框架--页面init事件
02-09
这是MUI系列课程的代码资源，第一节。MUI的init方法。主要用于初始化数据
vue整合mui
weixin_33862514的博客
01-22 3092
步骤1：下载https://github.com/dcloudio/mui 步骤2：将下载来的包中的dist文件夹 放到vue项目的assets中 步骤3：修改webpack配置 找到build下的webpack.base.conf.js 步骤4：修改.babelrc 步骤5：在main.js引入对应的js和css 步骤6：调用mu...
Vue项目MUI的使用
pang787559613的博客
03-19 1000
MUI官网： https://dev.dcloud.net.cn/mui/ui/ 一、下载： 1、下载github内容至本地解压： github地址：https://github.com/dcloudio/mui 2、复制dist文件夹下三个文件至项目中： 二、引入： 在main.js中引入样式： // 导入 MUI 的样式表 import './lib/mui/css/mui.min...
mui 与vue 混合开发的可行性分析
追梦程序员
01-09 1310
结论 mui不适合与vue 混合开发 所以hbuilder 各种 项目中, 你只要用到 mui 框架, 就不可使用vue 分析 jquery和vue.js 是两种风格的开发方式 mui本身是一个类似jquery的框架,所以与vue开发方式不一样 而且mui.js与vue.js 有着不可调和的冲突 特别是 href tap click 链接和跳转方面的冲突 mui与vue 框架适用项目 项目 mui框架 vue框架 mui项目 可用 不可用 vue项目 不可 可 vue-cl
mui与vue结合 功能网址
热门推荐
qq_31971935的博客
08-10 1万+
Vue.js的组件和框架PC与移动 iView elementUI MintUIelementUI PC官网 http://element.eleme.io/ MintUI 移动端 http://mint-ui.github.io/ iView 是一套基于 Vue.js 的 UI 组件库，主要服务于 PC 界面的中后台产品。https://www.iviewui.com/components
使用MUI开发HTML5移动购物APP实战
"开发移动购物APP的文档详细介绍了如何使用HTML5、Hbuilder开发工具和MUI框架构建一个基于Web的网络商城移动应用程序。文档涵盖了HTML5的发展、优势，以及在移动APP开发中的应用，同时深入讲解了Hbuilder和MUI在提升...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员ken

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值