自定义详情页前端通用库

var wa = new WxMoment.Analytics({
    //projectName 请与微信商务团队确认
    projectName: "20150504WXMOMENT"
});

$('#button01').click(function(){
    //两个必填参数，分别为: 事件分类、事件名称
    wa.sendEvent('click', 'button01');
});

new WxMoment.OrientationTip();

var basePath = "http://wximg.gtimg.com/some/path/"

var loader = new WxMoment.Loader();

//声明资源文件列表
var fileList = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png'];

for (var i = 0; i < fileList.length; i++) {
    loader.addImage(basePath + fileList[i]);
}

//进度监听
loader.addProgressListener(function (e) {
    var percent = Math.round((e.completedCount / e.totalCount) * 100);
    console.log("当前加载了", percent, "%");
    //在这里做 Loading 页面中百分比的显示
});

//加载完成
loader.addCompletionListener(function () {
    //可以在这里隐藏 Loading 页面开始进入主内容页面
});

//启动加载
loader.start();

var pageSlider = new WxMoment.PageSlider({
    pages: $('.screen')
});

prev() //上一屏
next() //下一屏
moveTo(n) //跳转到第 n 屏，有缓动效果
moveTo(n, true) //直接跳到第 n 屏，没有缓动效果

var pageSlider = new WxMoment.PageSlider({
    pages: $('.screen'),            //必需，需要切换的所有屏
    direction: 'vertical',          //可选，vertical 或 v 为上下滑动，horizontal 或 h 为左右滑动，默认为 vertical
    currentClass: 'current',        //可选, 当前屏的class (方便实现内容的进场动画)，默认值为 'current'
    rememberLastVisited: true,      //可选，记住上一次访问结束后的索引值，可用于实现页面返回后是否回到上次访问的页面
    animationPlayOnce: false        //可选，切换页面时，动画只执行一次
    oninit: function () {},         //可选，初始化完成时的回调
    onbeforechange: function () {}, //可选，开始切换前的回调
    onchange: function () {},       //可选，每一屏切换完成时的回调
    onSwipeUp: function () {},      //可选，swipeUp 回调
    onSwipeDown: function () {},    //可选，swipeDown 回调
    onSwipeLeft: function () {},    //可选，swipeLeft 回调
    onSwipeRight: function () {}    //可选，swipeRight 回调
});

var pageSlider = new WxMoment.PageSlider({
    pages: $('.screen'),
    onSwipeUp: function(){
        //所以回调接口的 this 均指向 pageSlider 实例
        if(this.index === 1){
            //做你想做的操作.....

            //最后取消禁止
            $(this.pages[this.index]).data('lock-next', false);
        }
    }
});

var pageSlider = new WxMoment.PageSlider({
    pages: $('.screen'),
    rememberLastVisited: true,
    oninit: function(){
        //返回时，需告诉我们此时为返回动作而不是刷新，可以通过 hash 告诉我们
        //PageSlider 所有回调接口 this 指向 PageSlider，方便进行操作
        if(返回为 true){
            this.moveTo(this.lastVisitedIndex, true);
        }
    }
});

var share = new WxMoment.Share();

share.set('appmessage', 'title', "使用 set 函数重新设置标题");

var video = new WxMoment.Video({
    //请联系接口人确认视频清晰度已调至高清版本
    //如果要定制“播放按钮”的样式，请使用 CSS 覆盖 .tvp_overlay_play 和 .tvp_button_play 即可

    vid: "a0016gys8ct", //视频 vid 取自视频地址：http://v.qq.com/page/a/t/t/a0016gys8ct.html
    pic: "http://wximg.gtimg.com/tmt/_demo/wxmoment/img/video-thumb.jpg", //设置视频默认缩略图
    oninited: function () {
        //播放器在视频载入完毕触发
    },
    onplaying: function () {
        //播放器真正开始播放视频第一帧画面时
    },
    onpause: function () {
        //播放器触发暂停时，目前只针对HTML5播放器有效
    },
    onresume: function () {
        //暂停后继续播放时触发
    },
    onallended: function () {
        //播放器播放完毕时
    },
    onfullscreen: function (isfull) {
        //onfullscreen(isfull) 播放器触发全屏/非全屏时，参数isfull表示当前是否是全屏
    }
});

//可以通过以下方式控制播放/暂停
//video.getPlayer().play();
//video.getPlayer().pause();

//以下可以拉起iOS全屏播放
//video.getPlayer().enterFullScreen();