Skip to content

Latest commit

 

History

History
207 lines (170 loc) · 16.5 KB

README.md

File metadata and controls

207 lines (170 loc) · 16.5 KB
Raw

时过境迁,本项目已经跟不上时代,请使用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地址

适用场景

  • 开始是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的文档来就好,有相关代码进行转换)

实现功能

其他plus代码模拟实现

checked状态表示调用有效果

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

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

添加的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文档