时过境迁,本项目已经跟不上时代,请使用uni-app开发代替mui开发

mui-plus-webview

一个基于mui的网页端模拟webview拓展

模拟触发了plusReady事件

主要利用iframe,对webview进行模拟

以及一些mui.js中使用到的plus方法/属性的模拟

demo地址

• 真实项目地址

  • 某网站手机版
  • ios下载地址,
  • 安卓下载地址,
  • 开始写项目的时候不会vue,
  • 快写完项目会vue了,但是打算离职了,
  • 没什么时间用vue统一布局代码或者重新开发一套web版了,
  • 所以用iframe模拟实现了浏览器端的webview,
  • 另外,重点说明上面的平台pc版不是我写的,
  • 我到那家公司的时候,pc版就已经开发完了
  • (因为pc版的代码实在是太...所以,我必须要澄清下)
  • (不知道pc版网址是什么的话,当我没说上面的话)

• demo地址

  • GitHub Page

适用场景

• 开始是app代码,没时间转换为浏览器端代码的

• 需要在浏览器端查看webview效果的

• 其实不太建议在手机端使用iframe

使用方法

• 在入口页面引入./js/plus.js文件即可

注意事项

• 需要引入mui.js,mui.css

  (js方面是因为使用了mui.extend,mui.type,mui.slice等方法)

  (css方面是因为使用了mui的mask等样式)

• ios的web端使用此库时,会把iframe的html,body,.mui-content的高度设置为100%

• ifrme容器的z-index的基数为500

  (设置"webview"的zindex其实是设置iframe容器的z-index)

  (但是设置样式的配置按照plus的文档来就好,有相关代码进行转换)

实现功能

• webview(动画相关待完成)
  • 方法：
    • all: 获取所有Webview窗口
    • close: 关闭Webview窗口
    • create: 创建新的Webview窗口
    • currentWebview: 获取当前窗口的WebviewObject对象
    • getDisplayWebview: 获取屏幕所有可视的Webview窗口
    • getWebviewById: 查找指定标识的WebviewObject窗口
    • getLaunchWebview: 获取应用首页WebviewObject窗口对象
    • getSecondWebview: 获取应用第二个首页WebviewObject窗口对象：
    • getTopWebview: 获取应用显示栈顶的WebviewObject窗口对象
    • hide: 隐藏Webview窗口
    • open: 创建并打开Webview窗口
    • prefetchURL: 预载网络页面
    • prefetchURLs: 预载网络页面（多个地址）
    • show: 显示Webview窗口
    • startAnimation: Webview窗口组合动画
    • defaultHardwareAccelerated: 获取Webview默认是否开启硬件加速
  • WebviewObject
    • 属性：
      • id: Webview窗口的标识
    • 方法：
      • addEventListener: 添加事件监听器
      • append: 在Webview窗口中添加子窗口
      • appendJsFile: 添加Webview窗口预加载js文件
      • animate: Webview窗口内容动画
      • back: 后退到上次加载的页面
      • beginPullToRefresh: 开始Webview窗口的下拉刷新
      • canBack: 查询Webview窗口是否可后退
      • canForward: 查询Webview窗口是否可前进
      • checkRenderedContent: 检测Webview窗口是否渲染完成
      • children: 获取Webview窗口的所有子Webview窗口
      • clear: 清空原生Webview窗口加载的内容
      • close: 关闭Webview窗口
      • drag: 设置Webview窗口的滑屏操作手势
      • draw: 截屏绘制
      • endPullToRefresh: 结束Webview窗口的下拉刷新
      • evalJS: 在Webview窗口中执行JS脚本
      • forward: 前进到上次加载的页面
      • getFavoriteOptions: 获取Webview窗口的收藏参数
      • getShareOptions: 获取Webview窗口的分享参数
      • getStyle: 获取Webview窗口的样式
      • getSubNViews: 获取Webview窗口的原生子View控件对象
      • getTitle: 获取Webview窗口加载HTML页面的标题
      • getTitleNView: 获取Webview窗口的标题栏控件对象
      • getURL: 获取Webview窗口加载HTML页面的地址
      • hide: 隐藏Webview窗口
      • interceptTouchEvent: 是否拦截Webview窗口的触屏事件
      • isHardwareAccelerated: 查询Webview窗口是否开启硬件加速
      • isVisible: 查询Webview窗口是否可见
      • listenResourceLoading: 监听页面开始加载资源
      • loadData: 加载新HTML数据
      • loadURL: 加载新URL页面
      • nativeInstanceObject: 获取Webview窗口对象的原生（Native.JS）实例对象
      • opened: 获取在当前Webview窗口中创建的所有窗口
      • opener: 获取当前Webview窗口的创建者
      • overrideResourceRequest: 拦截Webview窗口的资源加载
      • overrideUrlLoading: 拦截Webview窗口的URL请求
      • parent: 获取当前Webview窗口的父窗口
      • reload: 重新加载Webview窗口显示的HTML页面
      • resetBounce: 重置Webview窗口的回弹位置
      • restore: 恢复Webview控件显示内容
      • remove: 移除子Webview窗口
      • removeEventListener: 移除Webview窗口事件监听器
      • removeFromParent: 从父窗口中移除
      • setBounce: 设置Webview窗口的回弹效果
      • setBlockNetworkImage: 设置Webview窗口是否阻塞加载页面中使用的网络图片
      • setContentVisible: 设置HTML内容是否可见
      • setFavoriteOptions: 设置Webview窗口的收藏参数
      • setPullToRefresh: 设置Webview窗口的下拉刷新效果
      • setRenderedEventOptions: 设置Webview窗口rendered事件参数
      • setStyle: 设置Webview窗口的样式
      • setShareOptions: 设置Webview窗口的分享参数
      • setJsFile: 设置预加载的JS文件
      • setCssFile: 设置预加载的CSS文件
      • setCssText: 设置预加载的CSS内容
      • setVisible: 设置Webview窗口是否可见
      • setFixBottom: 设置Webview窗口底部修复区域高度
      • show: 显示Webview窗口
      • showBehind: 在指定Webview窗口后显示
      • stop: 停止加载HTML页面内容
      • updateSubNViews: 更新Webview窗口的原生子View控件对象
    • 事件：
      • onclose: Webview窗口关闭事件
      • onerror: Webview窗口错误事件
      • onloaded: Webview窗口页面加载完成事件
      • onloading: Webview窗口页面开始加载事件

其他plus代码模拟实现

checked状态表示调用有效果

否则表示能调用,但无效果(空操作)

对未列出的属性/方法等进行调用将会返回undefined

• device

  • 方法：
  • device: 拨打电话

• key

  • 方法：
  • addEventListener: 添加按键事件监听器
  • removeEventListener: 移除按键事件监听器

• runtime

  • 属性：
  • appid: 当前应用的APPID
  • 方法：
  • quit: 退出客户端程序( 表现为打开个空页面 )

• nativeUI

  • 方法：
  • closeWaiting: 关闭系统等待对话框
  • showWaiting: 显示系统等待对话框

• navigator

  • 方法：
  • closeSplashscreen: 关闭应用启动界面

• net

  • 构造：
  • XMLHttpRequest(): 创建一个XMLHttpRequest 对象，对象创建时不触发任何时间和网络请求，需和open，send方法配合使用。

添加的mui方法

• mui.prop_attr

  // 设置或返回目标元素的"自带/自定义"属性值。
  // 最后一个参数接受的是target
  // 使用name设置或获取属性
  // 获取属性:
  var someAttr = mui.prop_attr('data-attrname', document.body);
  var bodyId = mui.prop_attr('id', document.body);
  // 设置属性:
  mui.prop_attr('data-attrname', 'someValue', document.body)
  mui.prop_attr('id', 'content', document.body)
  mui.prop_attr('className', 'mui-hidden', document.body)
  // 使用object设置属性:
  mui.prop_attr({
    'data-attrname':'someValue',
    id:'content',
    className:'mui-hidden mui-ios',
  }, document.body);

  可参考jQuery的attr/prop文档