我之前做过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. Robot Framework 关键字自定义

    关键字自定义有三种方法: 1.在自动化目录中右键-->New User Keyword 2.选中case中的步骤(可选多行),右键-->Extract Keyword 3.自己写模块,自定 ...

  2. mvp架构解析

    MVP现在已经是目前最火的架构,很多的框架都是以MVP为基础,甚至于Google自己都出一个MVP的开源架构.https://github.com/googlesamples/android-arch ...

  3. windows phone 8.1开发:文件选择器FileOpenPicker

    原文出自:http://www.bcmeng.com/fileopenpicker/ 今天小梦给大家分享一下 windows phone 8.1中的文件选择器,和之前的windows phone8的不 ...

  4. KeychainItemWrapper的使用

    KeychinaItemWrapper官方Demo下载地址KeychinaItemWrapper. NSString *identifier = @"xxxxxx";//你要使用的 ...

  5. 什么是https

    我们都知道HTTPS能够加密信息,以免敏感信息被第三方获取.所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议. HTTPS简介 HTTPS其实是有两部分组成:HTTP + SSL ...

  6. 利用echo命令实现倒计时的功能

    echo -e:启用反斜线控制字符的转换        -E:关闭反斜线控制字符的转换(预设如此)        -n:取消行末之换行符号(与 -e 选项下的 \c 字符同意 -e参数下的控制参数 \ ...

  7. JavaScript对象原型写法区别

        体现对象原型分步式写法 //原型分步式写法 //构造函数 function Person(){} //对象原型 Person.prototype.name = 'Avensatr'; Pers ...

  8. 模式识别与机器学习—bagging与boosting

    声明:本文用到的代码均来自于PRTools(http://www.prtools.org)模式识别工具箱,并以matlab软件进行实验. (1)在介绍Bagging和Boosting算法之前,首先要简 ...

  9. JAVA优化建议

    前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用, ...

  10. 在Android中使用am和input命令在实际使用中的注意事项以及小技巧

    在Android使用到am和进行一些操作是非常方便的,比如一个重复自动的操作,具体用来实现一些什么是看个人需求了,接下来说对于am和input的使用. 本文适用于已经大概去了解了am和input的朋友 ...