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

2021-10-15 14:39:27

由于工作项目的原因，需要使用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用于进行授权：

<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>