mobile-ppt

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

Usage no npm install needed!

<script type="module">
  import mobilePpt from 'https://cdn.skypack.dev/mobile-ppt';
</script>

README

MobilePPT

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

如何安装

使用 npm（推荐）

npm install mobile-ppt --save

使用 $.getScript()

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

使用方法

方式一：商业项目中

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

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。

方式二：其他项目中

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

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 接口的地址。

限制

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

开发

  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/ 目录下替换掉之前的文件。

CHANGELOG