移动Web体验月报(6月):MIP 核心代码升级,增加基于 Vue 开发能力

原创: BrilliantOpenWeb OpenWeb开发者 7月6日

作者 | Brilliant Open Web 团队
编辑 | Daisy

升级与重要进展

历时2个月,MIP团队完成了核心代码重构与核心功能升级,MIP新版本核心代码(V2)在实现向下完全兼容当前代码(V1)的同时,也提供了新的能力,其中重要的几项是:

  • 基于 Vue 的新组件开发方式,使组件开发更加便捷高效。
  • 新增多页数据共享机制,提供整站沉浸式体验。
  • 提供沙盒机制,屏蔽与限制组件里高能耗、不安全的API调用。
基于 Vue 的开发方式

Vue 本身就是一个非常完善的组件化方案,完全满足 MIP 的诉求的。我们选择Vue开发组件还有其他的一些原因:
- 组件需要支持数据驱动,双向绑定,slot 机制,模版 语法等;
- Vue 社区和生态已经非常成熟,MIP 可以使用 Vue 一摸一样的方式开发组件,开发者介入成本低;
- Vue 组件也有自己完善生命周期;
- 很多 Vue 的组件可以直接拿到 MIP 中使用。

在 Vue 的使用方面,MIP 支持在 MIP-HTML 文档中使用 customElement 标签,customElement 标签和常规的 HTML 标签在用法上完全保持一致,下面是一个简单的 customElement 标签 mip-hello-world 在 MIP-HTML 文档中的用法。

 <mip-hello-world attr1="hello" attr2="world"></mip-hello-world>

注册 MIP 组件的方法如下:

mip.registerVueCustomElement('mip-hello-world',/*** 这里传入的对象就是 Vue 的实例对象(先不要蒙,后面我们会讲为什么会是一个 Vue 的实例)。* 但 MIP 中组件是独立以 Vue 单文件开发发布的,所以注册这一步在 mip-cli 中已经自动完成*/{// 由于 Mip 种的 Vue 不带 compiler,所以其实不支持 template 写法,只支持 render 方法,此处为示意代码template: `<div class="hello-world-wrap">{{ attr1 }}, {{ attr2 }}</div>`,props: ['attr1', 'attr2']}
);

当页面开始渲染的时候,会将 mip-hello-world 渲染为如下 HTML 片段:

<mip-hello-world><div class="hello-world-wrap">hello, world</div>
</mip-hello-world>
多页数据共享机制

熟悉 MIP 的开发者都了解,MIP 是以页面 (Page) 为单位来运行的。开发者通过改造/提交一个个页面,继而被百度收录并展示。

但以页面为单位带来一个问题:当一个 MIP 页面中存在往其他页面跳转的链接时,浏览器会使用加载页面的默认行为来加载新页面。新版本的 MIP 为了解决这个问题,引入了 Page 模块。它的作用是 把多个页面以一定的形式组织起来,让它们互相切换时拥有和单页应用一样的切换效果,而不是浏览器默认的切换效果。
Page 模块实现方案核心主要有以下几点:

  • MIP Page 借助 iframe 实现了页面之间的互相隔离
  • 通过 iframe 和外界的通讯来实现页面之间的通讯和传递数据
  • 为了加载性能考虑,第一个页面维持原状,不放入 iframe 之中。

    在页面结构上,除了首个页面的 DOM 全部保留之外,后续页面均以 iframe 的形式存在。因为 DOM 结构的原因,首个页面等价于外部页面或者外部后续页面等价于内部页面或者内部,这里的“内外”指的就是代码执行于 iframe 的内部或者外部。

    沙盒机制

    MIP 允许开发者通过提交 MIP 组件和写 等方式去写 等方式去写 JS ,但是从性能和代码维护的层面考虑,部分 API 是不应该使用的,比如 alert、confirm 等等,因此我们提供了沙盒机制,去屏蔽和限制这类 API/属性的使用。

目前MIP新版本核心代码处于内测阶段,将会在不久的将来在当前所有MIP站点中应用,为开发者提供更多核心能力,打造体验更好的Web站点。更多MIP代码升级详情,请点击【阅读原文】查看。

6月 AMP 技术一览

<amp-geo> 组件

新增定位信息的封装,让站点在移动设备浏览器中更友好的获取用户定位信息。具体的,可以通过使用 <amp-geo> 获取用户在哪一个国家。组件主要通过识别 IP 的方式来实现区域定位,但没有提供获取更多精确定位信息的功能。

<amp-date-picker>组件

实验版本的日历组件发布,让移动端的日历选择体验更一致。此类组件如果由开发者各自实现,最终提供给用户的体验将会参差不齐。AMP 通过统一的方式提供此类功能组件,将极大提升开发者的开发体验和用户的交互体验。

下月技术预告

极速服务

极速服务是一种基于 Web 技术的全网解决方案,是一个基于 MIP 技术的开发框架。开发者最终开发的极速服务不仅能在百度 App 中提供优质体验,也能在其他任何移动浏览器下使用和访问,并为用户提供良好体验。极速服务的更多细节将会在下期内容中与大家见面。

MIP组件开发详解

如何基于新版本 MIP 核心代码开发一个 MIP 组件,开发过程中都有哪些技巧,下期 MIP 核心代码研发工程师将对此进行深度解读。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/535821.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

腾讯云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…

CentOS7下Hive的安装配置

0、安装前提 安装配置jdk与hadoop安装配置好mysql 1、下载上传 下载hive&#xff0c;地址:http://mirror.bit.edu.cn/apache/hive/上传到指定位置scp apache-hive-3.1.2-bin.tar.gz rootCarlota1:/usr/local/apps 2、解压安装 tar -zxvf apache-hive-3.1.2-bin.tar.gzmv a…

Hive常用的操作命令

Hive常用的交互命令 hive 进入数据库hive -e 不进入hive的交互窗口执行sql语句hive -f 执行sql脚本hive -help 查看帮助 Hive常用数据库的操作命令 show databases;查看hive中的所有数据库use default;用default数据库create database myhive ;创建数据库create database if…

Hive常见的属性配置

配置文件 默认配置文件&#xff1a;hive-default.xml 用户自定义配置文件&#xff1a;hive-site.xml 用户自定义配置会覆盖默认配置。另外&#xff0c;Hive也会读入Hadoop的配置&#xff0c;因为Hive是作为Hadoop的客户端启动的&#xff0c;Hive的配置会覆盖Hadoop的配置。配…

什么是集群(cluster)

1、集群 1.1 什么是集群 简单的说&#xff0c;集群(cluster)就是一组计算机&#xff0c;它们作为一个整体向用户提供一组网络资源。这些单个的计算机系统就是集群的节点(node)。一个理想的集群是&#xff0c;用户从来不会意识到集群系统底层的节点&#xff0c;在他/她们看来&am…

Kafka:集群部署

0、环境准备 安装jdk&#xff0c;配置环境提前安装zookeeper 1、解压安装 将tar压缩包上传tar -zxvf kafka_2.12-2.5.0.tgz 2、配置变量环境 vi /etc/profile #kafka export KAFKA_HOME/usr/local/apps/kafka_2.12-2.5.0 export PATH$PATH:$KAFKA_HOME/binsource /etc/pr…