我之前做过jquery mobile的开发，那还是前年的事情

在jquery mobile中，由于页面是存储在div[data-role=page]的dom中（jqmobile通过对data-role的dom分析解释app的页面布局和切换，不会每次都加载完整的html页面，所以js摆放位置需要尤其注意，不能再head当中，因为不会去读head）

<body>

<div data-role="page">

  <div data-role="header">

    <h1>欢迎来到我的主页</h1>

  </div>

  <div data-role="main" class="ui-content">

    <p>我现在是一个移动端开发者!!</p>

  </div>

  <div data-role="footer">

    <h1>底部文本</h1>

  </div>

</div>

</body>

所以，jqmobile可以在切换页面中轻松的判断页面事件，使用如下代码，有兴趣可以看看：

 $(document).on("pageinit",function(){

   alert("pageinit 事件触发!")

 });

其中“pageinit”只是其中一种事件罢了，还有pageshow,pagebeforeshow,pagecreate,pagehide,pagechange,pageload等等的方法来判断页面的事件，详见jquery mobile事件

但是不巧的是，我在mui的webview中并没有看到这样的方法判断事件（本身mui和jqmobile不同，jqmobile是spa单页调用，mui是真正的在页面中跳转的），所以当你在页面切换的时候不能根据页面变化来触发一些反复调用的js方法，因为每一次都在新的html中（重复调用的页面会在缓存中，这也是为什么返回后不会重新执行html文件下的js方法原因，真蛋疼）

关于spa和html原生跳转自行百度

比如：我现在编辑了个人资料，返回首页时候，由于mui.back并不会重新生成html（事实上我们也不希望重新生成的），那么js方法不会重新执行的，而我在index中有一个刷新用户信息的方法也不能用了

最初，我想我可以在返回前，保存用户资料的时候触发这个方法，可是你会发现这时因为将要返回到的页面的dom根本还不存在，你刷新个毛啊！(・∀・ ？(・∀・ ？(・∀・ ？)

最后，查找mui，dcloud的官方文档，决定采用自定义事件fire()+webview()来解决，代码应该在编辑页面，当编辑保存后页面$.back()时候触发，mui.init()中有beforeback参数可以使用，在此之前先看看关于$.back()的官网解释：

mui框架将窗口关闭功能封装在mui.back方法中，具体执行逻辑是：

  • 若当前webview为预加载页面，则hide当前webview；
  • 否则，close当前webview；

在mui框架中，有三种操作会触发页面关闭（执行mui.back方法）：

  • 点击包含.mui-action-back类的控件
  • 在屏幕内，向右快速滑动
  • Android手机按下back按键

代码如下：

mui.init({

                    swipeBack: true,

                    beforeback: function() {

                        //获得index界面的webview(缓存中)

                        var view = plus.webview.getWebviewById('index');

                        //updateHeadInfo为事件，不是方法！

                        mui.fire(view, 'updateHeadInfo');

                        //返回true，继续页面关闭逻辑

                        return true;

                    }

                });

返回到目标页面时，这个事件触发的方法已经被执行了

var update_head_info = function() {

                    alert("sss");//测试

                }

window.addEventListener("updateHeadInfo",update_head_info);//添加自定义事件，其他页面调用

注意：addEventlEListener的第二参数传入的是方法(函数)的变量名，update_head_info，后面不能添加括号，否则没有触发“updateHeadInfo”就会立即执行（也就是页面一载入就立马执行，这会很让人费解)

当然，before的代码也可以放到，提交表单成功之后，或者任何想要的时候，并不一定需要放在beforeback发生时

mui开发app之自定义事件以更新其他页内容的更多相关文章

  1. mui开发app之cropper裁剪后上传头像的实现

    在大多数app项目中,都需要对用户头像的上传,之前做web开发的时候,我主要是通过input type=file的标签实现的,上传后,使用php对图片进行裁剪,这种方式比较传统简单. 此次app开发中 ...

  2. mui开发app前言（一）

    dcloud mui开发app前言 大一那会就听说html5快要发布了,前景无量,厉害到能写操作系统==|||(什么???蛤?) 似乎html5标准还没正式发布那会,使用hybrid模式开发app已经 ...

  3. mui开发app之js将base64转图片文件

    之前我已经做过一个利用cropper裁剪并且制作头像的功能.如何在mui app中实现相册或相机获取图片后裁剪做头像请看另一篇博客:mui开发app之cropper裁剪后上传头像的实现 但是当时裁剪后 ...

  4. 利用 MUI开发app， 如何实现侧滑菜单及其主体部分上下滑动

     利用mui开发APP 之侧滑菜单主内容滚动问题 MUI作为开发者常用的框架之一,其号称最接近原生APP体验的高性能前端框架.因此利用mui开发移动APP,可以为开发者提供很大的便利和接近原生的体验. ...

  5. MUI开发APP，scroll组件，运用到区域滚动

    最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部.         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...

  6. mui开发app之webview是什么

    WebView(网络视图)能加载显示网页,可以将其视为一个浏览器,webview被封装在html5+,plus对象中,底层由java,OC实现. 先来谈谈我对webview的理解: 使用mui开发的a ...

  7. mui开发app之联网应用传输数据

    手机的app分为,在线和单机,在线就是类似于C/S模式,能与服务器与他人共享数据的程序,单机就是在没有网络下可以玩转的app. 目前互联网盛行的时代,99%的程序都是联网环境下工作的.那么如何开发本地 ...

  8. mui开发app之html5+,5+Runtime,5+sdk,native.js

    说说几个名词 html5:目前最新的html规范,w3c联盟制定,手机端主要由webkit实现规范,对用户来说就是浏览器实现了它 html5+:所谓"+",扩充了html5原本没有 ...

  9. mui开发app之多图压缩与上传（仿qq空间说说发表）

    欲实现效果图 提出需求点: 用户可自由添加删除替换多张图片,并且显示相应缩略图,限制为8张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...

随机推荐

  1. Java中的值传递

    1.先比较下字符串的比较 == 代表全等于 值和地址(存放地址) 全部相等于. equals 值等于== 和 equals的区别 列如下面的 如果name1==name2是等于的 然而name1==n ...

  2. App对接支付宝移动支付功能

    前段时间看了下app对接支付宝移动支付的功能,并自己总结了下支付宝移动支付的实现流程 一．申请流程          前提是已有现成的应用. 1.  申请地址            https://b ...

  3. mac 下 wget 安装

    1.下载 wget 压缩包,wget 下载地址:ftp://ftp.gnu.org/gnu/wget/ 2.make && make install 3.如果提示 permission ...

  4. 用Qemu搭建aarch32学习环境

    作者信息 作者: 彭东林 邮箱: pengdonglin137@163.com QQ: 405728433 软件平台 主机: Ubuntu14.04 64位版本 模拟器:Qemu-2.8.0 Linu ...

  5. HNOI（湖南省选试题）——永无乡

    今天写了一道十分巧妙的数据结构题---永无乡 (看的题解......) 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 ...

  6. Untiy文档总结（1）-Profiling

    这段时间上班了,不是什么大公司,虽说很闲但是不能断了学习,就开始看优化有关的文档,虽说自己英语渣的要死,但也要读下去,逼着自己翻译完了,里面有抄Unity圣典的,但自己是看Unity5.5文档写的,只 ...

  7. iOS 组件化

    iOS 组件化介绍 随着应用需求逐步迭代,应用的代码体积将会越来越大,为了更好的管理应用工程,我们开始借助CocoaPods版本管理工具对原有应用工程进行拆分.但是仅仅完成代码拆分还不足以解决业务之间 ...

  8. Struts2.5简单使用入门

    今天学了Struts2.5最新版的,老师在黑板上讲的很是简单,也很是容易,简单的就实现了.可是课下让我们自己弄,自己无论如何都无法运行成功,一直提示404.偶然间灵机一动,改了一下那个文件就好了.希望 ...

  9. 疑问：Spring中构造器、init-method、@PostConstruct、afterPropertiesSet孰先孰后，自动注入发生时间

    问题:今天想写一个通用点的方法,根据传入的参数的类型(clazz对象),判断使用哪个mapper来插入mysql数据库. 下面是我的写法: public interface BizNeeqCommon ...

  10. Linux ubuntu 安装gcc、g++、 pcre、zlib、ssl、nginx和该内存不能为written解决方法

    1.楼主也是第一次接触Linux  如果有错误的地方还请各位朋友指出.... 2.gcc.g++依赖库:sudo apt-get install build-essential,sudoapt-get ...