我是2014年毕业于西安的一所普通高校,到目前为止,先后在创业公司、上市企业待过。目前在是一家上市公司的前端工程师。接触过移动端和pc端业务。由于长期做公众号开发,和微信电商开发,所以对于移动端的见解稍微深入点。今天分享的主题是微信开发的那些事。
主题:微信开发的那些事。
首先大家得明白微信开发和常规开发流程没有太多区别,不外乎需求导入->业务开发->测试上线。不过非要区别的话,那就是你需要进行微信授权、依赖微信客户端依赖的浏览器、以及微信jssdk来操纵微信相关的接口。所以你需要准备三大必要装备:
1、微信公众号 目的是进行授权 要是需要支付功能,则需开通微信支付。
2、微信开发者工具 (1)目的是授权之后的网页无法在pc浏览器中浏览 (2)微信api需要在微信环境下生效,可以利用微信开发者工具跟踪你微信api的实现状况。
3、需要一部手机、严格的说你需要两部手机。一部安卓、一部ios手机。目的是安卓手机里面微信用的是自己的qq浏览器、但是苹果手机是safari浏览器,因此兼容性你需要适配。
开发请时刻打开葵花宝典微信开发者文档:http://mp.weixin.qq.com/wiki/home/
ok现在工具有了,可以开始讲开发阶段了。第一授权,微信授权分为静默授权和弹皮授权、目的就是获取用户信息、取得用户的唯一openid、以便业务的开发。
因此第一步就把前端、后端、微信联系在一起。前端素材中调起微信授权接口请求传入后端、后端接受请求并向微信发送授权请求同时带去前端的参数、微信授权之后把参数返回给后端。后端再调回前端页面。前端拿到openid就可以进行业务接口的请求。
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,在开发的时候如果有类似的关键字操作,请一定要和微信返回的参数区分开。