微信web

JS-SDK

微信web授权。通过openid,以及绑定同一开发平台下的unionId

第一步:用户同意授权,获取code

scope为snsapi_userinfo

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

用户同意授权之后

如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。

code说明 : code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。
  • 10003 redirect_uri域名与后台配置不一致
  • 10004 此公众号被封禁
  • 10005 此公众号并没有这些scope的权限
  • 10006 必须关注此测试号
  • 10009 操作太频繁了,请稍后重试
  • 10010 scope不能为空
  • 10011 redirect_uri不能为空
  • 10012 appid不能为空
  • 10013 state不能为空
  • 10015 公众号未授权第三方平台,请检查授权状态
  • 10016 不支撑微信开放平台的Appid,请使用公众号Appid

第二步:通过code换取网页授权access_token

首先请注意,这里通过code换取的是一个特殊的网页授权access_token,与基础支撑中的access_token(该access_token用于调用其他接口)不同。公众号可通过下述接口来获取网页授权access_token。如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。

尤其注意:由于公众号的secret和获取到的access_token安全级别都非常高,必须只保存在服务器,不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤,也必须从服务器发起。

第三步:拉取用户信息(需scope为 snsapi_userinfo)

这时候请求接口

http:GET(请使用https协议) https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

正确时返回的JSON数据包如下:

{  
 "openid":" OPENID",
" nickname": NICKNAME,
"sex":"1",
"province":"PROVINCE"
"city":"CITY",
"country":"COUNTRY",
"headimgurl":    "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
"privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

这个时候就可以得到大家的uniondId

UI样式

Tencent开源了自己ui样式库

一个工具类,可以用Tencent自己的,也可以自己开源开发。

  • 1.同微信客户端一致的视觉效果,令所有微信用户都能更容易地使用你的网站或小程序
  • 2.便捷获取快速使用,降低开发和设计成本
  • 3.微信设计团队精心打造,清晰明确,简洁大方

global

git clone https://github.com/Tencent/weui.js.git

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css">
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script>
<script type="text/javascript">
    weui.alert('alert');
</script>

帮助文档

微信JS-SDK说明文档

微信JS-SDK的文档说明

js-sdk的使用

  • 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
    备注:登录后可在“开发者中心”查看对应的接口权限。
  • 在需要调用JS接口的页面引入如下JS文件,(支撑https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js
    <link rel="stylesheet" href="none">
    备注:支撑使用 AMD/CMD 标准模块加载方法加载
  • 通过config接口注入权限验证配置
    所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支撑pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList: [] // 必填,需要使用的JS接口列表
});
  • 通过ready接口处理成功验证
wx.ready(function(){
    // config信息验证后会实行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确实行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
  • 通过error接口处理失败验证
wx.error(function(res){
    // config信息验证失败会实行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});

推荐阅读更多精彩内容