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項目同樣的處理就能夠了。