微信开发那些事

我是2014年毕业于西安的一所普通高校，到目前为止，先后在创业公司、上市企业待过。目前在是一家上市公司的前端工程师。接触过移动端和pc端业务。由于长期做公众号开发，和微信电商开发，所以对于移动端的见解稍微深入点。今天分享的主题是微信开发的那些事。
主题：微信开发的那些事。
首先大家得明白微信开发和常规开发流程没有太多区别，不外乎需求导入->业务开发->测试上线。不过非要区别的话，那就是你需要进行微信授权、依赖微信客户端依赖的浏览器、以及微信jssdk来操纵微信相关的接口。所以你需要准备三大必要装备：
1、微信公众号 目的是进行授权 要是需要支付功能，则需开通微信支付。
2、微信开发者工具 （1）目的是授权之后的网页无法在pc浏览器中浏览 （2）微信api需要在微信环境下生效，可以利用微信开发者工具跟踪你微信api的实现状况。
3、需要一部手机、严格的说你需要两部手机。一部安卓、一部ios手机。目的是安卓手机里面微信用的是自己的qq浏览器、但是苹果手机是safari浏览器，因此兼容性你需要适配。

Paste_Image.png
开发请时刻打开葵花宝典微信开发者文档：http://mp.weixin.qq.com/wiki/home/ Paste_Image.png

ok现在工具有了，可以开始讲开发阶段了。第一授权，微信授权分为静默授权和弹皮授权、目的就是获取用户信息、取得用户的唯一openid、以便业务的开发。

Paste_Image.png

因此第一步就把前端、后端、微信联系在一起。前端素材中调起微信授权接口请求传入后端、后端接受请求并向微信发送授权请求同时带去前端的参数、微信授权之后把参数返回给后端。后端再调回前端页面。前端拿到openid就可以进行业务接口的请求。

Paste_Image.png

2、素材的业务开发和一般的常规开发没什么区别，所以就直接跳过，不过这个过程，微信开发者工具显得尤为重要、首先你要分享、要支付、要开发卡券。。。。必须进行微信jssdk的使用、但是微信jssdk依赖于微信客户端。那么手机上又不能f12所以你只能alert弹出微信回调的json参数。这样极为不方便，所以你需要依靠微信开发者工具。步骤：
1、进入微信公众平台，下载微信开发者工具
2、绑定微信公众号
3、打开开发者工具，手机扫码登录
4、进行开发和谷歌浏览一样方便，最变态的是可以调试手机打开的网页，类似于fiddler。

3、常见的bug以及解决方案
1、微信网页侧滑，会滑到上一个页面或者下个页面
解决方案：touchmove preventDefault（）
2、领取卡券的时候遇到ios填不了用户信息
解决方案：刷新页面
3、使用video标签播放视频，但是这个video是总是表现在最顶层，无论怎样调节z-index属性都不起作用，我希望可以在视频上展示一些文字或图片。然而这个问题在PC端和苹果ios，或其他浏览器表现正常，唯独是在android系统下的QQ浏览器或微信内置浏览器表现有问题
解决方案：X5内核视频播放使用了自研的播放器，考虑用户体验，我们使用了统一的播放界面。如果有相关问题，请联系腾讯浏览服务产品经理做进一步交流。但是可以放到安全域名后(qq.com)
4、领取卡券
卡券自带用户openid，在开发的时候如果有类似的关键字操作，请一定要和微信返回的参数区分开。