我的书签
添加书签
移除书签小故事的组织结构
本篇主要讲解小故事的结构划分和代码结构；
知识储备
在阅读本篇前，您需要了解什么是小故事，可以查看开发小故事前期准备了解基础信息；
小故事的组织结构介绍
小故事主要由 mip-story 组件 承载，充当小故事中所有段落的容器，按照段落个数自动生成段落导航，段落播放完的重播和分享功能。
小故事具有三个基本概念：段落（view），层（layer）和元素（element）.
- 每个小故事可以包含多个段落（view），每个段落充满屏幕。用户操作翻页后，会看到下一个段落。
- 每个段落又可以包含多个层（layer），单个层可以设置布局模式，如多行布局，左右布局，图片拉伸布局等。
- 元素（element）是资源素材，如背景图，主标题，详细描述等。在
<h1>、<p>、<mip-img>等标签中声明。
这里的每一个元素都是一个mip组件，其中故事组件 为mip-story，段落为mip-story-view，层为mip-story-layer，元素为资源素材，如背景图，主标题，详细描述等。在 <h1>、<p>、<mip-img> 等标签中声明。
开发小故事
开发一个小故事，只需要简单的三部：
- 创建封面以及段落；
- 为段落添加丰富内容；
- 为小故事添加封底；
下面请跟随详细步骤教程开始制作您的第一个小故事吧！
在页面中添加mip-story 组件标签；
mip-story 是一个自定义的MIP组件，与使用其他MIP组件一样，您必须要将该组件的关联脚本添加到html页面中；在一个标准的 MIP HTML 页面的<script>标签中添加依赖脚本：
<!DOCTYPE html><html mip><head>....</head><body><!-- MIP 运行环境 --><script src="https://c.mipcdn.com/static/v1/mip.js"></script><!-- 小故事依赖脚本 --><script src="https://c.mipcdn.com/static/v1/mip-share/mip-share.js"></script><script src="https://c.mipcdn.com/static/v1/mip-story/mip-story.js"></script><script src="https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script><script src="https://c.mipcdn.com/static/v1/mip-scrollbox/mip-scrollbox.js"></script></body></html>
添加好依赖后，需要把mip-story元素添加到<body>文档中，如下所示：
<!DOCTYPE html><html mip><head>....</head><body><!-- 组件使用 --><mip-story id="story-demo">...</mip-story><!-- MIP 运行环境 --><script src="https://c.mipcdn.com/static/v1/mip.js"></script><!-- 小故事依赖脚本 --><script src="https://c.mipcdn.com/static/v1/mip-share/mip-share.js"></script><script src="https://c.mipcdn.com/static/v1/mip-story/mip-story.js"></script><script src="https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script><script src="https://c.mipcdn.com/static/v1/mip-scrollbox/mip-scrollbox.js"></script></body></html>
以上步骤完了小故事开发的第一步工作——在页面中添加mip-story标签。接下来，添加小故事里的内容。
上一节：开发小故事前期准备。
下一节：为小故事创建一个封面。
