vue开发微信公众号--开发准备
开发流程
首先需要在电脑上安装微信web开发者工具和花生壳(内网穿透),然后有一个微信公众平台的账号
第一步:
下载安装花生壳,点击内网穿透
![微信公众号开发准备_第1张图片](http://img.e-com-net.com/image/info8/56987a3dc87c45a195a739a210cddf5c.jpg)
然后会在浏览器中打开下面这个界面
![微信公众号开发准备_第2张图片](http://img.e-com-net.com/image/info8/1819b990752f410b95e04d28061880ed.jpg)
这里需要注意的是外网访问地址和内网主机地址。
第二步:
登录微信公众平台后,滚动页面到最下面,点击开发下面的开发者工具。
![微信公众号开发准备_第3张图片](http://img.e-com-net.com/image/info8/c248affa6f3b428facbb8ecd1a7ad3d6.jpg)
然后选择公众平台测试账号,会新打开一个测试号管理的页面
![微信公众号开发准备_第4张图片](http://img.e-com-net.com/image/info8/2a913b27117b43fc8c9d30a9d774e138.jpg)
在测试号管理页面,需要修改两个地方,将地址换成第一步中的外网访问地址:
第一个:
![微信公众号开发准备_第5张图片](http://img.e-com-net.com/image/info8/05b71241aeaf486289837062bbbb7ae1.jpg)
第二个(此时不需要前面的http://):
![](http://img.e-com-net.com/image/info8/5fa6f1309402491b8d41e0b0dc25dd87.jpg)
![微信公众号开发准备_第6张图片](http://img.e-com-net.com/image/info8/bbb9675bd2da44559aa8764bfcf161fe.jpg)
除了修改上面两个地方以外,作为测试号,还需要将当前页面前面的测试号信息发给后台
![微信公众号开发准备_第7张图片](http://img.e-com-net.com/image/info8/a6c4315ae277407791a39d449d03fb05.png)
现在,前台的基本配置已经完成了。
项目配置
第一步:
首先需要创建项目,和创建其他的vue项目一模一样,直接使用脚手架创建就可以了。
项目创建完成后,需要安装微信的SDK:npm
install
weixin-js-sdk --save
另外,由于vue项目默认是使用localhost打开的,但是这样是微信公众号,需要在微信web开发者工具中打开,所以需要更改为通过ip访问:
打开根目录下的config/index.js,修改文件内dev里面的host和port
![](http://img.e-com-net.com/image/info8/5306d036fdbf4e549986015573d0f59e.jpg)
这里的地址应该是电脑的IP,端口是可以自定义的,修改完成后,需要修改第一步花生壳中的那个内网主机,让两者保持一致。
现在,启动项目,在浏览器中输入192.168.0.3:8080如果可以打开项目的话,那么项目创建就没有问题了。
由于使用花生壳穿透以后,192.168.0.3:8080对应的就是花生壳里面的外网访问地址,所以打开微信web开发者工具,输入穿透后的外网访问地址,也是可以打开项目的。
第二步:
在进行授权前,需要获取code,然后通过code去到后台换取openID。由于在本项目中采用的是强制授权,分别写了两个页面:login和getCode用于进行授权:
login.vue是项目的默认显示页面
- 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: {}
- }
其中的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
- 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 => {});
- }
- }
- };
路由跳转到这个页面后,地址栏里面就会带有code,我们需要拿到这个code,然后去后台换取openid和其他的信息。由于这个过程需要时间,因此在页面进入时,默认显示一个加载圈。
![微信公众号开发准备_第8张图片](http://img.e-com-net.com/image/info8/60fe8c918d4b4ca6b2820478af649f11.jpg)
获取code
![](http://img.e-com-net.com/image/info8/03bbc17dc7d443a6aa1b1133612eb260.jpg)
![微信公众号开发准备_第9张图片](http://img.e-com-net.com/image/info8/538601b8837d48f8873f1c460d2c0f17.jpg)
通过code去后台换取openID
![微信公众号开发准备_第10张图片](http://img.e-com-net.com/image/info8/55e3d132b42d4b02973097adbe254b95.jpg)
前面两行是为了存数据的,暂时可以不用看,这里主要是拿到code以后,去后台换取openID,然后根据后台的返回,判断页面跳转(我们公司做了一个用户绑定,所以后台会根据这个接口判断当前用户是否进行了绑定:如果已经绑定,则直接跳转到内容主页面;如果没有绑定,则跳转到用户绑定页面)
完成了授权以后,后面的就和常规的vue项目一样的处理就可以了。