我之前做过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. H5 拖放

    HTML 5 拖放 HTML5 音频 HTML5 画布 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中, ...

  2. NIO（一、概述）

    离上次发布文章已过去好几个月,说好的积累和分享都烟消云散.似乎忙碌从未终止过,加班成为常态,甚至阅读都需要更琐碎的时间. 目录 NIO(一.概述) NIO(二.Buffer) 概述 JavaNIO(n ...

  3. Android自学反思总结(下)

    后来陆陆续续过了大半个月,导员给找了一个Udacity在线学习的Android开发教程,只有一个月的免费学习机会,因此很快开始了叫Sunshine的天气应用的开发,教学视频整体是采用先自己思考并填写某 ...

  4. FastDFS分布文件系统相关资料索引

    FastDFS是为互联网应用量身定做的一套分布式文件存储系统,非常适合用来存储用户图片.视频.文档等文件.对于互联网应用,和其他分布式文件系统相比,优势非常明显.具体情况大家可以看相关的介绍文档,包括 ...

  5. 网关、DNS、路由器区别

    1.首先得区分一下网关和路由器的区别: 网关是一个IP地址.是一个网络连接到另一个网络的"关口". 路由器是一个物理设备.一般局域网的网关就是路由器的IP地址. 2. 网关.DNS ...

  6. dispaly属性，position属性

    position:absolute;绝对定位相对于父元素(父元素设为relative) position:relative;相对定位相对于自己 position:fixed;固定定位相对于浏览器 di ...

  7. 使用TagHelper完成分页步骤

    使用TagHelper完成分页步骤 转载 2016-08-23 11:37:33 1 创建一个MyPageOpion类,用来存储分页信息,比如当前页,栏目总数,页面大小,跳转地址(RouteUrl)等 ...

  8. CF766 E. Mahmoud and a xor trip [预处理][树形dp]

    题解: 二营长!你他娘的意大利炮呢? dp[i][j][0]: 从i,跋涉到以i为根的子树的每一个节点,在第j个数位上一共产生了多少个0. dp[i][j][1]: 从i,跋涉到以i为根的子树的每一个 ...

  9. windows server 定期备份数据库脚本

    将以下文件保存为.bat脚本,在计划任务中添加定时任务运行此脚本即可.脚本中的备份目录,数据库目录和压缩文件目录请自行修改. @echo off rem 当前路径切换到备份数据库目录 cd D:\wa ...

  10. "!function",自执行函数表达式

    如题为自执行函数表达式.在这种情况下,解析器在解析function关键字的时候,会将相应的代码解析成function表达式,而不是function声明.下面2个括弧()都会立即执行 (function ...