详情页开发规范/通用库

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

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

$('#next').click(function(){
    wa.sendEvent('jump', 'next');   //上报代码在前
    setTimeout(function(){
        location.href = 'next.html'     //跳转在延迟200ms后执行
    }, 200)
});

new WxMoment.OrientationTip();

var basePath = "https://wximg.qq.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')
});

//可用接口
pageSlider.prev() //上一屏
pageSlider.next() //下一屏
pageSlider.moveTo(n) //跳转到第 n 屏，有缓动效果
pageSlider.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(this.rememberLastVisited){
            //如果返回是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: "https://wximg.qq.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();

//填写表单内容
var form = new WxMoment.Form({
    appid: 'wx0000000000000000',    //客户公众号appid，可在 微信公众平台->开发者中心 查看
    qid: 'xxx',                     //表单id，请与运营经理联系获取
    name: name,                     //表单内容，需先与运营经理沟通后配置所需提交的内容
    sex: sex,
    tel: tel
})

//提交表单
form.submit(function () {
    //成功的回调
}, function () {
    //失败的回调
})

$('form').submit(function () {
    //获取字段数据
    var name = $('#name').val(),
        sex = $('input[name="sex"]:checked').val(),
        tel = $('#tel').val()
    
    //检验字段内容
    if(!name || !tel){
        alert('内容填写不完整！');
        return false;
    }
    var telPattern = /^1[0-9]{10}$/;
    if(!telPattern.test(tel)){
        alert('电话填写不正确！');
        return false;
    }

    //填写表单内容
    var form = new WxMoment.Form({
        appid: 'wx0000000000000000',    //客户公众号appid，可在 微信公众平台->开发者中心 查看
        qid: 'xxx',                     //表单id，请与运营经理联系获取
        name: name,                     //表单内容，需先与运营经理沟通后配置所需提交的内容
        sex: sex,
        tel: tel
    })
    
    //提交表单
    form.submit(function () {
        //成功的回调
        alert('seccess!')
    }, function () {
        //失败的回调
        alert('failed!')
    })

    return false;
})