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

coordinate35 发布于2019-08-05 13:38 / 1545人阅读

摘要：最后一个参数接受的是使用设置或获取属性获取属性设置属性使用设置属性可参考的文档地址说了这么多干货终于来了相信你不会吝啬你的小星星对吧

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

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

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

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

云服务器私有云 html实现手机端 webrtc 浏览器和手机端连接 js折叠手机端代码的手机端js购物车代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/57483.html

开源中国专访：Chameleon原理首发，其它跨多端统一框架都是假的？

摘要：中国互联网络信息中心发布的中国互联网络发展状况统计报告显示，截至年月，我国网民规模达亿人，微信月活亿支付宝月活亿百度月活亿另一方面，中国手机占智能手机整体的比例超过，月活约亿。在年末正式发布了面向未来的跨端的。开源中国专访：Chameleon原理首发，其它跨多端统一框架都是假的？原创：嘉宾-张楠开源中国以往我们说某一功能跨多端，往往是指在诸如 PC、移动等不同类型的设备之...

GraphQuery 2019-08-23 15:29 评论0 收藏0
【quickhybrid】H5和原生的职责划分

摘要：前言在实现后，前端网页与原生的交互已经通了，接下来就要开始规划，明确需要提供哪一些功能来供前端调用。譬如封装过一个下拉刷新组件，基本别人基于这个组件来开发，列表的代码几乎是千篇一律。前言在JSBridge实现后，前端网页与原生的交互已经通了，接下来就要开始规划API，明确需要提供哪一些功能来供前端调用。但是在这之前，还有一点重要工作需要做：明确H5与Native的职责划分，确定...

JouyPub 2019-06-25 16:34 评论0 收藏0
【quickhybrid】H5和原生的职责划分

摘要：前言在实现后，前端网页与原生的交互已经通了，接下来就要开始规划，明确需要提供哪一些功能来供前端调用。譬如封装过一个下拉刷新组件，基本别人基于这个组件来开发，列表的代码几乎是千篇一律。前言在JSBridge实现后，前端网页与原生的交互已经通了，接下来就要开始规划API，明确需要提供哪一些功能来供前端调用。但是在这之前，还有一点重要工作需要做：明确H5与Native的职责划分，确定...

不知名网友 2019-06-25 11:51 评论0 收藏0
MUI使用总结

摘要：预加载自定义事件第三方扩展插件涉及的，除了，其它所有手机浏览器及浏览器均无法使用，目前主要包括语音输入事件相关注意浏览器没有事件事件相关的，手机端浏览器均可使用端模拟手机浏览器也可以正常使用。最近项目中需要使用MUI做一个视频播放的小功能。我就花时间研究了一下MUI。 MUI是一个使用JavaScript开发Android和IOS应用的前端框架。这篇文章将以知识树的形式对MUI的使用...

elliott_hu 2019-08-23 14:48 评论0 收藏0
webpack4+vue实现多页面,结合Hbuilder快速开发APP

摘要：前言多页面应用于结构较于简单的页面因为简答的页面使用又过于麻烦本脚手架出于这样的场景被开发出来使用脚手架搭配也同样可以快速使用开发安卓和本文最大特点多页面跨域代理移动端调试转换项目地址使用手册是一个多页面脚手架工具结合可以快速开发安卓与苹果前言多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来. 使用脚手架搭配Hbuilder...

jayce 2019-08-05 14:06 评论0 收藏0