diff --git a/mip-qb-ad/README.md b/mip-qb-ad/README.md new file mode 100644 index 00000000..b74233d7 --- /dev/null +++ b/mip-qb-ad/README.md @@ -0,0 +1,91 @@ +# mip-qb-ad + +mip-qb-ad 组件说明 + +标题|内容 +----|---- +类型|通用 +支持布局|responsive,fixed-height,fill,container,fixed +所需脚本|https://mipcache.bdstatic.com/static/v1/mip-qb-ad/mip-qb-ad.js + +## 示例 + +### 基本用法 +`` 具有多种类型(`type`),`type` 取值由广告分类决定。 + +### 1. type=default +| 参数 | 参数值 | 是否必须 | +| -------- | -------- | ------------------------| +| type | default | 是 | +| src | script中src的值 | 是 | + +适用于以下广告格式: +```html + +``` +示例: +```html + +``` + +### 2. type=smua +| 参数 | 参数值 | 是否必须 | +| -------- | -------- | ------------------------| +| type | smua | 是 | +| src | script中smua的属性值 | 是 | + +适用于以下广告格式: +```html + +``` +示例: +```html + +``` + +### 3. type=sogou +| 参数 | 参数值 | 是否必须 | +| -------- | -------- | ------------------------| +| type | sogou | 是 | +| src | 搜狗id | 是 | +| script | script中src的值 | 否,默认为`//theta.sogoucdn.com/wap/js/aw.js`| + +适用于以下广告格式: +```html +
+ + +``` +示例: +```html + +``` + +### 3. type=sogou_auto +| 参数 | 参数值 | 是否必须 | +| -------- | -------- | ------------------------| +| type | sogou | 是 | +| src | 搜狗id | 是 | +| w | w值 | 是 | +| h | h值 | 是 | +| script | script中src的值 | 否,默认为`//theta.sogoucdn.com/wap/js/aw.js`| + +适用于以下广告格式: +```html +
+ + +``` +示例: +```html + +``` + diff --git a/mip-qb-ad/mip-qb-ad.js b/mip-qb-ad/mip-qb-ad.js new file mode 100644 index 00000000..507568eb --- /dev/null +++ b/mip-qb-ad/mip-qb-ad.js @@ -0,0 +1,62 @@ +/** + * @file mip-qb-ad 组件 + * @author + */ + +define(function (require) { + 'use strict'; + + let customElement = require('customElement').create(); + + /** + * 第一次进入可视区回调,只会执行一次 + */ + customElement.prototype.firstInviewCallback = function () { + }; + /** + * 构造元素,只会运行一次 + */ + // build说明: 异步广告备用组件 + customElement.prototype.build = function () { + let el = this.element; + let type = el.getAttribute('type') || ''; + let src = el.getAttribute('src') || ''; + let sogouW = el.getAttribute('w') || ''; + let sogouH = el.getAttribute('h') || ''; + let script = el.getAttribute('script') || ''; + let innerScriptNode = document.createElement('script'); + let adScriptLoaderNode = document.createElement('script'); + let container = document.createElement('div'); + container.style.minHeight = '50px'; + let scriptHtml = ''; + if (type === 'default') { + // 适合只有src属性的单条script + adScriptLoaderNode.src = src; + } else if (type === 'smua') { + // 适合 + adScriptLoaderNode.src = '//www.smucdn.com/smu0/o.js'; + adScriptLoaderNode.setAttribute('smua', src); + } else if (type === 'sogou') { + // 适合异步的sogou广告 + container.id = 'sogou_wap_' + src; + scriptHtml = 'var sogou_div = document.getElementById("sogou_wap_' + src + '"); '; + scriptHtml += 'window.sogou_un = window.sogou_un || [];'; + scriptHtml += 'window.sogou_un.push({id: ' + src + ',ele:sogou_div});'; + adScriptLoaderNode.src = script || '//theta.sogoucdn.com/wap/js/aw.js'; + } else if (type === 'sogou_auto') { + // 适合需要自定义配置w和h的搜狗广告 + container.id = 'sogou_wap_' + src; + scriptHtml = 'var sogou_div = document.getElementById("sogou_wap_' + src + '"); '; + scriptHtml += 'window.sogou_un = window.sogou_un || [];'; + scriptHtml += 'window.sogou_un.push({id: ' + src + ',ele:sogou_div,w:' + sogouW + ',h:' + sogouH + '});'; + adScriptLoaderNode.src = script || '//theta.sogoucdn.com/wap/js/aw.js'; + } + innerScriptNode.innerHTML = scriptHtml; + // adScriptLoaderNode.onload = () => el.customElement.applyFillContent(container, true) + container.appendChild(innerScriptNode); + container.appendChild(adScriptLoaderNode); + el.appendChild(container); + }; + + return customElement; +}); diff --git a/mip-qb-ad/mip-qb-ad.less b/mip-qb-ad/mip-qb-ad.less new file mode 100644 index 00000000..ab4ddab2 --- /dev/null +++ b/mip-qb-ad/mip-qb-ad.less @@ -0,0 +1,7 @@ +/** + * @file mip-qb-ad样式文件 + */ + +mip-qb-ad { + // TODO +} diff --git a/mip-qb-ad/package.json b/mip-qb-ad/package.json new file mode 100644 index 00000000..570dd3c4 --- /dev/null +++ b/mip-qb-ad/package.json @@ -0,0 +1,14 @@ +{ + "name": "mip-qb-ad", + "version": "1.0.0", + "description": "支持smua,sogou等广告代码", + "contributors": [ + { + "name": "Xurna Yang", + "email": "565627595@qq.com" + } + ], + "engines": { + "mip": ">=1.1.0" + } +}