微信公众号本地开发流程

1.建立测试号

直接打开链接，微信扫码登录即可测试号管理页面  https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index ，如下图所示

 

2.在测试号中的【网页授权获取用户基本信息】中，设置回调地址IP（localhost,127.0.0.1均不能使用，请使用局域网IP或域名，测试号回调地址支持域名和ip，正式公众号回调地址只支持域名。）

 

3.下载微信开发者工具，选择公众号网页开发

 

 

4.填写要测试的地址，修改rediect_uri回调地址， 访问腾讯服务器url规则如下:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=你当前测试号的appid&redirect_uri=你的接口路径(记得uri码)&response_type=code&scope=snsapi_userinfo#wechat_redirect

5.访问以上地址的话，微信服务器会转发到另一个地址，地址中包含code，可以通过code获取到用户的openId（openId是微信用户唯一凭证）

例如：http://www.baidu.com/spic&code=071kLtzG0DosVc2TypxG0RpwzG0kLtzF&state=

http://第4步中填写的接口路径?code=微信服务器返回的code值&state=

注意，每次访问第4步的地址，微信服务器都会返回不同的code，code只能使用一次，用完就失效了，每个微信用户的不同code，都指向用户唯一的oppenId

根据code获取用户openId的方法，可以前端来获取，也可以通过后端来获取，前端获取的方法我之前的博客里有写，这里不再叙述了~~

6.获取到用户的唯一凭证openId，然后可以根据openId来判断用户登录和认证的状态，然后根据业务执行不同的操作，如下图所示

 

7.设置微信公众号的自定义菜单

打开链接 https://mp.weixin.qq.com/debug/ ，选择基础支持，让填写测试号的appID和appsecret来获取token，如图所示，然后选择自定义菜单功能，填入token和用户自己写好的菜单栏JSON，来检验菜单是否正确，操作如图所示

{
    "button": [
        {
            "name": "查询", 
            "sub_button": [
         {
                    "type": "view", 
                    "name": "菜单目录", 
                    "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXXXX&redirect_uri=XXXXXXXX&response_type=code&scope=snsapi_userinfo#wechat_redirect", 
                    "sub_button": [ ]
                }, 
                {
                    "type": "view", 
                    "name": "菜单目录", 
                    "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXXXX&redirect_uri=XXXXXXXX&response_type=code&scope=snsapi_userinfo#wechat_redirect", 
                    "sub_button": [ ]
                }, 
                {
                    "type": "view", 
                    "name": "菜单目录", 
                    "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXXXX&redirect_uri=XXXXXXXX&response_type=code&scope=snsapi_userinfo#connect_redirect=1#wechat_redirect", 
                    "sub_button": [ ]
                }
            ]
        }, 
        {
            "type": "view", 
            "name": "菜单目录", 
            "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXXXX&redirect_uri=XXXXXXXX&response_type=code&scope=snsapi_base#connect_redirect=1#wechat_redirect", 
            "sub_button": [ ]
        }, 
        {
            "type": "view", 
            "name": "菜单目录", 
            "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXXXX&redirect_uri=XXXXXXXX&response_type=code&scope=snsapi_base#connect_redirect=1#wechat_redirect", 
            "sub_button": [ ]
        }
    ]
}

 

 

 

 8.其他就是前端项目的搭建（我前端项目采用的Nuxt + Vant框架）、项目内部业务处理了~~

嗯，就酱~~