[mui.js]手机普通浏览器端webview模拟实现,可与app统一代码

mui-plus-webview

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

模拟触发了plusReady事件

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

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

demo地址

• 真实项目地址

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

实现功能

见README.md说明

其他plus代码模拟实现

见README.md说明

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

gitHub地址

说了这么多,干货终于来了

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

相信你不会吝啬你的小星星对吧