当前位置: 首页 > Web前端 > HTML5

[mui.js]模拟手机浏览器端的webview,可以和app代码统一

时间:2023-04-05 01:16:45 HTML5

mui-plus-webview是一个基于mui的网页模拟webview展开模拟触发plusReady事件主要是使用iframe模拟webview和mui.js中用到的一些plus方法/属性演示地址真实项目地址一个网站手机下载地址iosversion,安卓下载地址,刚开始写项目的时候还不会Vue(不打算发布成网页版),写完项目会用Vue,不过打算辞职了,没时间用vue统一布局代码或者重新设计一套web版,所以在浏览器端用iframe模拟webview。另外需要说明一下,上面平台的pc版不是我写的。到那家公司的时候,pc版已经开发好了(因为pc版的代码实在是太...所以,我要澄清一下)(emm...如果不知道pc版的网址是多少是,就当我没说上面)演示地址GitHubPage的适用场景以app代码开头,不建议在手机端使用iframe将时间转换为浏览器端代码。需要在浏览器端查看webview效果。方法是在入口页面导入./js/plus.js文件。请注意,需要导入mui.js。mui.css(js是因为使用了mui.extend,mui.type,mui.slice等方法)(css是因为使用了muimask等样式)iosweb端使用这个库时,iframehtml、body、.mui-content的高度设置为100%,ifrme容器的z-index基数为500(设置"webview"的zindex其实就是设置iframe的z-indexcontainer)(不过设置样式的配置跟plus有文档就好了,有相关代码可以转换)其他plus代码模拟实现的说明见README.md,添加的mui方法见README.mdmui.prop_attr//设置或返回目标元素属性值的“自包含/自定义”。//最后一个参数接受目标//使用名称设置或获取属性//获取属性:varsomeAttr=mui.prop_attr('data-attrname',document.body);varbodyId=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)//使用对象设置属性:mui.prop_attr({'data-attrname':'someValue',id:'content',className:'mui-hiddenmui-ios',},document.body);参考jQuery的attr/prop文档github地址说了这么多,干货终于来了↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓