mip-custom

文档信息

  • 所属产品项目：定制化MIP
  • 产品版本：v1.0.11
  • 文档版本：v1.0.3
撰写人 修改日期 修改内容 更新版本
王培 2017-04-19 创建文档 v1.0.0
王培 2017-05-02 增加必要属性 title v1.0.1
王培 2017-05-03 增加必要脚本说明 v1.0.2
王培 2017-06-06 修改文档示例 v1.0.3
董士浩 2017-09-08 引入mipserver字体文件 v1.0.16
董士浩 2017-10-20 定制化 MIP 支持A区渲染定制化内容 v1.2.0

说明

mip-custom 定制化 MIP 组件，想在页面中加入定制化内容，必须引入这个组件。MIP 页面改造参考官网文档：https://www.mipengine.org/doc/00-mip-101.html。

标题 内容
类型 通用
支持布局 responsive,fixed-height,fill,container,fixed
所需脚本 https://c.mipcdn.com/static/v1/mip-custom/mip-custom.js
https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js
https://c.mipcdn.com/static/v1/mip-fixed/mip-fixed.js

示例

基本用法

  1. <mip-custom>
  2.     <script type="application/json">
  3.         {
  4.             "accid": "e2217bab684fbb898dccf04b",
  5.             "title": "%E8%BF%99%E9%87%8C%E6%98%AF%E6%A0%87%E9%A2%98"
  6.         }
  7.     </script>
  8. </mip-custom>

完整版示例

  1. <!DOCTYPE html>
  2. <html mip>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
  6.     <title>title</title>
  7.     <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
  8.     <link rel="canonical" href="对应的 h5 页面 url">
  9.     <style mip-custom>
  10.     </style>
  11. </head>
  12. <body>
  13.     <h2>定制化MIP示例页面</h2>
  14.     <!-- 顶部定制化内容区域，可自由放置 -->
  15.     <mip-custom position="top" source-type="med_tag">
  16.        <script type="application/json">
  17.             {
  18.                 "accid": "e2217bab684fbb898dccf04b",
  19.                 "title": "%E8%BF%99%E9%87%8C%E6%98%AF%E6%A0%87%E9%A2%98"
  20.             }
  21.         </script>
  22.     </mip-custom>
  23.     <p>正文</p>
  24.      <!-- 底部定制化内容区域，必须放在内容的下方、`script`标签的上方 -->
  25.     <mip-custom>
  26.        <script type="application/json">
  27.             {
  28.                 "accid": "e2217bab684fbb898dccf04b",
  29.                 "title": "%E8%BF%99%E9%87%8C%E6%98%AF%E6%A0%87%E9%A2%98"
  30.             }
  31.         </script>
  32.     </mip-custom>
  33.     <script src="https://c.mipcdn.com/static/v1/mip.js"></script>
  34.     <script src="https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js"></script>
  35.     <script src="https://c.mipcdn.com/static/v1/mip-custom/mip-custom.js"></script>
  36. </body>
  37. </html>

属性

position

说明：标识定制化分区，目前分为两个区域
必选项：否
类型：字符串
取值范围：top：顶部区域，必须和source-type配合使用才能正确渲染内容。
单位：无
默认值：bottom

source-type

说明：声明请求的资源
必选项：否
类型：字符串
取值范围：百度官方给出的资源号，必须和position配合使用才能正确渲染内容。
单位：无
默认值：空

accid

说明：分润平台帐号ID，暂时需要联系百度 PM 手工申请
必选项：是
类型：字符串
取值范围：无
单位：无
默认值：无

title

说明：页面内容标题，需要对中文编码（encodeURIComponent）
必选项：是
类型：字符串
取值范围：无
单位：无
默认值：无

注意事项

  • 每个 MIP 页面中的定制化模板，插入之前必须准备 accid，需要联系百度 PM 手工申请
  • title 是页面中内容标题，不是<title>标签中的文本，同时需要对中文编码（encodeURIComponent）