风带走爱丶 發表於 2020-2-27 19:45:00

微信公众号开发总结

<p>受域名等因素的影响，在开发过程中，我们一般不采用注册的公众号来部署测试，而是采用公众平台测试号<br>
公众平台测试号访问地址<br>
在测试号页面中，我们需要获取或操作一下几个相关的配置</p>
<ul>
<li>查看测试号的 APPID 和 APPSECRET</li>
<li>给该测试号设置自定义菜单</li>
<li>修改授权回调页面域名（测试号可以采用 ip 地址加端口号）</li>
<li>扫描测试号二维码，相当于关注这个测试号</li>
<li>点击进入 “网页授权获取用户基本信息”，查看微信授权开发文档</li>
</ul>
<h3 id="一给测试号设置自定义菜单">一、给测试号设置自定义菜单</h3>
<p>给测试号设置自定义菜单需要两步操作，这里采用 postman 工具来进行发送请求</p>
<h4 id="1获取-access-token">1.获取 Access Token</h4>
<blockquote>
<p>请求方式：GET<br>
请求地址：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&amp;appid=APPID&amp;secret=APPSECRET<br>
请求参数：APPID、APPSECRET<br>
返回值：</p>
</blockquote>
<h4 id="2设置自定义菜单">2.设置自定义菜单</h4>
<blockquote>
<p>请求方式：POST<br>
请求地址：https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN<br>
请求参数：ACCESS_TOKEN（上面获取到的 access_token）<br>
返回值1(成功)：{"errcode":0,"errmsg":"ok"}<br>
返回值2(失败)：{"errcode":40018,"errmsg":"invalid button name size"}<br>
在 postman -&gt; body -&gt; raw 中添加菜单数据（json格式）</p>
</blockquote>
<pre><code class="language-js">{
    "button": [
      {
            "name": "我的项目",
            "sub_button": [
                {
                  "type": "view",
                  "name": "学习",
                  "url": "http://www.baidu.com"
                },
                {
                  "type": "click",
                  "name": "赞一下我",
                  "key": "V1001_GOOD"
                }
            ]
      },
      {
            "type": "click",
            "name": "关于",
            "key": "V1001_TODAY_MUSIC"
      }
    ]
}
</code></pre>
<h3 id="二在公众号-h5-页面微信授权登录">二、在公众号 H5 页面微信授权登录</h3>
<p><strong>开发前必读：</strong>微信授权官方文档<br>
在开发文档中说明，一般我们要进行微信授权登录需要进行一下几个操作步骤</p>
<ul>
<li>第1步：用户同意授权，获取code</li>
<li>第2步：通过code换取网页授权access_token</li>
<li>第3步：刷新access_token（如果需要）</li>
<li>第4步：拉取用户信息(需scope为 snsapi_userinfo)</li>
</ul>
<p>但是在开发之前须知一下几个事情</p>
<ul>
<li>开发可能采用的前后端分离，前端和后端可能不在同一个域名下</li>
<li>测试号“授权回调页面域名”一般设置的是后端服务（域名）地址</li>
<li>如果在前端直接向微信服务器发送获取用户信息的相关请求，会出现跨域的问题</li>
<li>公众号的 APPID、APPSECRET、Access_Token 等信息涉及到安全性，不适合直接放在前端</li>
</ul>
<p>所以一般公众号开发过程中，一般我们只有第一步是在前端做，后面三步都是在后端实现。H5 页面微信授权登录的步骤如下：</p>
<ul>
<li><strong>第一步：在前端引导用户进入微信授权登录界面</strong></li>
</ul>
<blockquote>
<p>访问地址：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&amp;redirect_uri=REDIRECT_URI&amp;response_type=code&amp;scope=SCOPE&amp;state=STATE#wechat_redirect<br>
请求参数：APPID、REDIRECT_URI、SCOPE(snsapi_base或snsapi_userinfo)<br>
请求参数说明：<br>
注意1：REDIRECT_URI 为后台地址（即下面第二步的后端接口），且必须为GET<br>
注意2：REDIRECT_URI 参数需要 encodeURIComponent 函数包裹</p>
</blockquote>
<ul>
<li><strong>第二步：后端实现一个接口，接收 code 参数，然后从微信获取用户信息并保存，最后重定向到前端首页</strong></li>
</ul>
<p>　微信授权成功后，会重定向到这个地址，并携带一个 code 参数，这个 code 参数只能被使用一次</p>
<pre><code class="language-java">package indi.tracine.demo.controller;

import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import indi.tracine.utils.HttpUtils;

/**
* @author Tracine
* @date 2020-02-24
* @description 微信授权模块
*/
@Controller
@RequestMapping("/wechat")
public class WeChatController {

    //服务号的 APPID 和 SECRET
    private static final String APP_ID = "***************************";
    private static final String APP_SECRET = "***************************";

    @RequestMapping(value = "/redirect", method = RequestMethod.GET)
    public String redirect(String code) {
                // 获取 Access Token
      String urlAccessToken = "https://api.weixin.qq.com/sns/oauth2/access_token?appid="
            + APP_ID + "&amp;secret=" + APP_SECRET + "&amp;code=" + code + "&amp;grant_type=authorization_code";
      String resultAccessToken = HttpUtils.get(urlAccessToken);
      JSONObject jsonAccessToken = new JSONObject(resultAccessToken);
      String openid = jsonAccessToken.getString("openid");
      String accessToken = jsonAccessToken.getString("access_token");

      // 获取用户信息
      String urlUserInfo = "https://api.weixin.qq.com/sns/userinfo?access_token="
            + accessToken + "&amp;openid=" + openid + "&amp;lang=zh_CN";
      String userJsonString = HttpUtils.get(urlUserInfo);
      // System.out.println(userJsonString);

      // 在这里把用户信息存入数据库
      // save();

      JSONObject userJsonObject = new JSONObject(userJsonString);
      String userOpenid = userJsonObject.getString("openid");
      String userNickname = userJsonObject.getString("nickname");

      // 前端首页地址
      String urlIndexHome = "http://192.168.23.189:8080/scholar/#/login";

      return "redirect:" + urlIndexHome+ "?openid=" + userOpenid + "&amp;nickname=" + userNickname;
    }
}
</code></pre>
<ul>
<li><strong>第三步：前端首页从url中获取参数</strong><br>
　从 url 地址中获取 openid 和 nickname 等信息，然后将信息存储在 localStorage<br>
　如果是 vue 开发，则可在路由钩子函数中判断 localStorage 判断 openid 等是否存在，否则跳转到授权登录地址</li>
</ul>
<blockquote>
<p><strong>最后总结</strong></p>
<ul>
<li>从上面三个步骤可以看出来，基本上都是进行页面重定向</li>
<li>前端登录 --(重定向)--&gt; 微信授权地址 --(重定向)--&gt; 后端接口 --(重定向)--&gt; 前端首页</li>
<li>最主要的访问微信服务器的核心</li>
</ul>
</blockquote><br><br>
来源：https://www.cnblogs.com/tracine0513/p/12373987.html
頁: [1]
查看完整版本: 微信公众号开发总结