vue开发微信公众号-开发准备 - Powered by Discuz! Archiver

摇起来 發表於 2019-5-7 14:34:00

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

由于工作项目的原因，需要使用vue开发微信公众号，但是这种微信公众号更多是将APP套了一个微信的壳子，除了前面的授权和微信有关系以外，其他的都和微信没多大的关系了，特此记录
<h2>开发流程</h2>
首先需要在电脑上安装微信web开发者工具和花生壳（内网穿透），然后有一个微信公众平台的账号
<h3>第一步：</h3>
下载安装花生壳，点击内网穿透
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507114609091-438630830.png">
然后会在浏览器中打开下面这个界面
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507114752852-898824733.png">
这里需要注意的是外网访问地址和内网主机地址。
<h3>第二步：</h3>
登录微信公众平台后，滚动页面到最下面，点击开发下面的开发者工具。
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507115010381-468906696.png">
然后选择公众平台测试账号，会新打开一个测试号管理的页面
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507115057267-2056074971.png">
在测试号管理页面，需要修改两个地方，将地址换成第一步中的外网访问地址：
第一个：
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507115557537-1391957459.png">
第二个（此时不需要前面的http://）：
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507115632134-1302630921.png">
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507115647819-988775111.png">
除了修改上面两个地方以外，作为测试号，还需要将当前页面前面的测试号信息发给后台
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507115909586-1492346869.png">
现在，前台的基本配置已经完成了。
<h2> 项目配置</h2>
<h3>第一步：</h3>
首先需要创建项目，和创建其他的vue项目一模一样，直接使用脚手架创建就可以了。
项目创建完成后，需要安装微信的SDK：<code class="bash plain">npm </code><code class="bash functions">install</code> <code class="bash plain">weixin-js-sdk --save</code> 
另外，由于vue项目默认是使用localhost打开的，但是这样是微信公众号，需要在微信web开发者工具中打开，所以需要更改为通过ip访问：
打开根目录下的config/index.js，修改文件内dev里面的host和port
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507135315671-857374281.png">
这里的地址应该是电脑的IP，端口是可以自定义的，修改完成后，需要修改第一步花生壳中的那个内网主机，让两者保持一致。
现在，启动项目，在浏览器中输入192.168.0.3:8080如果可以打开项目的话，那么项目创建就没有问题了。
由于使用花生壳穿透以后，192.168.0.3:8080对应的就是花生壳里面的外网访问地址，所以打开微信web开发者工具，输入穿透后的外网访问地址，也是可以打开项目的。
<h2>第二步：</h2>
在进行授权前，需要获取code，然后通过code去到后台换取openID。由于在本项目中采用的是强制授权，分别写了两个页面：login和getCode用于进行授权：
login.vue是项目的默认显示页面
<div class="cnblogs_code">
<pre><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></pre>
</div>
其中的sessiondate.weixin是自己配置的。
staticData.js
<div class="cnblogs_code">
<pre>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'</pre>
</div>
其中appid=wx503236dfa82f2a64是测试号管理中的appId，redirect_uri=http%3A%2F%2F2ir3745783.zicp.vip%2f%23%2fgetCode则表示的是获取code的页面，也就是上面说的getCode.vue这个页面的访问路径，然后通过了转码。
当项目启动，进入login页面后，就会自动执行生命周期函数里面的代码，页面就会跳转到getCode.vue页面。
getCode.vue
<div class="cnblogs_code">
<pre><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);
 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></pre>
</div>
路由跳转到这个页面后，地址栏里面就会带有code，我们需要拿到这个code，然后去后台换取openid和其他的信息。由于这个过程需要时间，因此在页面进入时，默认显示一个加载圈。
 <img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507142457774-2120719850.png">
获取code
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507142549499-171197983.png">
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507142629417-978780903.png">
通过code去后台换取openID
<img src="https://img2018.cnblogs.com/blog/1304208/201905/1304208-20190507142719011-1472679191.png">
前面两行是为了存数据的，暂时可以不用看，这里主要是拿到code以后，去后台换取openID，然后根据后台的返回，判断页面跳转（我们公司做了一个用户绑定，所以后台会根据这个接口判断当前用户是否进行了绑定：如果已经绑定，则直接跳转到内容主页面；如果没有绑定，则跳转到用户绑定页面）
 完成了授权以后，后面的就和常规的vue项目一样的处理就可以了。
  
来源：https://www.cnblogs.com/yuyujuan/p/10824476.html

頁: [1]

琼殿技术论坛's Archiver

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