3.常见问题
<p>[TOC]</p>
<p>具体介绍一些常用的规范；
常用的开发方法；
踩过的一些坑；</p>
<h2>1.开发普通的微信H5页面</h2>
<ul>
<li>一般微信H5页面是基于swiper.js开发的</li>
<li>开发框架：<del>待补充</del></li>
</ul>
<h2>2.微信H5页面的素材要求</h2>
<h4>页面的自定义分享</h4>
<ul>
<li>自定义的标题；</li>
<li>自定义简介（不可包含腾讯敏感词，如福利，会造成分享的图标显示不出来）；</li>
<li>分享的图标（200pxX200px，png或者jpg）；</li>
<li>分享的网址（要求处在安全域名下）</li>
</ul>
<h4>音乐素材</h4>
<ul>
<li>格式为mp3；</li>
<li>保证音质的前提下，音乐质量越小越好，最好小于250K；</li>
<li>音乐不宜过长，30s为佳，最好有渐现渐隐效果，方便循环播放；</li>
</ul>
<h4>视频素材</h4>
<ul>
<li>视频格式为mp4；</li>
<li>编码格式为H.264；</li>
<li>大小为720P</li>
<li>视频转码和压缩参考：【格式工厂】</li>
</ul>
<p><img src="http://doc.uc108.org:8002/Public/Uploads/2018-07-19/5b503d5f80b9e.png" alt="" /></p>
<h4>设计要求</h4>
<ul>
<li>要求网页宽度为750px;</li>
<li>网页设计的安全区为750像素X1000像素;</li>
<li>网页核心内容应该处于安全区内；</li>
</ul>
<h2>3.应用微信自定义分享</h2>
<h4>安全域名下页面</h4>
<p>参照调用JSSDK步骤进行</p>
<h4>非安全域名下页面</h4>
<ul>
<li>
<p><strong>问题</strong>：
公众号的后台安全域名设置的数量有限，不可能日常开发的项目都配置到微信的安全域名目录中去；</p>
</li>
<li><strong>解决方法</strong>：
1.在安全域名下放入一个入口文件，在该文件中配置好需要自定义分享的各项参数；
2.入口文件中通过iframe的形式嵌入个人开发的项目文件地址；
3.这样页面显示的是个人的项目内容，但是在通过微信分享的时候可以利用入口文件的分享设置；
4.如果项目的分享的内容是动态的，可以通过iframe通信的方式，将要分享的内容传递至父级页面；
5.微信分享要求自定义分享出来的网址必须是安全域名，如果想要实现分享到任意网址，可以在安全域名下建一个中转文件，将自己真正希望用户访问的网址作为参数传递到这个中转文件上，中转文件加载后执行跳转，页面跳转到真正要访问的地址。</li>
</ul>
<h2>4.应用微信公众号内支付；</h2>
<p><strong>要求：</strong></p>
<ul>
<li>发起支付请求的页面处在微信公号绑定的支付目录中</li>
<li>仅限目录，非域名</li>
</ul>
<h2>5.获得微信用户相关信息</h2>
<p><strong>通过以下步骤获取：</strong>
1.进入当前的项目入口地址，然后自动跳转至获取页面授权的域名地址；
2.在授权页面获取页面授权并取得需要的用户相关信息以后，跳转回当前的项目入口地址，用户信息通过网址参数的带回；
3.解析当前的项目入口地址的相关参数，获得想要的用户信息；
4.跳转前和跳转后的判断可以通过设定一个参数来区分。</p>
<h2>6.页面跳转与微信返回键冲突</h2>
<ul>
<li>问题：由于获取用户信息是采用多次跳转的形式的实现的，所以微信返回按钮会让页面返回至上次跳转的页面上而不是关闭页面。</li>
<li>解决方式：
1.监听微信返回按钮事件；
2.监听到返回之后关闭当前微信页面。</li>
</ul>
<h2>7.QQ扫一扫的自定义分享问题</h2>
<p>调用腾讯移动web开放平台提供的接口；
示例：<a href="http://activitysupport.tcysys.uc108.net/Static/SpecialAct/Common/test/qq/index.html" title="demo">demo</a></p>
<h2>8.项目需要后端介入的情况</h2>
<p>除了自定义分享以外的功能，都需要后端介入
获取用户信息网页授权开发流程：
1.开发阶段通过同城游小助手的公号获取授权，入口为sso1；
2.预发阶段后端自行预发和检测，但是前段无法测试；
3.正式发布时，引入正式的入口sso；</p>
<h2>9.补充</h2>
<ul>
<li>更多问题及解决方法记录；</li>
<li>补充代码示例</li>
</ul>