前端开发微信公众平台JS开发的问题

web前端开发面试理由 前端开发需要学的英文怎么说 前端哪个开发软件好用

说在前面

本人近几个月一直在做微信页面的一些开发,比如微信投票活动、微信砍价等等。原本微信页面开发与其他并没有什么不同,但是通过微信js-SDK提供的一些功能,我还是可以做很多有趣的事情的。
本人不才,在做微信开发时走了很多弯路,在这里总结一下,一是为自己留下一下笔记以防日后忘记,二是希望当大家遇到与我相同的问题时可以少走一些弯路。
我接下来要说的有如下内容:调试方法、js-SDK签名流程、openId获取方法、网页授权获取用户基本信息流程。而关于微信js-SDK有哪些功能、API使用方法建议大家去看官方文档

调试方法

先说一下微信页面调试与其他普通页面的不同之处:
大部分微信页面是微信专属的,即微信页面只能在微信浏览器上显示,如果用其他浏览器访问时,会显示引导页,将用户引导到微信中打开此页。
如果用到微信js-SDK提供的功能时,需要签名认证,而普通浏览器在确认js-SDK权限获取时并不方便。
有时需要获取用户的基本信息,则一定会跳转到微信认证页,然而此时用普通浏览器调试时,必然提示“请用微信浏览器打开此页面”
以上3个问题,导致你不得不在手机和PC之间频繁切换,更可悲的是,手机上的调试效率实在太低。
值得高兴的是微信官方推出了微信浏览器。
详细说明请看官方文档。下载地址官方文档的下方。

用法与Chrome的完全一样,优势在于 你不用每次都要手动修改浏览器的UA来诱骗js代码,让JS以为当前是微信浏览器(解决了问题①);JS-SDK签名是否成功,权限是否获取成功都可以在微信浏览器上直接看到(解决问题②);
当需要用户确认权限获取时,可以直接进入权限确认页,并且可以通过扫码登录浏览器,确保所有流程都能真实模拟手机端的微信浏览器(解决问题③)

JS-SDK签名流程

先来说一下什么是JS-SDK签名。
微信出于安全性的考虑,调用JS-SDK中的方法必须满足以下几个条件:
①通过appId指定一个公众号
②当前页面的域名必须在上面公众号上进行了“域名绑定”
③并且签名是由公众号的appId、APPSecret、token、nonceStr、时间戳(以上名称会在下面进行解释)共同加密运算得出。
也许你能搞到某个公众号的appId,但是appSecret没有人会暴露出来。
也就是说,搞不到签名是绝对无法调用JS-SDK的。再简单点说,JS-SDK不是你想调就能调的

通过以上这些步骤,你的页面就可以调用微信JS-SDK中哪些有趣的方法了。
具体有哪些方法可以参考官方文档

openId获取流程

还是先来说说什么是openId。
可以把openId理解为微信号和公众号通过某种算法加密得出的字符串,所以他是唯一的、不会变化的,也与微信用户是否关注了当前公众号无关。
基于上面的特点,所以openId可以用作该用户的对于当前公众号的标示,作为业务实现的重要工具。

出于安全性考虑,openId的获取方法同样比较复杂;

两点建议:
①尽量不要将openId明文存储在客户端。
②如果你的网站对应多个公众平台时,可以考虑使用unionId。

网页授权获取用户基本信息流程

有些页面的功能需要获取用户的基本信息,如获取用户的头像、昵称等。而这些恰恰又是用户的隐私,所以要经过用户的同意才能获取。
上面获取openId属于网页授权的一种——静默授权,即无感知的获取当前用户的信息,当然也只能获取用户的openid而已。
下面将要说的是用户有感知的,获取信息量更大的另一种。

两点建议:
①为了提高用户体验,建议每次获取用户信息之后都存储在客户端,以免重复跳转至微信授权页
②在获取用户信息的同时也会获取到openid,可以利用,避免重复获取openid

其他要说的:
①由于公众号的secret和获取到的access_token安全级别都非常高,必须只保存在服务器,不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤,也必须从服务器发起。
②建议自己页面的url参数上尽量避免含有code参数,因为这样会与微信回调重复,造成一定的麻烦。
③当微信回跳到redirect_uri时,state参数可以好好利用,以区别是从哪里发起的跳转。
④如果我有什么说的不够详细或错误的地方,记得在下面留言或吐槽。

大家可以去看官方说明文档,讲得很细致,只是我觉得文字太多,不太方便,所以才总结了这个图文并茂的文档。这样今后与后台合作时,可以拿着这个流程图进行讨论,提高一些效率。
官方文档:http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html

前端页面测试开发工具 项目前端开发框架选择 bootstrap前端开发框架下载

» 本文来自:前端开发者 » 《前端开发微信公众平台JS开发的问题》
» 本文链接地址:https://www.rokub.com/5486.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!