跨平台移动APP开发进阶(三):hbuilder+mui mobile app 开发心酸路

2024-02-16 20:58

本文主要是介绍跨平台移动APP开发进阶(三):hbuilder+mui mobile app 开发心酸路,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

注:请点击此处进行充电!​

1.问题描述在实现图片轮转时,若将

<script type="text/javascript">mui("#slider").slider({interval: 5000});</script>

置于图片加载之前,图片不会显示,

解决措施:将其置于图片显示之后才会显示。

2.问题描述: 

同上面的问题,会遇到报指针为null的异常。若要获取一个组件的id,可能带获取的组件还未加载,导致获取失败。

解决措施:将获取组件id的js脚本在定义组件id之后完成。

3.问题描述:页面是由主页面加内容页面组合而成。在主页面做弹出菜单时,弹出菜单无法显示。

问题根源:内容页面遮挡了弹出菜单,致其无法显示。

解决措施:弹出层放在内容页面里,父页面通知内容页面来显示。(使用遮罩蒙版技术解决)

注:在popover、侧滑菜单等界面,经常会用到蒙版遮罩;比如popover弹出后,除popover控件外的其它区域都会遮罩一层蒙版,用户点击蒙版不会触发蒙版下方的逻辑,而会关闭popover同时关闭蒙版;再比如侧滑菜单界面,菜单划出后,除侧滑菜单之外的其它区域都会遮罩一层蒙版,用户点击蒙版会关闭侧滑菜单同时关闭蒙版。

这是一个跨webview的popover示例,在父webview中,点击后通过自定义事件通知子webview,子webview再执行popover的显示隐藏逻辑;

思想来源于Hbuilder群,启发了自己。通过HBuilder自带的示例可以很好的解决自己遇到的问题。

折腾了将近一天这个问题还是没能得到解决!弹出菜单还是被内容页面遮挡。如图一所示,其实自己是想实现图二:

疑惑:父页面如何与内容页面传递数据?

 

图一

                 图二

4.问题描述:一个view有诸多button,可不可以通过一个函数判断点击的是哪一个button?并获取其id

解决措施

//on中参数的含义依次为事件、选择器、参数、方法,其中选择器与参数为可选项

mui('.mui-content').on('tap','body',function(){

   alert(this.id);// (根据id判断是哪一个button)

})

总结:mui中的方法都是封装的jquery,所以自己还得从jquery着手,因为好多方法不会用,不知道参数的含义。

 

5.问题描述:由于index页面的顶部导航栏与分类页面的头顶部导航栏相同,header和content在不同的webview中。我想提升代码的复用性(即多个content页面均使用同一个header页面),如何解决?Mui能够做到吗?

解决措施:使用webview模式选项卡。何谓webview模式?其实就是每个选项卡内容都是一个独立的webview,彼此之间互相独立、互不影响; 对于较为复杂的业务系统,推荐使用该模式。另外,基于webview模式的选项卡,支持原生加速的下拉刷新。如下图:

 

感触:其实很多问题都可以从Hello mui demo 中得到答案。自己要经常操作以求更加熟悉。

6.问题描述:见下

解决措施:见上。

由此转入Angular框架 

这篇关于跨平台移动APP开发进阶(三):hbuilder+mui mobile app 开发心酸路的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/715685

相关文章

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器(Decorator)是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错?是不是同时用了.properties和.yml?二、换个位置配置就失效?搞清楚加

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》:本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于Python开发Windows屏幕控制工具

《基于Python开发Windows屏幕控制工具》在数字化办公时代,屏幕管理已成为提升工作效率和保护眼睛健康的重要环节,本文将分享一个基于Python和PySide6开发的Windows屏幕控制工具,... 目录概述功能亮点界面展示实现步骤详解1. 环境准备2. 亮度控制模块3. 息屏功能实现4. 息屏时间

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,:本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件