我之前做过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. shiro权限控制

    1.1  简介 Apache Shiro是Java的一个安全框架.目前,使用Apache Shiro的人越来越多,因为它相当简单,对比Spring Security,可能没有Spring Securi ...

  2. [译]Selenium Python文档：五、Waits等待

    大多数现代web应用都使用了AJAX技术.当浏览器加载一个页面的时候,该页面内的元素可能在不用的时间间隔内进行加载.这使得元素定位变得比较困难:如果一个元素还没有出现在DOM中,定位函数将会抛出一个E ...

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

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

  4. python编码问题之\"encode\"&\"decode\"

    python encode decode 编码 decode的作用是将其他编码的字符串转换成unicode编码,如str1.decode('gb2312'),表示将gb2312编码的字符串str1转换 ...

  5. [微信小程序]初试——成绩分析小程序问题总结

    文件类型说明 第一次打开微信小程序的开发者工具,就是下面这个样子. 好多已经存在的默认文件 .js .json .wxml .wxss 首先当然要搞懂这些文件都是干什么的 app.js是小程序的脚本代 ...

  6. centos6.5 源码安装 gtk 环境

    解决 No package 'gtk+-2.0′ found问题方法:yum install libgnomeui-devel 执行了上面的,下面的就可以放弃了,yum 大法好 首先 yum 安装下面 ...

  7. 安全超文本传输协议（HTTPS）详解

    一.概念与摘要 HTTPS (Secure Hypertext Transfer Protocol)安全超文本传输协议,是一个安全通信通道,它基于HTTP开发用于在客户计算机和服务器之间交换信息.它使 ...

  8. QConf简要搭建过程

    QConf的组件: ZooKeeper as the server, restore all configurations, so the limit data size of single conf ...

  9. dubbo的简单实现

    一 是什么 一般网站架构随着业务的发展,逻辑越来越复杂,数据量越来越大,交互越来越多,dubbo使前后端分离,完成负载均衡. dubbo架构图 节点角色说明: Provider: 暴露服务的服务提供方 ...

  10. linux命令之查看字符集

    lucifer@abc:~$ locale -a 查看本地字符集lucifer@abc:~$ locale -m 查看所有支持的字符集将文件从gb2312转为utf8iconv -f gb2312 - ...