微信公众号开发基础框架—入门级

公众号和小程序作为微信的两大生态，对于开发者而言。基本上是绕不过去的两座大山。前面我已经出了几期博客关于小程序授权登录的。那么今天就来分享一下关于公众号授权回调这块吧。业务场景：假如需要做一个公众号表单收集，那么第一步绕不开的是不是还是授权呢？

1.准备工作 

        相信很多程序员一般接手的都是他人项目进行二次开发，所以基本也很少去考虑项目底层的架构，请求的封装，权限的控制，路由的拦截等等这些。这些都是别人做好的，我们拿来即用就行，只管关注写页面和对接口就行。但是，如果不试试从零开始做一个完整的项目，你又怎么知道自己的不足呢。

        假如，现在一个问题摆在你面前，leader要你做一个公众号进行用户信息及表单收集。整个前端就只有你自己。试问此刻阁下又该如何自处？

        底层框架的搭建，直接去git或开源社区上找。我并不反对在他人开源的项目基础上做二次开发，毕竟站在巨人的肩膀上会让我们更加事半功倍。前提你拥有理解并改动他人底层代码的能力。使其更加契合你系统本身的业务。

下面以该基础框架项目做演示，也是在git上找的。并经过了本地测试（利用测试公众号脱离后端的情况下）。实现了授权回调。

1.公众号H5基础框架：https://download.csdn.net/download/qq_34761385/89045823

2.先理解下公众号官方文档关于授权这块的说法：

网页授权 | 微信开放文档

 3.申请测试公众号

 微信公众平台  去该平台申请一个测试公众号，获取公众号的appid和secret。

2.本地调试过程

        将代码下载到本地运行后，即可在微信开发者工具中打开地址。访问后就会不出意外的报错。不要害怕，我们针对问题一步步解决，这个解决问题的过程也是我们了解微信公众号生态的过程。

tips:这里有人会有疑问，为什么能授权回调获取到信息，一般不是通过后端才能解密获取吗，这里是因为用了代理。直接和微信服务器做了对接。

这里授权回调核心代码就是app.vue

<template>
  <div id="app">
    <div v-if="isLoading" class="loading">
      <img
        src="./assets/public/loading.gif"
        alt="图片加载失败"
        srcset=""
      >
      <p>加载中...</p>
    </div>
    <div v-else-if="!isLoading && runEnv === 1" class="warning">
      <img
        src="./assets/public/warning.png"
        alt="图片加载失败"
        srcset=""
      >
      <p class="errorColor">本地调试请在微信开发者工具中打开</p>
      <ul>
        <li>1.微信开发者工具左上角-->微信开发者工具</li>
        <li>2.更换开发模式-->公众号网页调试</li>
        <li>
          <span>3.输入</span>
          <van-button v-copy="open_url" type="primary" size="mini">复制</van-button><br>
          <span>{{ open_url }}</span><br>
          <span class="errorColor">务必是该公众号的开发人员并且关注了公众号</span>
        </li>
      </ul>
    </div>
    <div v-else-if="!isLoading && runEnv === 2" class="warning">
      <img
        src="./assets/public/warning.png"
        alt="图片加载失败"
        srcset=""
      >
      <p class="errorColor">请在微信中打开</p>
    </div>
    <div v-else-if="!isLoading && runEnv === 4" class="warning">
      <img
        src="./assets/public/warning.png"
        alt="图片加载失败"
        srcset=""
      >
      <p class="errorColor">加载失败，请刷新或退出重试</p>
    </div>
    <router-view v-else-if="(!isLoading && runEnv === 0) || (!isLoading && runEnv === 3)" />
  </div>
</template>

<script>
import wx from '@/utils/wx'
import { getWxToekn, getWxUserInfo } from '@/api/public'
export default {
  name: 'App',
  data() {
    return {
      // 微信配置
      wxConfig: {
        appid: 'wxc3c853868437900d',
        AppSecret: '3ba0e66a7a12fd1434f2fbbd759143ef',
        // 本地的时候需要netapp映射一下，具体可百度
        redirect_url: process.env.NODE_ENV === 'development' ? 'http://liuqing.top:8080' : location.protocol + '//' + location.host,
        // 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）
        scope: 'snsapi_userinfo',
        // 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
        state: '0',
        // 获取code
        code: this.$func.getUrlParam('code')
      },
      // 微信的url
      open_url: '',
      // 是否加载完毕
      isLoading: true,
      // 0:本地，开发者工具环境  1:本地，浏览器环境  2:线上，浏览器环境 3:线上，微信环境 4:线上或本地(开发者工具环境)->但是加载wx-sdk失败了
      runEnv: -1
    }
  },
  mounted() {
    // 需要微信回调code的url
    this.open_url =
    'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.wxConfig.appid +
    '&redirect_uri=' + this.wxConfig.redirect_url +
    '&response_type=code' +
    '&scope=' + this.wxConfig.scope +
    '&state=' + this.wxConfig.state +
    '#wechat_redirect'
    // 微信环境准备
    wx(this.wxConfig, this.open_url).then((obj) => {
      this.runEnv = obj.env
      // 获取token
      getWxToekn({
        appid: this.wxConfig.appid,
        secret: this.wxConfig.AppSecret,
        code: this.wxConfig.code,
        grant_type: 'authorization_code'
      }).then(res => {
        this.$store.commit('user/wxUserAc', res)
        // 获取用户信息
        getWxUserInfo({ openid: res.openid, access_token: res.access_token }).then(res2 => {
          this.isLoading = false
          this.$store.commit('user/wxUser', res2)
        })
      })
    }).catch((obj) => {
      this.isLoading = false
      this.runEnv = obj.env
      this.$notify({ type: 'danger', message: obj.msg })
    })
  },
  methods: {
  }
}
</script>

<style lang="css" scoped>
#app {
  width: 92%;
  padding: 0 4%;
  margin-top: 40px;
  word-wrap:break-word;
  word-break:break-all;
}
#app .warning > img {
  display: block;
  margin: 0 auto;
}
.errorColor {
  color: #ff4a4a;
}
#app .warning > p {
  text-align: center;
  font-size: 16px;
  margin-top: 30px;
}
#app .warning > ul > li {
  margin: 5% 0;
}
#app .warning > ul > li > span.errorColor {
  font-size: 14px;
}
#app .loading {
  width: 100%;
}
#app .loading > img {
  width: 100%;
  height: 100%;
}
#app .loading > p {
  font-size: 16px;
  text-align: center;
  font-weight: 600;
  padding: 0;
  margin: 0;
}
</style>

下面我要说的就是涉及后端做的工作，但是因为这里我们用到了测试公众号，又是走的代理直接对接微信服务请求，所以就绕过了后端。 

从这里的回调地址构建代码就能看出来，appid和AppSecret填写你申请的测试公众号的，微信开发是需要有开发权限的，所以别忘了去扫码关注测试号，绑定上你的微信号。然后，回调一般来说必须走域名，而且域名还要做公众号网页授权回调域名绑定。这里我们在测试公众号进行绑定就行，域名+端口的形式。

因为本地一般都是走的ip+端口。那么怎么实现域名加端口能访问到本地启动的服务呢，这里我们就涉及到了hosts文件的修改了，一般在C:\Windows\System32\drivers\etc目录下。

这样就实现了本地的授权回调了，通过这一系列操作，是不是对微信公众号的开发有了更深刻的理解了呢。