微信的普及,好多项目开始运行在微信环境中,微信公众号算是一个很常见的平台,主要介绍微信公众号内部,网页开发的一些知识点和值得关注的点; html
没有基础的能够先看下微信官方文档的基础介绍;前端
1、首先说说,咱们本身开发的h5网页,配置在公众号平台内,怎么获取微信用户信息;web
一、很重要的一步,js安全域名配置配置,看下微信官方的介绍吧,以下图:
后端
简单理解就是,前端h5项目运行的服务器域名,注意是域名,不是IP!api
固然这个域名配置由微信公众号管理者进行配置,只要确认前端项目运行服务器域名给他们配就行;浏览器
须要注意的有两点,安全
1)端口必须是80端口,也就是不能这样:http://xxx.xxx:8080/xxx.html,不能带端口号!切记切记,否则你就别玩这个公众号网页开发了(微信就是这么牛逼,这是他们规定的);服务器
2)看到上面的图片,说有一个txt文件要放置在提供的域名目录下,能够是根目录,也能够指定目录下面,配置好以后,直接浏览器地址栏访问这个路径,能打开就成功了,此处还有一个坑:微信
若是把这个txt文件放置在根目录,你的h5访问路径就不能带路径,也就是放置在根路径下面,http://xxx,xxx/index.html是没有问题的,若是h5项目是http://xxx.xxx/mp/index.html,这是行不通;app
同理,若是你把这个txt文件放置在某个文件下,如:http://xxx.xxx/mp,放在mp文件夹下,那你的h5也要放在这个路径下面,http://xxx.xxx/mp/index.html;否则确定有问题;
至于什么问题,若是你后面要调用微信的jssdk,在wx,config时会一直提示你,config err: invalid url domain;啥意思?域名不合法啊!
这个问题搞定好了以后,后面会很是顺利,一般直接让运维或者后端大佬们,直接放根目录就行,也别搞什么其余端口,就80端口;
2、受权登陆
受权登陆第一步就是获取微信返回的code值,只有拿到这个code值,才能后续的获取微信用户信息,那怎么拿到微信返回的code值?很简单,文档有实例,咱们要作的只是改改参数就行:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect //若提示“该连接没法访问”,请检查参数是否填写错误,是否拥有scope参数对应的受权做用域权限。
上面标红的几个参数值,是须要替换成本身须要的值,
APPID=>公众号的惟一标识,申请公众号已经分配好的;
REDIRECT_URL=>在成功拿到code值,你须要跳转到你项目的路径地址,好比login.html之类的;
SCOPE=>有两个固定值:snsapi_base,snsapi_userinfo ,二者任选其一,两个值区别,看文档天然明白;
STATE=>这个参数是自定义,什么值都行,你配置什么值,到时候跳转回来后,原样给你带回来,须要注意的是有格式要求(重定向后会带上state参数,开发者能够填写a-zA-Z0-9的参数值,最多128字节);
拿到code后,微信会自动跳转会你配置的连接地址并携带code,state参数——redirect_uri/?code=CODE&state=STATE,这种格式的,直接在url中取参数就行;
这一步搞定以后,后面就是各类调微信接口,传对应接口须要的参数就行;
3、调用jssdk
这一步的前置条件就是第1点的,js安全域名要配置经过,否则你不可能调用sdk成功的,相信我没错的;
那如何调用jssdk呢?很简单,也有文档说明=>JSSDK调用说明
1)先在你须要调用的sdk的页面,引入js文件;http://res2.wx.qq.com/open/js/jweixin-1.4.0.js 或者http://res.wx.qq.com/open/js/jweixin-1.4.0.js;
2)完善配置信息,通常先后端分离项目,都是前端调用后端接口,把这一堆参数返给前端,而后前端在js里面直接给对应参数赋值就行,(由于signature签名参数,一般要后端来生成,生成签名须要获取一个受权参数jsapi_ticket,这个须要后端请求微信接口,才能拿到,详情见文档的签名规则)
wx.config({ debug: true, // 开启调试模式,调用的全部api的返回值会在客户端alert出来,若要查看传入的参数,能够在pc端打开,参数信息会经过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的惟一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: [] // 必填,须要使用的JS接口列表 });
上面wx.config配置好以后,工做基本完成,剩下的就是根据本身项目需求调用特定的sdk,好比自定义分享,优惠券。。。。按照文档走就OK,挺简单;
总结:js安全域名配置很重要,很是重要!