菜鸡
菜鸡
  • 发布:2018-04-16 14:22
  • 更新:2018-04-16 14:22
  • 阅读:4595

手机普通浏览器端webview模拟实现,可与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的文档来就好,有相关代码进行转换)

实现功能

见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地址

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

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

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

4 关注 分享
4***@qq.com Trust lhyh Johnson

要回复文章请先登录注册

lhyh

lhyh

鸡哥牛逼
2018-06-04 13:27
追梦随想

追梦随想

大佬厉害了
2018-04-16 14:57
菜鸡

菜鸡 (作者)

回复 4***@qq.com :
那还不如用vue
2018-04-16 14:45
4***@qq.com

4***@qq.com

不错,我也在找这类的方法,最后我是自己重新写了一套方法,不过我不是使用iframe进行处理的,而是通过jq的load方式来加载子页面
2018-04-16 14:38