乐趣区

关于前端:h5页面获取微信code

jiezi

最近要求做一个 h5 签到页面，需要是在微信外面扫描二维码链接，不同城市的共事填写个人信息，提交到后盾，实现签到性能。
微信受权文档，

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect\_uri=REDIRECT\_URI&response\_type=code&scope=SCOPE&state=STATE#wechat\_redirect，这个是获取微信 code 的申请，

          // 为测试号 id
          let appid = "你的 appid"; 
          // 正式门路
          let link = '你的 h5 正式门路';
          // 重定向后会带上 state 参数，我这边的需要要辨别是哪个城市的，不须要参数能够不写 state 这个字段
          let city = 'nj';                
          window.location.href =
            `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(link)}&response_type=code&scope=snsapi_base&state=${city}#wechat_redirect`;

我这边只须要获取 open, 所以用的静默受权 scope=snsapi_base
我这边须要判断是否是微信内置浏览器关上，还有截取判断公众号截取 code，上面是我这一整个业务的代码：

<template>
  <div class="index">
    <div>
      <div class="isWechatBrowser" v-if="isWechatText"> 请用微信内置浏览器关上 </div>
      <alert v-model="isWechatBrowser" title="提醒"> 请用微信内置浏览器关上 </alert>
    </div>
  </div>
</template>
<script>
  import {enterData} from "@/assets/js/api";
  import {Alert} from "vux";

  // 判断是否为公众号模拟器环境
  const isWechat = () => {return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
  };
  // 判断公众号截取 code
  const getUrlParam = (name) => {let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    let r = window.location.search.substr(1).match(reg);
    if (r != null) {return unescape(r[2]);
    }
    return null;
  }

  export default {
    name: "index",
    data() {
      return {
        // 弹层，是否是微信内置浏览器
        isWechatBrowser: false,
        // 微信 code
        wxCode: '',
        isWechatText: false,
      };
    },
    components: {Alert},
    methods: {
      
      // 获取微信 code
      getWxCode() {if (isWechat()) {let code = getUrlParam('code');
          this.isWechatText = false;
          if (code) {
            this.wxCode = code;
            console.log(this.wxCode)
            return;
          }

          // 为测试号 id
          let appid = "appid"; 
          // 正式门路
          let link = '正式门路';    
          let city = 'nj';                
          window.location.href =
            `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(link)}&response_type=code&scope=snsapi_base&state=${city}#wechat_redirect`;
 
        } else {
          // 不是用微信关上链接
          this.isWechatBrowser = true;
          this.isWechatText = true;
        }
      },

    },
    mounted() {
      // 页面一加载就执行
      this.getWxCode();}
  };
</script>

<style lang="sass" scoped>
  
</style>

逻辑都在 getWxCode()这个办法外面。
先判断是否为公众号模拟器环境。上面调用 getUrlParam(‘code’)这个办法，如果有的话，阐明曾经申请获取到了，如果没有获取到的话，就去申请微信接口获取 code。获取胜利之后，就能够把 code 给后端，后端申请拿失去 openid 了。
下面的代码不多，然而参考了很多的网上的写法，我把这些链接也贴出来，心愿能帮到须要的人。
通过微信网页受权获取用户 OpenId（微信公众平台配置我次要参考这个链接）
微信 H5 受权获取 code，拿取用户信息（我次要参考这位前辈的代码，写的真好）
在公众号配置域名
微信开放平台
微信开放平台（另一个），
在看了官网的文档和下面各位前辈的代码后，我这边是实现了需要了的，很感激他们，也心愿能帮到须要的敌人。

退出移动版