关于微信朋友圈广告的H5页面制做de注意事项

时间 2020-02-21

标签关于微信朋友广告 h5 页面制做注意事项繁體版

原文原文链接

其实官方文档已经写得很清楚了，记得不要用es6哈~php

微信开发规范、目录规范

官方开发规范
http://ad.weixin.qq.com/learn...css

自测表
http://owncloud.pt.xiaomi.com...html

压力测试
http://owncloud.pt.xiaomi.com...git

项目初始化设置（微信提供找项目负责人）

1 项目别名（建立目录的名称，添加统计时的别名）es6

例："20161219xiaomi"

2 上线地址（绝对路径）github

例：https://wximg.qq.com/wxp/moment/N1S_eVj0Z/html/index.html
例：hhttps://wximg.qq.com/wxp/moment/N1S_eVj0Z/html/

编译 & 调试 & 部署

使用微信工具 WeFlow微信

https://weflow.io/

微信通用库 WxMoment

WxMoment 是由微信朋友圈广告团队面向广告详情页开发者提供的一个Javascript库。
经过使用 WxMoment，开发者能够简单的实现详情页面中的常见功能微信开发

提供的API：less

数据统计（须要项目别名，微信提供 找项目负责人）
横屏提示
资源预加载
滑屏组件
维系分享
腾讯视频
表单预定

脚本地址工具

<script src="//wximg.qq.com/wxp/libs/wxmoment/0.0.4/wxmoment.min.js"></script>

目录规范

└── 例：20161219xiaomi            //示例项目，项目目录（项目别名 由项目负责人提供）
    └── dist                        //编译后文件目录（最终提交的文件）
    └── dev                         //开发时文件目录
    └── src                         //源文件目录，全部的开发在此目录下进行
        ├── css                     //样式表目录，使用 Less，只有 style-*.less 的文件名会被编译
        │   └── style-promo.less
        ├── html                    //HTML目录
        │   └── index.html
        ├── media                   //多媒体文件
        │   └── v1021.mp4
        └── img                     //图片目录

特别注意

1 页面全部资源使用HTTPS协议（除分享缩略图的连接地址必须为HTTP）

<meta name="wxm:img_url" content="http://wximg.qq.com/wxp/moment/E1M8SgPDZ/img/thumb.jpg">

2 打包提交给微信时确保ZIP包中不包含 ".DS_Store" 隐藏文件（MAC系统尤为注意，每一个目录都须要查看）