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

說了這麼多,乾貨終於來了

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

相信你不會吝嗇你的小星星對吧