在微信公众平台|小程序中下载微信开发者工具
申请微信公众号，进入微信公众平台|小程序 首页
      


点击  “文档”进入微信小程序介绍的界面

在微信小程序界面的菜单中  选中“开发”，点击“小程序开发”

弹出：

选中  “工具”，点击链接字 “微信开发者工具”，



点击链接字 “微信开发者工具”，进入下载界面，根据自己电脑下载不同的版本。

选中即可下载完成。

1、微信开放平台
https://open.weixin.qq.com/cgi-bin/frame?t=resource/res_main_tmpl&lang=zh_CN&target=res/app_wx_login
2、 微信公众平台开发者文档
http://mp.weixin.qq.com/wiki/index.php?title=%E9%A6%96%E9%A1%B5

微信小程序概述
小程序介绍
微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用。小程序和微信原生功能应用在本质上都是——Web App
小程序优势

微信有海量用户，依赖性很强，微信开发的产品更容易触达用户
推广app或公众号成本太高
开发适配成本低
容易小规模试错，快速迭代
跨平台

对于创业者的优势

App流量成本太高
移动互联网格局基本已定，用户主要需求场景已被巨头把持
面向所有产品对用户时间的竞争


开发环境的准备
注册过程简单，略过
下载微信开发者工具
前往官网进行下载，或者[点我](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)！！！
下载后新建项目，进去之后的界面是这样子的：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4j4ivAZg-1572602410230)(https://i.loli.net/2019/11/01/rHAebtnaYEQmoRu.png)]

小程序的结构目录
小程序框架的目标是尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。
小程序框架提供了自己的视图层描述语言WXML和WXSS，以及JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑
小程序文件结构和传统Web对比




结构
传统Web
微信小程序




结构
HTML
WXML


样式
CSS
WXSS


逻辑
JavaScript
JavaScript


配置
无
JSON


通过以上对比得出，传统Web是三层结构。而微信小程序是四层结构，多了一层配置.json
基本的项目目录
话不多说，先看下图：

这个图已经解释的非常明了了，下面对各个文件进行详细的介绍。

配置文件的介绍
一个小程序应用程序会包括最基本的两种配置文件。一种是全局的app.json和页面自己的page.json

特别注意：配置文件中不能出现注释

全局配置app.json
app.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。在我们最开始创建的项目里，app.json大概是这样的：
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

下面是app.json的一些属性：
pages属性
pages属性包含了小程序的所有目录，例如在最开始的代码中：
 "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],

这里面包含了两个页面，一个是index页面，一个是logs（日志）页面，如果我们想增加新的页面，只需要在这个属性里面添加一个路径就好了，文件目录也会帮助我们自动生成一个页面；例如，新增一个index2页面，在代码中添加：
"pages/index2/index2",

整个pages属性是这样的：
  "pages": [
    "pages/index/index",
    "pages/index2/index2",
    "pages/logs/logs"
  ],

我们点击保存ctrl + s，就会发现目录栏中多了一个文件夹，如下图所示：


哪个页面放在pages最上面，哪个就会先显示出来

比如，我们把logs页面放在最上面，即
 "pages": [
   "pages/logs/logs",
   "pages/index/index",
   "pages/index2/index2"
 ],

点击保存后，会发现，日志页面出现了最上面，这里不再贴图，读者自己动手实践！！！

window属性
用于设置小程序的状态栏、导航条、标题、窗口背景色。在最开始的代码中：
 "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },

最开始的window属性包含了backgroundTextStyle、navigationBarBackgroundColor、navigationBarTitleText、navigationBarTextStyle，下表展示了window的所有属性:




属性
类型
默认值
描述




navigationBarBackgroundColor
HexColor
#000000
导航栏背景颜色


navigationBarTextStyle
string
white
导航栏标题颜色，仅支持 black / white


navigationBarTitleText
string

导航栏标题文字内容


navigationStyle
string
default
导航栏样式，仅支持以下值：default 默认样式、custom 自定义导航栏，只保留右上角胶囊按钮


backgroundColor
HexColor
#ffffff
窗口的背景色


backgroundTextStyle
string
dark
下拉 loading 的样式，仅支持 dark / light


backgroundColorTop
string
#ffffff
顶部窗口的背景色，仅 iOS 支持


backgroundColorBottom
string
#ffffff
底部窗口的背景色，仅 iOS 支持


enablePullDownRefresh
boolean
false
是否开启全局的下拉刷新


onReachBottomDistance
number
50
页面上拉触底事件触发时距页面底部距离，单位为 px


pageOrientation
string
portrait
屏幕旋转设置，支持 auto / portrait / landscape


下面是对window属性的几个属性的调用演示：

例如，把导航栏标题颜色改为蓝色，把标题改为你妈喊你回家吃饭啦，顺便把导航栏标题颜色改为白色，然后加一个下拉刷新功能，只需要在window里面加几个属性就可以了~~

  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#4e91f6",
    "navigationBarTitleText": "你妈喊你回家吃饭啦",
    "enablePullDownRefresh": true,
    "navigationBarTextStyle": "white"
  },

代码已经写好，来看一下效果好了，下面是一张gif图：

tabBar属性
如果小程序是一个多tab应用（底部或顶部有tab栏可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。下表是tab的属性：




属性
类型
必填
默认值
描述




color
HexColor
是

tab 上的文字默认颜色，仅支持十六进制颜色


selectedColor
HexColor
是

tab 上的文字选中时的颜色，仅支持十六进制颜色


backgroundColor
HexColor
是

tab 的背景色，仅支持十六进制颜色


borderStyle
string
否
black
tabbar 上边框的颜色， 仅支持 black / white


list
Array
是

tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab


position
string
否
bottom
tabBar 的位置，仅支持 bottom / top


custom
boolean
否
false
自定义 tabBar


其中list接受一个数组，只能配置最少2个、最多5个tab。tab按数组的顺序排序，每个项都是一个对象，下表是list的属性值：




属性
类型
必填
说明




pagePath
string
是
页面路径，必须在 pages 中先定义


text
string
是
tab 上按钮文字


iconPath
string
否
图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon


selectedIconPath
string
否
同上


下面通过一个样例演示一下tab的作用：

这次我想加一个底部栏，栏目里面有首页和日志两个选项，并且底部栏和导航栏的颜色一致，并且要有四个图标，其中两个作为未被选中时的的图标，另外两个作为被选中时的图标。这里给大家推荐一个网站：https://www.easyicon.net/ 这个网站上有大量icon图标哟~

"tabBar": {
    "color": "#000",
    "selectedColor": "#000000",
    "backgroundColor": "#4e91f6",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icon/index.png",
        "selectedIconPath": "icon/Selindex.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "icon/log.png",
        "selectedIconPath": "icon/Sellog.png"
      }
    ]
  }

效果请见下方gif图：

选的icon略丑，请忽略我的审美…………

1、微信公众平台文档入口

微信公众平台入口地址：https://mp.weixin.qq.com/，截图： 


进入之后的文档地址： 
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432 




2、微信网页授权

介绍：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842 

具体内容： 

如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。

关于网页授权回调域名的说明

1、在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头； 

即：公众号设置里面–>公众号设置 —>功能设置  里面的    网页授权域名 不用带http或https字样 

类似 


2、授权回调域名配置规范为全域名，比如需要网页授权的域名为：www.qq.com，配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com无法进行OAuth2.0鉴权

3、如果公众号登录授权给了第三方开发者来进行管理，则不必做任何设置，由第三方代替公众号实现网页授权即可

关于网页授权的两种scope的区别说明

1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）

2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

3、用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其他微信接口，都是需要该用户（即openid）关注了公众号后，才能调用成功的。

关于网页授权access_token和普通access_token的区别

1、微信网页授权是通过OAuth2.0机制实现的，在用户授权给公众号后，公众号可以获取到一个网页授权特有的接口调用凭证（网页授权access_token），通过网页授权access_token可以进行授权后接口调用，如获取用户基本信息；

2、其他微信接口，需要通过基础支持中的“获取access_token”接口来获取到的普通access_token调用。

关于UnionID机制

1、请注意，网页授权获取用户基本信息也遵循UnionID机制。即如果开发者有在多个公众号，或在公众号、移动应用之间统一用户帐号的需求，需要前往微信开放平台（open.weixin.qq.com）绑定公众号后，才可利用UnionID机制来满足上述需求。

2、UnionID机制的作用说明：如果开发者拥有多个移动应用、网站应用和公众帐号，可通过获取用户基本信息中的unionid来区分用户的唯一性，因为同一用户，对同一个微信开放平台下的不同应用（移动应用、网站应用和公众帐号），unionid是相同的。

关于特殊场景下的静默授权

1、上面已经提到，对于以snsapi_base为scope的网页授权，就静默授权的，用户无感知；

2、对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是scope为snsapi_userinfo，也是静默授权，用户无感知。

具体而言，网页授权流程分为四步：



1、引导用户进入授权页面同意授权，获取code

2、通过code换取网页授权access_token（与基础支持中的access_token不同）

3、如果需要，开发者可以刷新网页授权access_token，避免过期

4、通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）

目录



1 第一步：用户同意授权，获取code
2 第二步：通过code换取网页授权access_token
3 第三步：刷新access_token（如果需要）
4 第四步：拉取用户信息(需scope为 snsapi_userinfo)
5 附：检验授权凭证（access_token）是否有效

第一步：用户同意授权，获取code

在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认拥有scope参数中的snsapi_base和snsapi_userinfo），引导关注者打开如下页面：



https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。

尤其注意：由于授权操作安全等级较高，所以在发起授权请求时，微信会对授权链接做正则强匹配校验，如果链接的参数顺序不对，授权页面将无法正常访问



参考链接(请在微信客户端中打开此链接体验):
scope为snsapi_base
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect
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，应当使用https链接来确保授权code的安全性。

参数说明



参数             是否必须           说明
appid             是         公众号的唯一标识
redirect_uri      是         授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
response_type     是         返回类型，请填写code
scope             是         应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
state             否         重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
#wechat_redirect  是         无论直接打开还是做页面302重定向时候，必须带此参数

要注意的是：这里的redirect_uri要在代码层面进行url.encode,示例代码：



/**
 * 获取微信code的值
 */
@RequestMapping("/accredit")
    public String accredit(
            HttpServletResponse response,
            HttpServletRequest request,
            Model model,
            @RequestParam(value = "state",required = false,defaultValue = "-1") Long state) throws Exception {
        log.info("【微信-授权】微信授权,获取微信code");
        //thirdPart_weixin_app_id   :wxxxxxxxxxx04
        //thirdPart_domain          :http://网页授权域名/
        //这里可以最后直接redirect到java后端action地址。也可以直接redirect到前端页面地址。前提条件是这两个地址对应的域名是上面配置的"网页授权域名"
        //String redirectUri = URLEncoder.encode(SysConfig.getValue("thirdPart_domain") + "/wap/thirdPart/accreditCallback","utf-8");
        String redirectUri = URLEncoder.encode(SysConfig.getValue("thirdPart_redirect_url"));
        String url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + SysConfig.getValue("thirdPart_weixin_app_id")
                + "&redirect_uri=" + redirectUri
                + "&response_type=code"
                + "&scope=snsapi_userinfo"
                //这个state最后会在跳转后在redirect_url后面携带过去，同样微信code也可以携带过去，显示的现象是redirect_url实际的url后面多了?code=xxxxx&state=xxx 这样的内容。
                //如果是java后端的action，可以通过方法定义中的String code,Long state来接收这两个参数
                + "&state=" + state
                + "#wechat_redirect";
        logger.info("url>>>>>>>>>>>>>>>>>>>>>>>>>>" + url);
        //要注意的是这里必须是重定向的，如果是返回json类型的，证明是不可行的，不要再走死胡同了
        return "redirect:" + url;
    }

下图为scope等于snsapi_userinfo时的授权页面： 


用户同意授权后 

如果用户同意授权，页面将跳转至 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获取用户信息等步骤，也必须从服务器发起。

请求方法



获取code后，请求以下链接获取access_token：  https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

参数说明



参数  是否必须    说明
appid   是   公众号的唯一标识
secret  是   公众号的appsecret
code    是   填写第一步获取的code参数
grant_type  是   填写为authorization_code

返回说明

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



{ "access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE" }



参数  描述
access_token    网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
expires_in  access_token接口调用凭证超时时间，单位（秒）
refresh_token   用户刷新access_token
openid  用户唯一标识，请注意，在未关注公众号时，用户访问公众号的网页，也会产生一个用户和公众号唯一的OpenID
scope   用户授权的作用域，使用逗号（,）分隔

错误时微信会返回JSON数据包如下（示例为Code无效错误）:



{"errcode":40029,"errmsg":"invalid code"}

案例：



/**
     * 微信回调，获取微信access_ticket，获取用户信息接口
     * @param response
     * @param request
     * @param code          :微信code
     * @return
     */
    @ResponseBody
    @RequestMapping("/accreditCallback")
    public String accreditCallback(
            HttpServletResponse response,
            HttpServletRequest request,
            String code
            ) {
        log.info("【xxxx分享-授权-回调】微信用户授权获取用户信息开始");
        log.info("【xxxx分享-授权-回调】获取到微信code,code = {},参数params = {}" , code);

        AjaxResponseObj ajaxObj = new AjaxResponseObj();

        try {
            if (StringUtils.isNotBlank(code)) {
                //thirdPart_weixin_app_id  ----> xxxxx_weixin_app_id    ---->     :wxxxxxxxxxxxxxxxx04
                //thirdPart_domain   ----->  xxxxxx_weixin_app_secret    ---->    :http://网页授权域名/
                //thirdPart_weixin_app_secret ---> xxxxx_weixin_app_secret  --->  :d9xxxxxxxxxxxxcca925c92ef
                String authUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?" +
                        "appid=" + SysConfig.getValue("thirdPart_weixin_app_id") +
                        "&secret=" + SysConfig.getValue("thirdPart_weixin_app_secret") +
                        "&code=" + code +
                        "&grant_type=authorization_code";
                String result = HttpClientUtil.getInstance().sendHttpGet(authUrl);
                JSONObject json = JSONObject.fromObject(result);
                log.info("【xxxx分享-授权-回调】返回的用户信息是：{}",json.toString());
                log.info("【xxxx分享-授权-回调】微信用户授权回调返回的状态值：" + (!json.containsKey("errcode")));
                if(!json.containsKey("errcode")) { //调用正确
                    //获取openid
                    String openId = json.getString("openid");
                    String access_token = json.getString("access_token");
                    logger.info("access_token=============" + access_token);
                    XXXXSysUserThreeInfo tb = new XXXXSysUserThreeInfo();
                    tb.setUid(openId);
                    tb.setOpenid(openId);
                    tb.setType(SysUserThreeTypeEnum.REDENVELOPE.getValue());
                    tb.setAccessToken(access_token);
                    //通过access_token, openId获取微信的用户信息
                    WeiXinUserResponse weiXinUserResponse= WeiXinUtil.getScopeUsersDetail(access_token, openId);
                    logger.info("=================微信用户信息 start===================");
                    logger.info(weiXinUserResponse.toString());
                    logger.info("=================微信用户信息 end===================");

                    if(null != weiXinUserResponse) {
                        //tb.setUid(weiXinUserResponse.getUnionid());
                        //替换昵称存在特殊字符串情况,使用*替换
                        tb.setName(StringUtil.removeFourChar(filterEmoji(weiXinUserResponse.getNickname())));
                        log.info("【xxx分享-授权-回调】用户详情获取成功,昵称：" + weiXinUserResponse.getNickname()+":转换后昵称:"+tb.getName());
                        tb.setIconurl(weiXinUserResponse.getHeadimgurl());
                    }

                    //这里略去若干敏感代码

                    if (null != xxxSysUser) {
                        String redirectUrl = SysConfig.getValue("thirdPart_redirect_url");
                        if (StringUtils.isNotEmpty(redirectUrl)) {
                            //获取到系统内的ticket
                            String loginTicket = createLoginTicket(user,userTypestr,2);
                            Map<String,Object> callBackData = new HashMap<String,Object>();
                            callBackData.put("ticket",loginTicket);

                            ajaxObj.setData(callBackData);
                            ajaxObj.setStatus(1);
                            ajaxObj.setShowMessage("成功获取用户信息");

                            //注意，这里是使用的ajax接口返回，若项目没有做前后端分离，可以直接使用redirect:url的方式重定向到相应的页面，并可以可以把相应的参数携带过去。
                            return ajaxObj.getJsonpData(request,response);
                        }
                    }
                }else{
                    //略去若干敏感代码
                    ajaxObj.setStatus(0);
                    ajaxObj.setData("");
                    ajaxObj.setShowMessage("获取用户信息失败");

                    return ajaxObj.getJsonpData(request,response);
                }
            }

            ajaxObj.setStatus(0);
            ajaxObj.setShowMessage("微信code为空");
            ajaxObj.setData("");
            return ajaxObj.getJsonpData(request,response);
        } catch (Exception e) {
            //略
            return ajaxObj.getJsonpData(request,response);
        }
    }

    /**
     * 过滤表情
     * @param source
     * @return
     */
    public static String filterEmoji(String source) {
        if(StringUtils.isNotEmpty(source)) {
            Pattern emoji = Pattern.compile ("[\ud83c\udc00-\ud83c\udfff]|[\ud83d\udc00-\ud83d\udfff]|[\u2600-\u27ff]",Pattern.UNICODE_CASE | Pattern . CASE_INSENSITIVE ) ;
            Matcher emojiMatcher = emoji.matcher(source);
            if ( emojiMatcher.find()) {
                source = emojiMatcher.replaceAll("*");
                return source ;
            }
            return source;
        }
        return source;
    }


第三步：刷新access_token（如果需要）

由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。

请求方法



获取第二步的refresh_token后，请求以下链接获取access_token：
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN



参数  是否必须    说明
appid   是   公众号的唯一标识
grant_type  是   填写为refresh_token
refresh_token   是   填写通过access_token获取到的refresh_token参数

返回说明

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



{ "access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE" }



参数  描述
access_token    网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
expires_in  access_token接口调用凭证超时时间，单位（秒）
refresh_token   用户刷新access_token
openid  用户唯一标识
scope   用户授权的作用域，使用逗号（,）分隔

错误时微信会返回JSON数据包如下（示例为code无效错误）:



{"errcode":40029,"errmsg":"invalid code"}

第四步：拉取用户信息(需scope为 snsapi_userinfo)

如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了。

请求方法



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

参数说明



参数              描述
access_token    网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
openid          用户的唯一标识
lang            返回国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语

返回说明

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



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



参数  描述
openid  用户的唯一标识
nickname    用户昵称
sex 用户的性别，值为1时是男性，值为2时是女性，值为0时是未知
province    用户个人资料填写的省份
city    普通用户个人资料填写的城市
country 国家，如中国为CN
headimgurl  用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。
privilege   用户特权信息，json 数组，如微信沃卡用户为（chinaunicom）
unionid 只有在用户将公众号绑定到微信开放平台帐号后，才会出现该字段。

错误时微信会返回JSON数据包如下（示例为openid无效）:



{"errcode":40003,"errmsg":" invalid openid "}

附：检验授权凭证（access_token）是否有效

请求方法



http：GET（请使用https协议） https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID

参数说明



参数  描述
access_token    网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
openid  用户的唯一标识

返回说明 

正确的JSON返回结果：



{ "errcode":0,"errmsg":"ok"}

错误时的JSON返回示例：



{ "errcode":40003,"errmsg":"invalid openid"}

案例：




public class WeiXinUtil {

    //网页授权获取用户信息
    public static final String GET_SCOPE_USER = "https://api.weixin.qq.com/sns/userinfo";

    /**
     * 根据openid获取用户信息
     * @param access_token
     * @param open_id
     * @return
     */
    public static WeiXinUserResponse getScopeUsersDetail(String access_token,String open_id){
        WeiXinUserResponse tb=null;
        try{
            String url = GET_SCOPE_USER+"?access_token=" + access_token+"&openid="+open_id+"&lang=zh_CN";
            //URLConnectionUtil 可以通过编写httpclient来替换
            String result  = URLConnectionUtil.getHttps(url);
            if(StringUtils.isNotEmpty(result)){
                JSONObject jo=JSONObject.fromObject(result);
                if(!jo.containsKey("errcode")){
                    jo.remove("privilege");
                    tb=(WeiXinUserResponse)JSONObject.toBean(jo, WeiXinUserResponse.class);
                }
            }
        }catch(Exception e){
            e.printStackTrace();
        }
        return tb;
    }
}


import java.io.Serializable;

import org.apache.ibatis.type.Alias;
@Alias("WeiXinUserResponse")
public class WeiXinUserResponse implements Serializable{

    private static final long serialVersionUID = 1L;
    private String openid;//    用户的唯一标识
    private String nickname;//  用户昵称
    private String sex;//   用户的性别，值为1时是男性，值为2时是女性，值为0时是未知
    private String province;//  用户个人资料填写的省份
    private String city;//  普通用户个人资料填写的城市
    private String country;//   国家，如中国为CN
    private String headimgurl;//    用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。
    private String unionid;//


    public String getOpenid() {
        return openid;
    }
    public void setOpenid(String openid) {
        this.openid = openid;
    }
    public String getNickname() {
        return nickname;
    }
    public void setNickname(String nickname) {
        this.nickname = nickname;
    }
    public String getSex() {
        return sex;
    }
    public void setSex(String sex) {
        this.sex = sex;
    }
    public String getProvince() {
        return province;
    }
    public void setProvince(String province) {
        this.province = province;
    }
    public String getCity() {
        return city;
    }
    public void setCity(String city) {
        this.city = city;
    }
    public String getCountry() {
        return country;
    }
    public void setCountry(String country) {
        this.country = country;
    }
    public String getHeadimgurl() {
        return headimgurl;
    }
    public void setHeadimgurl(String headimgurl) {
        this.headimgurl = headimgurl;
    }
    public String getUnionid() {
        return unionid;
    }
    public void setUnionid(String unionid) {
        this.unionid = unionid;
    }
    public static long getSerialversionuid() {
        return serialVersionUID;
    }

}




3、公众号网页测试

在前端开发的时候，如果是写一点然后在手机微信里面进行测试，这种方式显的低效，微信提供了一个“微信开发者工具”关于前端的调试，可以再这个工具中进行调试： 

下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 


下载安装后工具界面如下： 


如果调试的时候，发现提示”未绑定开发者账号”，需要到微信公众平台中“开发者工具”(名称忘记了，好像是这个)去绑定自己的微信账号。

在绑定过程中提示 要绑定的微信的 需要关注”公众平台安全助手”，然后打开自己的手机，登录自己的微信，进入”发现”频道–>在搜索栏输入”公众平台安全助手”，然后进行关注。 


然后在回到公众平台管理后台，进行设置。设置完成后，发现还需要进入自己的手机上的”公众平台安全助手”中接受并同意邀请。 

界面类似： 




3、微信公众平台测试号申请接入案例

http://blog.csdn.net/u014427391/article/details/50963607

http://blog.csdn.net/mzmzo/article/details/50991616

4、微信公众平台项目部署