vue开发微信公众号--开发准备

因为工做项目的缘由，须要使用vue开发微信公众号，可是这种微信公众号更可能是将APP套了一个微信的壳子，除了前面的受权和微信有关系之外，其余的都和微信没多大的关系了，特此记录

开发流程

首先须要在电脑上安装微信web开发者工具和花生壳（内网穿透），而后有一个微信公众平台的帐号

第一步：

下载安装花生壳，点击内网穿透

而后会在浏览器中打开下面这个界面

这里须要注意的是外网访问地址和内网主机地址。

第二步：

登陆微信公众平台后，滚动页面到最下面，点击开发下面的开发者工具。

而后选择公众平台测试帐号，会新打开一个测试号管理的页面

在测试号管理页面，须要修改两个地方，将地址换成第一步中的外网访问地址：

第一个：

第二个（此时不须要前面的http://）：

除了修改上面两个地方之外，做为测试号，还须要将当前页面前面的测试号信息发给后台

如今，前台的基本配置已经完成了。

 项目配置

第一步：

首先须要建立项目，和建立其余的vue项目如出一辙，直接使用脚手架建立就能够了。

项目建立完成后，须要安装微信的SDK：npm install weixin-js-sdk --save

另外，因为vue项目默认是使用localhost打开的，可是这样是微信公众号，须要在微信web开发者工具中打开，因此须要更改成经过ip访问：

打开根目录下的config/index.js，修改文件内dev里面的host和port

这里的地址应该是电脑的IP，端口是能够自定义的，修改完成后，须要修改第一步花生壳中的那个内网主机，让二者保持一致。

如今，启动项目，在浏览器中输入192.168.0.3:8080若是能够打开项目的话，那么项目建立就没有问题了。

因为使用花生壳穿透之后，192.168.0.3:8080对应的就是花生壳里面的外网访问地址，因此打开微信web开发者工具，输入穿透后的外网访问地址，也是能够打开项目的。

第二步：

在进行受权前，须要获取code，而后经过code去到后台换取openID。因为在本项目中采用的是强制受权，分别写了两个页面：login和getCode用于进行受权：

login.vue是项目的默认显示页面

<template>
  <div class="hello"></div>
</template>

<script>
import * as sessiondate from '../service/staticData'
import { Indicator } from 'mint-ui';
import { mapMutations,mapState } from 'vuex'
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created(){
     window.location.href=sessiondate.weixin;
  },
  methods: {}
}
</script>
<style scoped>
</style>

其中的sessiondate.weixin是本身配置的。

staticData.js

export const weixin='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx503236dfa82f2a64&redirect_uri=http%3A%2F%2F2ir3745783.zicp.vip%2f%23%2fgetCode&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect'

其中appid=wx503236dfa82f2a64是测试号管理中的appId，redirect_uri=http%3A%2F%2F2ir3745783.zicp.vip%2f%23%2fgetCode则表示的是获取code的页面，也就是上面说的getCode.vue这个页面的访问路径，而后经过了转码。

当项目启动，进入login页面后，就会自动执行生命周期函数里面的代码，页面就会跳转到getCode.vue页面。

getCode.vue

<template>
  <div class="hello"></div>
</template>

<script>
import * as apidate from "../service/api";
import { Indicator } from "mint-ui";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  created() {
    // 'snake'、'fading-circle'、'double-bounce'、'triple-bounce'
    Indicator.open({
      text: "Loading...",
      spinnerType: "triple-bounce"
    });
    this.Code();
  },
  methods: {
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    Code() {
      this.$store.commit("changeToken", null);
      this.$store.commit("changeCode", this.getQueryString("code"));
      this.axios
        .get(apidate.getOpenId1 + "?code=" + this.getQueryString("code"))
        .then(res => {
          if (res.data.msg == "bind") {
            Indicator.close();
            this.$store.commit("changeOpenId",res.data.data);
            this.$router.push("bind");
          } else if (res.data.msg == "newtoken") {
            this.$store.commit("changeToken", res.data.data.token.access_token);
            this.$store.commit("changeUserInfo", res.data.data.user);
            this.$store.commit("changeOpenId",res.data.data.user.openId);
            Indicator.close();
            this.$router.push("home");
          }
        })
        .catch(err => {});
    }
  }
};
</script>

<style scoped>
</style>

路由跳转到这个页面后，地址栏里面就会带有code，咱们须要拿到这个code，而后去后台换取openid和其余的信息。因为这个过程须要时间，所以在页面进入时，默认显示一个加载圈。

 

获取code

经过code去后台换取openID

前面两行是为了存数据的，暂时能够不用看，这里主要是拿到code之后，去后台换取openID，而后根据后台的返回，判断页面跳转（咱们公司作了一个用户绑定，因此后台会根据这个接口判断当前用户是否进行了绑定：若是已经绑定，则直接跳转到内容主页面；若是没有绑定，则跳转到用户绑定页面）

 完成了受权之后，后面的就和常规的vue项目同样的处理就能够了。