MIP 技術月報(4月):支持熊掌號登錄;優化頁面懸浮元素

之前由MIP團隊維護的《移動 Web 加速技術月報》從本期開始,正式升級為《MIP 技術月報》,與以往不同的是,《MIP 技術月報》將會與大家分享包含移動加速技術以外的其他移動應用開發的技術,從移動用戶體驗、開發體驗出發來分享 MIP 的更多技術點,技術面也將涉及更廣的范圍。更重要的是,每期會與大家分享 MIP 項目的當月重大技術進展。

本期看點

  • MIP 為開發者提供熊掌號登錄組件。在提升使用 MIP 開發的熊掌號站點用戶登錄體驗的同時,也大幅提升站點登錄功能的接入效率。
  • MIP 頁面滑動時懸浮元素展現優化。用戶上下滑動時隱藏/展現懸浮元素,優化用戶頁面瀏覽體驗。

MIP 頁面支持熊掌號登錄

登錄是移動中最常見的應用場景之一,但也是目前 Web 體驗最不佳的功能點之一,其中有以下原因:

  • 缺少統一封裝,API 不夠友好;
  • 登錄都是同步跳轉,頁面狀態無法保持,體驗不流暢;
  • 每個站點的流程與交互體驗不統一,用戶習慣無法培養。

MIP 熊掌號登錄示例

MIP 團隊針對以上體驗不佳的情況,為開發者提供了 Native Like 體驗的熊掌號登錄組件,用戶在 MIP 中能夠體驗到一致的登錄流程。已經接入百度熊掌號的 MIP 站點,可以快速的使用登錄組件向用戶提供登錄功能。登錄效果示例如下:

登錄示例

如何使用

我們在 Github issue 中記錄了關于熊掌號登錄組件相關的文檔和討論,鏈接如下:

https://github.com/mipengine/mip-extensions/issues/1096

可以通過此文檔查看更多示例與用法:

https://github.com/mipengine/mip-extensions-platform/tree/master/mip-login-xzh

如果對使用熊掌號登錄組件有任何疑問或問題,請在 issue 中進行留言!

MIP 頁面懸浮元素優化,讓用戶瀏覽更沉浸

移動中另一個重要的體驗特性是沉浸式瀏覽,經過 MIP 團隊調研,目前移動 Web 頁面中存在大量頭部與底部的懸浮功能,開發者使用懸浮的初衷是為用戶提供更便捷的其他功能入口,但大多數站點并沒有考慮懸浮功能與沉浸式瀏覽體驗的沖突。

懸浮優化示例

MIP 團隊為此提供了通用的頁面懸浮元素優化,開發者可通過簡單配置即可完成頁面懸浮元素的體驗優化,用戶向上滑動閱讀頁面時,頭部與底部懸浮元素可被隱藏,露出更多頁面閱讀面積,讓用戶瀏覽更加沉浸!

具體效果示例如下:

懸浮優化示例

如何使用

MIP 團隊在原來懸浮組件文檔基礎上,新增了懸浮配置項。可以通過以下代碼配置懸浮元素自動隱藏。

<mip-fixed type="top" data-slide>頂部懸浮 - 向上滑動隱藏
</mip-fixed>

更多內容可查看:

https://www.mipengine.org/examples/mip-extensions/mip-fixed.html

下期預告

全站 MIP 化技術方案即將對外發布

移動 Web 的體驗問題從來不是開發一個頁面就能解決的,2018 年以來,MIP 團隊從聚焦移動頁面的速度轉向聚焦整個移動站的整體體驗。MIP 團隊希望通過一系列的技術革新,讓開發者不僅擁有的是快速、流暢的單個移動 Web 頁面,更能夠利用 MIP 輕松搭建體驗與性能俱佳的移動網站。

2018年4月,MIP 團隊啟動了全站 MIP 化的技術方案討論與設計,目前已經有內部案例。我們將在不久對外發布這一技術升級,讓大家通過使用 MIP 開發一個完整的站點!

其他技術升級預告:

  • MIP 預渲染技術,讓用戶享受極致的速度體驗
  • MIP 助力熊掌號,讓熊掌號站點更容易地開發MIP

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/535826.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/535826.shtml
英文地址,請注明出處:http://en.pswp.cn/news/535826.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Ubuntu18.04安裝最新版Docker

卸載舊的docker版本apt-get remove docker docker-engine docker.io containerd runc更新軟件列表apt-get update.允許apt命令可以使用HTTPS訪問Docker repositoryapt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common添加Docker…

MIP 問題解決方案大全(2018-06更新)

在 MIP 推出后&#xff0c;我們收到了一些站長的疑問。現將常見問題整理出來&#xff0c;幫助大家了解 MIP 的知識。 一、MIP 認知類問題二、改造前準備三、前端改造&#xff0c;組件使用四、提交生效五、MIPCache六、更多學習資源 一、MIP 認知類問題 1.1 MIP 化的收益是什…

Ubuntu18使用docker快速安裝oracle 11g

1、安裝docker環境&#xff0c;參照Ubuntu18.04安裝最新版Docker 2、下載oracle鏡像docker pull deadok22/docker-oracle-xe-11g 3、下載完成后&#xff0c;啟動oracle鏡像作為容器&#xff1a;docker run -h "oracle" --name "oracle" -d -p 49160:22 -p …

ubuntu新建用戶后,終端下方向鍵和tab鍵不可用的解決方法

問題描述&#xff1a; 用adduser命令新增了用戶之后&#xff0c;發現在該新建用戶下的命令終端&#xff0c;使用方向鍵無法調出歷史命令&#xff0c;同時tab鍵也無法補全輸入命令。 問題解決&#xff1a; 在/etc/passwd中發現&#xff0c;該新建用戶使用的shell為/bin/sh&…

移動Web體驗月報(6月):MIP 核心代碼升級,增加基于 Vue 開發能力

原創&#xff1a; BrilliantOpenWeb OpenWeb開發者 7月6日 作者 | Brilliant Open Web 團隊 編輯 | Daisy 升級與重要進展 歷時2個月&#xff0c;MIP團隊完成了核心代碼重構與核心功能升級&#xff0c;MIP新版本核心代碼&#xff08;V2&#xff09;在實現向下完全兼容當前代…

騰訊云ubuntu18安裝圖形化界面

0、apt-get update 1、sudo apt-get install xinit 2、sudo apt-get install gdm3 3、apt-get install ubuntu-desktop

2017 到 2018,PWA 技術到底經歷了什么

高磊 OpenWeb開發者 1周前 在 GMTC 2018 全球大前端會議舉辦期間&#xff0c;高磊擔任主題演講嘉賓&#xff0c;并擔任 PWA 專場出品人。作為有近 10 年 Web 前端技術開發、管理經驗的開發者&#xff0c;高磊一直關注著 PWA 技術的發展。 2017年 6月10日&#xff0c;GMTC 201…

CentrOS7靜默安裝oracle11g

最近要做一個用ogg實現oracle到kafka的增量數據實時同步&#xff0c;但是Oracle就讓我裝了好久&#xff0c;這里來記錄一下安裝oracle過程。 1.建立swap分區 創建充當swap分區的文件&#xff0c;文件大小就是要增加的swap大小&#xff0c;of是文件位置&#xff0c;bs為單位&a…

MIP 擴展組件開發手冊

本手冊將向你展示&#xff0c;完成一個 MIP 擴展組件的開發需要做哪些事情。在此之前&#xff0c;我們假定你&#xff1a; 有一定的 HTML、CSS 和 JavaScript 基礎 了解 AMD 的模塊管理方式 熟悉版本管理工具 Git 有自己的 GitHub 賬號 懂得使用 npm 步驟 通常情況下&am…

Zookeeper分布式安裝部署

本篇博客將主要介紹如何進行Zookeeper的分布式安裝部署 集群規劃 在Carlota1、Carlota2、Carlota3三臺機器上進行部署。 安裝部署 1、解壓安裝 上傳壓縮文件apache-zookeeper-3.6.1-bin.tar.gz到三臺機器上解壓文件tar -zxvf apache-zookeeper-3.6.1-bin.tar.gz改個名&…

MIP 網站中熊掌號登錄

標題內容類型通用支持布局responsive,fixed-height,fill,container,fixed所需腳本https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js https://c.mipcdn.com/static/v1/mip-login-xzh/mip-login-xzh.js 注意&#xff1a;使用該組件必須在引用本組件鏈接前引用 <…

日常問題——hadoop 任務運行到running job就卡住了 INFO mapreduce.Job: Running job: job_1595222530661_0003

執行mapreduce沒報錯&#xff0c;可是任務運行到running job就卡住在 INFO mapreduce.Job: Running job: job_1595222530661_0003 解決方法 mapred-site.xml下將 <property><name>mapreduce.framework.name</name><value>yarn</value> </pr…

MIP 支付組件,支付流程:

MIP 支付組件&#xff0c;支付流程&#xff1a; 標題內容類型通用支持布局responsive,fixed-height,fill,container,fixed所需腳本https://c.mipcdn.com/static/v1/mip-simple-pay/mip-simple-pay.js,https://c.mipcdn.com/static/v1/mip-login-xzh/mip-login-xzh.js 注意&…

代碼實現——MapReduce統計單詞出現次數

需求 對以下txt文檔進行單詞出現次數統計&#xff08;txt文檔在/Users/lizhengi/test/input/目錄下&#xff09; hadoop take spring spark hadoop hdfs mapreduce take Tomcat tomcat kafka kafka flume flume hive實現 1、新建Maven工程&#xff0c;pom.xml依賴如下 <…

MIP個性化組件提交規范

MIP個性化組件一般用來實現前后端數據傳輸或特殊的交互效果&#xff0c;由廣大開發者貢獻。出于性能、可維護性等方面的考慮&#xff0c;開發者在新增組件或升級組件時&#xff0c;請遵守以下規范。 規范中的必須&#xff08;MUST&#xff09;&#xff0c;禁止&#xff08;MUS…

jar包在Hadoop集群上測試(MapReduce)

本片使用MapReduce——統計輸出給定的文本文檔每一個單詞出現的總次數的案例進行&#xff0c;jar包在集群上測試 1、添加打包插件依賴 <build><plugins><plugin><artifactId>maven-compiler-plugin</artifactId><version>3.6.2</versio…

代碼實現——MapReduce實現Hadoop序列化

簡單介紹 1、什么是序列化 序列化&#xff1a;把內存中的對象&#xff0c;轉換成字節序列(或其他數據傳輸協議)以便于存儲到磁盤(持久化)和網絡傳輸。反序列化&#xff1a;將收到字節序列(或其他數據傳輸協議)或者是磁盤的持久化數據&#xff0c;轉換成內存中的對象。 2、 為…

日常問題——hadoop啟動后發現namenode沒有啟動,但是排除了格式化過度的問題

hadoop啟動后發現namenode沒有啟動&#xff0c;網上說的格式化過度的問題我是沒有的&#xff0c;因為我只格式化過一次。之后查看日志 vim /opt/hadoop/logs/namenode對應的log文件 發現 2020-03-03 23:16:21,868 INFO org.apache.hadoop.metrics2.impl.MetricsSystemImpl: Na…

Zookeeper3.6.1常用的Shell命令

1、客戶端連接 zkCli.sh zkCli.sh -server host:port2、顯示節點信息 -s狀態 -w監聽器 -R遞歸 ls [-s] [-w] [-R] path3、創建節點 -s加序列號 -e臨時節點 create [-s] [-e] path [data]4、獲取節點值 -s狀態 -w監聽器 get [-s] [-w] path5、設置節點值 -s狀態 set [-s] […

CentOS7下MySQL5.7的安裝

1、下載MySQL 安裝包&#xff1a; wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpmyum -y localinstall mysql57-community-release-el7-11.noarch.rpm 2、在線安裝MySQL yum -y install mysql-community-server 3、啟動mysql 服務 systemct…