Skip to content

Commit

Permalink
Merge branch 'master' into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@easonyq
easonyq authored Aug 16, 2018
2 parents 6a57d62 + dbc2679 commit b1c9b05
Show file tree
Hide file tree
Showing 39 changed files with 365 additions and 257 deletions.
12 changes: 6 additions & 6 deletions docs/api/mip-shell.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

* 除了头部，还有底部栏或者侧边栏需要额外渲染和绑定事件。例如下图：

![Bottom Shell](http://boscdn.bpc.baidu.com/assets/mip2/page/bottom-shell-2.png)
![Bottom Shell](https://boscdn.baidu.com/assets/mip2/page/bottom-shell-2.png)

* 开发者需要控制站点的 Shell 配置，修改/禁用/忽略某些选项。

Expand All @@ -28,7 +28,7 @@ export default class MIPShellExample extends window.MIP.builtinComponents.MIPShe

个性化 Shell 的编写规范和普通组件相同，同样在 mip2-extensions 项目中编写，如下：

![MIP Shell Folder](http://boscdn.bpc.baidu.com/assets/mip/page/mip-shell-folder.PNG)
![MIP Shell Folder](https://boscdn.baidu.com/assets/mip/page/mip-shell-folder.PNG)

## 使用个性化 Shell

Expand All @@ -45,7 +45,7 @@ export default class MIPShellExample extends window.MIP.builtinComponents.MIPShe
"header": {
"show": true,
"title": "MIP Index",
"logo": "http://boscdn.bpc.baidu.com/assets/mip/codelab/shell/mashroom.jpg"
"logo": "https://boscdn.baidu.com/assets/mip/codelab/shell/mashroom.jpg"
},
}
}
Expand Down Expand Up @@ -90,7 +90,7 @@ constructor (...args) {

MIP Shell 的头部标题栏右侧的按钮区域会根据 MIP 页面当前所处的状态来决定是否展示关闭按钮。当处于百度搜索结果页中（即拥有 SuperFrame 环境时）会额外渲染一个关闭按钮，点击效果用以通知 SuperFrame 关闭自身，如下图所示：

![Close Button](http://boscdn.bpc.baidu.com/assets/mip2/page/close-button.png)
![Close Button](https://boscdn.baidu.com/assets/mip2/page/close-button.png)

MIP 页面判断当前是否处于 SuperFrame 环境的判断依据是 `window.MIP.standalone` 值等于 `false`。

Expand Down Expand Up @@ -180,7 +180,7 @@ MIP Shell 进行的所谓“初步处理”包括：
setTimeout(() => {
// 通过 exampleUserId 获取到目标用户的标题和 LOGO，并固定按钮
shellConfig.routes[0].meta.header.title = '蓝犀牛搬家'
shellConfig.routes[0].meta.header.logo = 'http://boscdn.bpc.baidu.com/assets/mip2/lanxiniu/logo.png'
shellConfig.routes[0].meta.header.logo = 'https://boscdn.baidu.com/assets/mip2/lanxiniu/logo.png'
shellConfig.routes[0].meta.header.buttonGroup = [
{
name: 'share',
Expand Down Expand Up @@ -343,7 +343,7 @@ afterSwitchPage(options) {
console.log('Simulate async request with isId:', isId)
setTimeout(() => {
shellConfig.routes[0].meta.header.title = '蓝犀牛搬家'
shellConfig.routes[0].meta.header.logo = 'http://boscdn.bpc.baidu.com/assets/mip2/lanxiniu/logo.png'
shellConfig.routes[0].meta.header.logo = 'https://boscdn.baidu.com/assets/mip2/lanxiniu/logo.png'
shellConfig.routes[0].meta.header.buttonGroup = [
{
name: 'share',
Expand Down
123 changes: 0 additions & 123 deletions docs/api/util/event-emitter.md
View file

This file was deleted.

4 changes: 2 additions & 2 deletions docs/api/util/event.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ window.MIP.util.event
undelegate()
```

### createEvent
### create

- 参数
- {string} type Event name
Expand All @@ -57,7 +57,7 @@ window.MIP.util.event
创建了 `event` 对象，`event.data = data`

```javascript
MIP.util.event.createEvent('click', data)
MIP.util.event.create('click', data)
```


7 changes: 7 additions & 0 deletions docs/api/util/meta.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"menu": [
{
"key": "index"
}
]
}
2 changes: 1 addition & 1 deletion docs/codelabs/all-sites-mip/create-a-link.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,4 +64,4 @@ MIP 页面的链接采用和标准 HTML 相同的 `<a>` 标签，但进行了一

点击 `index.html` 的下一页按钮，我们可以看到 `second.html` 以动画的形式流畅地侧滑进入屏幕，页面并没有常规的白屏，体验和单页应用完全相同。

![切换效果](http://boscdn.bpc.baidu.com/assets/mip/codelab/shell/transition-forward.png)
![切换效果](https://boscdn.baidu.com/assets/mip/codelab/shell/transition-forward.png)
4 changes: 2 additions & 2 deletions docs/codelabs/all-sites-mip/create-a-page.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ MIP 提供了一些很常用的组件，称为 “内置组件”，常用的如
<body>
<h2>这是我的第一个 MIP 页面</h2>

<mip-img src="http://boscdn.bpc.baidu.com/assets/mip/codelab/shell/mashroom.jpg" width="300" height="300" class="main-image"></mip-img>
<mip-img src="https://boscdn.baidu.com/assets/mip/codelab/shell/mashroom.jpg" width="300" height="300" class="main-image"></mip-img>

<p>MIP 全称为 Mobile Instant Pages，因此是以页面 (Page) 为单位来运行的。开发者通过改造/提交一个个页面，继而被百度收录并展示。 </p>
<p>但以页面为单位会带来一个问题：当一个 MIP 页面中存在往其他页面跳转的链接时，就会使浏览器使用加载页面的默认行为来加载新页面。这“第二跳”的体验比起从搜索结果页到 MIP 页面的“第一跳”来说相去甚远。 </p>
Expand Down Expand Up @@ -96,4 +96,4 @@ __注意__： `<style mip-custom>` 整个页面只能使用一次，不要遗漏

至此一个独立的 MIP 页面已经完成了。我们可以使用一个静态服务器 (例如 [static-server](https://www.npmjs.com/package/static-server)) 来启动并通过浏览器访问这个 HTML 文件。预览效果如下：

![use-shell](http://boscdn.bpc.baidu.com/assets/mip/codelab/shell/use-shell.png)
![use-shell](https://boscdn.baidu.com/assets/mip/codelab/shell/use-shell.png)
8 changes: 4 additions & 4 deletions docs/codelabs/all-sites-mip/create-shell.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,18 +75,18 @@

我们已经成功地为我们的两个页面添加了头部标题栏。打开 `index.html` 可以看到效果（虽然样式颇为简陋）：

![带 Shell 的示例](http://boscdn.bpc.baidu.com/assets/mip/codelab/shell/use-shell-2.png)
![带 Shell 的示例](https://boscdn.baidu.com/assets/mip/codelab/shell/use-shell-2.png)

注意到右上角的三个点，点击之后可以展现更多按钮，即我们配置过的“关注”和“发消息”（还包含一个动画效果）：

![带 Shell 的示例下拉](http://boscdn.bpc.baidu.com/assets/mip/codelab/shell/use-shell-3.png)
![带 Shell 的示例下拉](https://boscdn.baidu.com/assets/mip/codelab/shell/use-shell-3.png)

最后我们看一下页面的切换效果。在切换到第二页时，因为 Shell 独立于页面之外且配置完整，因此头部标题可以直接出现在目标页面加载之前，大大提升了体验：

![带 Shell 的前进切换](http://boscdn.bpc.baidu.com/assets/mip/codelab/shell/transition-forward-2.png)
![带 Shell 的前进切换](https://boscdn.baidu.com/assets/mip/codelab/shell/transition-forward-2.png)

页面后退和前进时的动画略有不同：前进时需要载入目标页面，因此需要 loading；而后退的目标页面已经存在，因此可以直接展现，效果更好：

![带 Shell 的后退切换](http://boscdn.bpc.baidu.com/assets/mip/codelab/shell/transition-backward.png)
![带 Shell 的后退切换](https://boscdn.baidu.com/assets/mip/codelab/shell/transition-backward.png)

您可以启动静态服务器自己体验一下动态的效果，和普通的浏览器切换页面相比在体验上可以说是天壤之别！
2 changes: 1 addition & 1 deletion docs/codelabs/all-sites-mip/sample-code.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
<body>
<h2>这是我的第一个 MIP 页面</h2>

<mip-img src=" http://boscdn.bpc.baidu.com/assets/mip/codelab/shell/mashroom.jpg" width="300" height="300" class="main-image"></mip-img>
<mip-img src=" https://boscdn.baidu.com/assets/mip/codelab/shell/mashroom.jpg" width="300" height="300" class="main-image"></mip-img>

<p>MIP 全称为 Mobile Instant Pages，因此是以页面 (Page) 为单位来运行的。开发者通过改造/提交一个个页面，继而被百度收录并展示。 </p>
<p>但以页面为单位会带来一个问题：当一个 MIP 页面中存在往其他页面跳转的链接时，就会使浏览器使用加载页面的默认行为来加载新页面。这“第二跳”的体验比起从搜索结果页到 MIP 页面的“第一跳”来说相去甚远。 </p>
Expand Down
2 changes: 1 addition & 1 deletion docs/codelabs/customize-shell/introduction.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ MIP Shell 可以帮助开发者把多个单独的 MIP 页面串联起来，形

* 除了头部，还有底部栏或者侧边栏需要额外渲染和绑定事件。例如下图：

![Bottom Shell](http://boscdn.bpc.baidu.com/assets/mip2/page/bottom-shell-2.png)
![Bottom Shell](https://boscdn.baidu.com/assets/mip2/page/bottom-shell-2.png)

* 开发者需要控制站点的 Shell 配置，修改/禁用/忽略某些选项。

Expand Down
6 changes: 3 additions & 3 deletions docs/codelabs/mip-started/prepare.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,18 @@
```bash
mip2 init
```
![mip2 init](http://bos.nj.bpc.baidu.com/assets/mip/codelab/mip-init0.jpg)
![mip2 init](https://boscdn.baidu.com/assets/mip/codelab/mip-init0.jpg)


3. 进入目录并启动开发服务器

```bash
mip2 dev
```
![mip2 dev](http://bos.nj.bpc.baidu.com/assets/mip/codelab/mip-dev0.jpg)
![mip2 dev](https://boscdn.baidu.com/assets/mip/codelab/mip-dev0.jpg)

4. 访问 `http://127.0.0.1:8111/example/index.html` 将看到初始 `example` 示例页面

![example Page](http://bos.nj.bpc.baidu.com/assets/mip/codelab/home-init.png)
![example Page](https://boscdn.baidu.com/assets/mip/codelab/home-init.png)

> 下一节我们会学习初始化的项目的文件结构及 MIP 页面的内容结构及开发方式。
4 changes: 2 additions & 2 deletions docs/codelabs/mip-started/project.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# 3. 熟悉项目结构
# 3. 项目初始化页面

通过前面两步，开发者可以初步预览到初始化项目的一个页面，如果要更好的开发，我们还需要对初始化的项目结构有一定的了解

1. 初始化项目结构

![myproject](http://bos.nj.bpc.baidu.com/assets/mip/codelab/project.jpg)
![myproject](https://boscdn.baidu.com/assets/mip/codelab/project.jpg)


2. 如下图所示，初始化项目的预览页面 `example/index.html` 中给出了 MIP 页面的一个最基本的格式。
Expand Down
6 changes: 3 additions & 3 deletions docs/codelabs/mip-started/validate.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ MIP 开发工具还提供了页面规范的校验工具，来帮助开发者快
$ mip2 validate -p example/index.html
```

![validate0](http://bos.nj.bpc.baidu.com/assets/mip/codelab/validate0.png)
![validate0](https://boscdn.baidu.com/assets/mip/codelab/validate0.png)

> 可以看到，出现了校验失败的结果，它提示我们需要将带有 canonical 属性的 link 指向原页面，并且将 mip-example.js 的引用地址替换成线上CDN（前提是已经提交上线了），诸如此类，只需按照提示进行相应的微调即可。

Expand All @@ -19,7 +19,7 @@ MIP 开发工具还提供了页面规范的校验工具，来帮助开发者快
$ mip2 validate -c ./componets
```

![validate1](http://bos.nj.bpc.baidu.com/assets/mip/codelab/validate1.jpg)
![validate1](https://boscdn.baidu.com/assets/mip/codelab/validate1.jpg)


3. 代码格式校验，安装依赖，代码必须遵守 JavaScript Standard Style [[CN](https://standardjs.com/rules-zhcn.html)/[EN](https://standardjs.com/rules-en.html)] 规范
Expand All @@ -36,4 +36,4 @@ MIP 开发工具还提供了页面规范的校验工具，来帮助开发者快
> 代码规范需通过才能申请合入哦！


如果要继续深入学习自定义组件的开发，开发者可以继续后续的[自定义组件开发的学习](../component-development/introduction.md)
如果要继续深入学习自定义组件的开发，开发者可以继续后续的[如何开发自定义组件](../component-development/introduction.md)
28 changes: 28 additions & 0 deletions docs/extensions/builtin/meta.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"menu": [
{
"key": "mip-bind",
"preview": false
},
{
"key": "mip-carousel"
},
{
"key": "mip-iframe"
},
{
"key": "mip-img"
},
{
"key": "mip-pix",
"preview": false
},
{
"key": "mip-shell",
"preview": false
},
{
"key": "mip-video"
}
]
}
6 changes: 3 additions & 3 deletions docs/extensions/builtin/mip-bind.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ app.get('/data', function (req, res) {
详情请阅读 [可交互 MIP - Class 与 Style 绑定](https://mip-project.github.io/guide/interactive-mip/class-style-binding.html)

### 修改数据
MIP 提供了全局方法 `MIP.setData(data)` 来让开发者修改数据，以完成通过数据驱动 DOM元素更新的交互方案。重复数据会进行覆盖。
MIP 提供了全局方法 `MIP.setData(data)` 来让开发者修改数据，以完成通过数据驱动 DOM 元素更新的交互方案。重复数据会进行覆盖。

#### 用法

Expand Down Expand Up @@ -245,7 +245,7 @@ MIP 提供了全局方法 `MIP.setData(data)` 来让开发者修改数据，以

后者没有特殊要求，只需要开发者自行确认逻辑和数据即可。而前者的使用，对开发者的要求有两点：
1. 使用单引号来引用字符串；
2. 要修改的数据的值，如果是一个变量 `var`，需要是通过mip-data 组件设置的数据，并且通过 `m.var` 来获取
2. 要修改的数据的值，如果是一个变量 `var`，需要是通过 mip-data 组件设置的数据，并且通过 `m.var` 来获取

#### 支持数据表达式

Expand Down Expand Up @@ -402,7 +402,7 @@ export default {
</script>
```
>**注：**
>请留意上面例子中 HTML 与 mip-a 组件实现两段代码里面的 userinfo 和 anotherObject 的绑定示例。由于 m-bind 的基本原理是将动态数据绑定到指定 attribute 上，而我们知道，HTML 标签的 attribute 要求小写（即使写了大写也会转换为小写），因此如果开发者想要在组件里使用驼峰命名变量，请使用短横线的方式指定 attribute。
>请留意上面例子中 HTML 与 mip-a 组件实现两段代码里面的 userinfo 和 anotherObject 的绑定示例。由于 m-bind 的基本原理是将动态数据绑定到指定 attribute 上，而我们知道，HTML 标签的 attribute 要求小写（即使写了大写也会转换为小写），因此如果开发者想要在组件里使用驼峰命名变量，请使用短横线(kebab-case)的方式指定 attribute。
#### 在 `mip-script` 组件中
`mip-script` 组件允许开发者编写自定义的 JavaScript 代码，作用类似于 script 标签。其具体用法和规范开发者将在后面的小节了解到。此处我们将借这个组件来向开发者介绍一个读取数据的 API：`MIP.getData(value)`。`value` 为数据源中的属性名，多层数据可以以` . `连接。注意，`getData` 方法在组件中并不开放使用，请开发者遵循前面的在组件中使用数据的规范。
Expand Down
Loading

0 comments on commit b1c9b05

Please sign in to comment.