WxMoment 是由微信朋友圈广告团队面向广告详情页开发者提供的一个 JavaScript 库。通过使用 WxMoment,开发者可以简单的实现详情页中的常见功能,例如:微信分享、横屏提示、网页统计等。
前往 Github 查看 WxMoment Example。
当前版本:0.0.3
最后更新:2015-07-24
<script src="//cdnjs.gtimg.com/cdnjs/libs/wxmoment/0.0.3/wxmoment.min.js"></script> |
最新的脚本地址及文件将会在 Github 库 中更新。
开发者使用数据统计功能前,请与商务团队提前确认统计监测点及统计的项目别名(例如:20150504WXMOMENT)
注意:网页统计需要部署到腾讯服务器才可正常上报统计数据
var wa = new WxMoment.Analytics({ |
支持自定义事件统计,例如预约按钮的点击事件、视频的播放事件等。
$('#button01').click(function(){ |
若不支持横屏或横屏下体验不佳,请添加横屏提示。
new WxMoment.OrientationTip(); |
注:开启后,PC 等大屏幕设备打开时,会显示移动版尺寸预览并提供页面二维码展示
当图片较多时,对于页面的打开速度和后续的体验都非常影响,所以,我们通常让资源提前加载,即有一个 loading
的过程,当资源加载好以后再进入实际页面。
var basePath = "http://wximg.gtimg.com/some/path/" |
<!DOCTYPE html> |
脚本调用
var pageSlider = new WxMoment.PageSlider({ |
可用接口
prev() //上一屏 |
可用参数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({ |
记住最后浏览的页面索引
当页面跳走返回时,希望能直接返回到上次跳走的页面,只需设置:rememberLastVisited: true
,
即会保存当前页面索引到 localstorage
,当返回时即可方便操作,如下:var pageSlider = new WxMoment.PageSlider({
pages: $('.screen'),
rememberLastVisited: true,
oninit: function(){
//返回时,需告诉我们此时为返回动作而不是刷新,可以通过 hash 告诉我们
//PageSlider 所有回调接口 this 指向 PageSlider,方便进行操作
if(返回为 true){
this.moveTo(this.lastVisitedIndex, true);
}
}
});
新版 Weixin JS SDK 的分享接口需要绑定域名,并通过 access_token 获取 jsapi_ticket,由于获取 jsapi_ticket 的 API 调用次数非常有限,频繁刷新 jsapi_ticket 会导致 API 调用受限,影响自身业务。
详情页最终会部署到腾讯服务器 wximg.qq.com
域名下,允许继续使用 WeixinJSBridge 调用分享接口。
注意:此微信分享实现方式要求部署到腾讯服务器后方可正常使用
在 HEAD 中加入以下代码
<meta name="wxm:timeline_title" content="分享到朋友圈的标题"> |
在 JS 中初始化分享组件
var share = new WxMoment.Share(); |
一些特定需求下,需要动态修改分享的内容,更多参数请查看 example
share.set('appmessage', 'title', "使用 set 函数重新设置标题"); |
在腾讯视频上传视频后,可以获取到这样的视频地址 http://v.qq.com/boke/page/i/0/o/b001672wkoe.html
,其中 b001672wkoe
即视频的 vid。
代码
<!--初始化 WxMoment.Video 后,默认注入视频相关 DOM 到 ID 为 WxmomentVideo 的元素中,视频宽高在此设置--> |
var video = new WxMoment.Video({ |