MobilePPT

> 商业项目现阶段使用的移动端 PPT 加载方式

如何安装

$3

``bash
npm install mobile-ppt --save
`

$3

`js
var js = 'http://assets.dxycdn.com/templates/core/third-party/mobile-ppt/mobile-ppt.min.js';
$.getScript(js, function () {
// 此处可以使用 MobilePPT 了
});
`

使用方法

$3

该模块针对商业项目作了一些封装，以便可以快捷的使用该模块。下面以使用 npm 安装的方式为例
来演示如何使用：

`js
var $ = require('jquery');
var MobilePPT = require('mobile-ppt');
var flash = $('.post__content object'); // PC 端 PPT 的 flash 对象

var isMobile = /mobile|dxyapp/i.test(navigator.userAgent);

// 仅在移动端，并且存在 flash 对象时调用
if (isMobile && flash.length) {
MobilePPT.init('biz', {
flash: flash,
dataUrlBuilder: function (nid) {
return 'http://www.dxy.cn/topic/biz/cah-photoswipe/2015/' + nid + '/ps-data.js';
}
});
}
`

说明：

flash 表示 PC 端 flash 的对象，参数的值可以是 jQuery 的对象（如上面的代码），可以是 DOMElement 节点，
也可以是一个选择器（如：.post__content object）。

dataUrlBuilder 是一个自定义的方法，用来生成 ps-data.js 的路径。该方法的唯一一个参数是 nid，表示当前
文章的 id。

$3

该模块也可以应用于其他项目中，但是不能像在商业项目那样调用。可以用下面的方法进行调用，上面提到
的 Mobile.init 方法其实就是对下面这种调用方式的封装，目的是兼容商业项目中一些老的调用方法。

`js
var $ = require('jquery');
var MobilePPT = require('mobile-ppt');

var nid = 1234;
var dataUrl = 'http://www.dxy.cn/topic/biz/cah-photoswipe/2015/' + nid + '/ps-data.js';
var container = $('.ppt-container');

var ppt = new MobilePPT(container, {
dataUrl: dataUrl
});
ppt.init();
`

说明：

options 中，dataUrl 用来指定 ps_data.js 的地址，另外，该地址不一定是一个 JS 的地址，也可以是一个 JSONP
接口的地址。

$3

该模块对面上存在多个 PPT 的情况支持的不好，主要原因是 ps_data.js 中使用了同一个全局变量 PS_DATA。
但如果 dataUrl 的地址是 JSONP 接口的话，就可以使用方法二的方式来初始化多个 MobilePPT 的实例来
实现加载多个 PPT 的功能。

$3

1. Clone 本项目
2. npm install
3. 修改之后运行 npm run build
4. 将模块发布到 npm 并且将 dist/ 目录下面的 mobile-ppt.js 和 mobile-ppt.min.js 复制一份到
svn 的 assets/templates/core/third-party/mobile-ppt/` 目录下替换掉之前的文件。

$3