我之前做过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. web从入门开始（7）-----css

    CSS的语法格式 l  一个CSS规则,有"选择器"和"格式声明语句"构成 l  选择器:就是选择HTML标记,换句话说就是给那个HTML标记加样式 l  格式 ...

  2. Tcl与Design Compiler （三）——DC综合的流程

    本文属于原创手打(有参考文献),如果有错,欢迎留言更正:此外,转载请标明出处 http://www.cnblogs.com/IClearner/  ,作者:IC_learner 1.基本流程概述 首先 ...

  3. 实验楼-4-Linux文件权限

    $ ls -l /*查看文件权限*/ 每一行格式意思: <文件类型和权限 链接数 所有者 所在用户组 文件大小 上次修改时间 文件名> 文件类型和权限如下图: 解释: 软连接:类似于win ...

  4. express创建网站

    Express 在初始化一个项目的时候需要指定模板引擎,默认支持Jade和ejs. 这里我们使用ejs模板引擎:(关于ejs的介绍可以先从百科里面了解一个大概)EJS是一个JavaScript模板库, ...

  5. 车大棒浅谈jQuery源码（二）

    前言 本来只是一个自己学习jQuery笔记的简单分享,没想到获得这么多人赏识.我自己也是傻呵呵的一脸迷茫,感觉到受宠若惊. 不过还是有人向批判我的文章说,这是基本知识点,完全跟jQuery源码沾不上边 ...

  6. 机器学习：python中如何使用朴素贝叶斯算法

    这里再重复一下标题为什么是"使用"而不是"实现": 首先,专业人士提供的算法比我们自己写的算法无论是效率还是正确率上都要高. 其次,对于数学不好的人来说,为了实 ...

  7. 光环国际的PRINCE2培训是怎么上课的？

    一.面授班级: 基础级:3天知识精讲(含案例分享+现场演练) 上课时间:上午9:00-12:00,下午1:30-4:30分 考试时间:第3天课程结束后5:30-6:30分 1 个小时闭卷考试   专业 ...

  8. Linux 搭建svn版本库

    一.安装svn服务器端yum install subversion      从镜像下载安装svn服务器端 如果后面执行“svnadmin create /usr/local/svn/sunny”提示 ...

  9. centOS下调整swap

    [root@localhost /]# mkdir swap [root@localhost /]# cd swap [root@localhost swap]# dd if=/dev/zero of ...

  10. （转）JAVA多线程和并发基础面试问答

    JAVA多线程和并发基础面试问答 原文链接:http://ifeve.com/java-multi-threading-concurrency-interview-questions-with-ans ...