之前做项目都是pc端的，还是第一次做移动端项目，而且上来就要接入app 和微信公众号两个平台，最终查阅多方文档，耗费几周时间还是完成了项目，这篇文章也算是记录一下自己的完成思路以及一些想法，希望能帮到各位道友，这篇文章只讲微信公众号部分。

一、系统对接微信公众号

第一步就是确定自己开发的是什么类型，小程序、公众号还是接入公众号的h5网页，而我做的这个项目就是第三种。知道了这个就去官网找对应部分的介绍就行了。微信开放文档

微信公众号接入网页无非就是在公众号内部加一个按钮之类的，在点击的时候跳转相应链接，这个链接地址就应该是我们项目里面的微信入口，其实就是我们项目里面的一个路由地址

{ path: '/Wx', component: () => import('@/views/components/Wx.vue') }, // 微信入口{ path: '/App', name: 'App', component: () => import('@/views/components/App.vue') }, // app入口

我在项目中就是留下了两个入口，一个是App的，一个是微信的，这样做最大的的好处就是实现项目和对接分离，我们不需要在首页进行大量的用户来源判断，不同平台经过不同入口，最终进入同一个首页。

1、配置appid、secret等信息，声明类

export default class wechatAuth {private config:any = {}constructor(config:any) {let defaultConfig = {appid: 'wx1bcdb953f1952911',secret: 'e57bfbcae699eb1370dc0afbabbcb82b',responseType: 'code',redirectUri: 'http://120.79.149.109:8083/#/qrCode?id=DS420602211769',// redirectUri: encodeURIComponent('https://ad.jfpays.com/wcpn-mk/index.html#/empower'),error_uri: '',scope: 'snsapi_base,snsapi_userinfo',getCodeCallback: () => { },};this.config = Object.assign(defaultConfig, config);}// 调取微信获取code接口getCode() {let authPageBaseUri = 'https://open.weixin.qq.com/connect/oauth2/authorize?';let authParams = `appid=${this.config.appid}&redirect_uri=${this.config.redirectUri}&response_type=${this.config.responseType}&scope=${this.config.scope}&state=1#wechat_redirect`;let url = authPageBaseUri + authParams;window.location.replace(url);}
}

首先定义一个类，创建config配置信息Obj，类里面有一个基础方法，就是根据配置信息拼接跳转地址

2、微信入口逻辑

mounted() {let search = window.location.search; // 获取当前地址用作重定向地址this.readConfig(); // 这里是我读取appid的方法，（json文件）this.param.redirectUri = encodeURIComponent(window.location.href); // 地址转码const wexEnter = new wechatAuth(this.param); // 实例化类if (search.includes('?code=')) { // hash模式下路由获取不到query参数this.$store.commit('treePlanting/changeWxOrIxy', 'wx');// 已有code码，传给后台let code = this.getUrlParam('code');console.log(code); // 基本上拿到code传到服务器上就没有前端事了/** 拿到code换取微信 access_token* token有效期2小时 ，需要及时刷新* */let param = {identity: code,openid: '',type: 'GZH',};myzxServer.judge(param).then((res) => {console.log(res);if (res.success) {this.$router.replace({path: '/Home',});}});return;}wexEnter.getCode(); // 第一下从微信跳进来不进入if ,根据参数拼接跳转地址，下次进入if中},

以上就是接入微信公众号的部分了，至于后面的获取token和openid之类的操作都放到服务端来完成的。

二、系统调用微信公众号接口实现功能

1、申请公众号测试号；

这里的appid 和 appsecret就是上面提到过需要的的配置信息

这里是在手机或者微信开发者平台调试代码时需要用到，只有关注过公众号的微信账号才能打开链接，否则打开链接时会报错10006。

以上按步骤配置完，就是在项目中引入

weixin-jsapi 或者是 weixin-js-sdk .两个基本上是相同的，亲测

基本上按照上面贴图来配置就不会出现sdk报错的问题了

2、使用api：

这里要求我们在每个组件内都需要获取一下权限

获取权限是个异步操作，放在created 或者 mounted 里面进行

我这里的$wx 是在 mian.ts 里面挂载到vue原型上了，所以用this.$wx调用

let url = location.href.split('#')[0];  // 哈希模式下需要截取#及其后面部分，保留完整的url 和参数
// let url = (window as any).wxConfigUrl
wxServer.getSignature({ // 这里是把地址给后端获取签名的接口url,
}).then((res: any) => {let config = {// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出debug: false,appId: res.data.appId, // 必填，公众号的唯一标识timestamp: res.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.nonceStr, // 必填，生成签名的随机串signature: res.data.signature, // 必填，签名jsApiList: ['scanQRCode', 'chooseImage', 'showAllNonBaseMenuItem'], // 必填，需要使用的JS接口列表openTagList: ['showAllNonBaseMenuItem'], // 没有也行};// 配置SDKthis.$wx.config(config);
});

后面就是按需使用了，以扫码为例

(this as any).$wx.ready(() => {(this as any).$wx.scanQRCode({needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有success(res) { // 这里算是微信api的一个bug吧，需要延时才能拿到返回参数setTimeout(() => {let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果// alert(JSON.stringify(result));}, 1000);},});
});

这里调用不同接口时可能会出现其他各色各样的bug，不过到这基本上大的问题已经解决了，只剩下完善了。

Vue项目对接微信公众号踩坑日记相关推荐

php微信公众号支付vue,vue项目使用微信公众号支付总结及遇到的坑
微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档: 使用的vuex,在mutations中 wechatPay (state, data) { state.payObject = d ...
springboot项目对接微信公众号需要知道的几个事情，非常重要。
1.如果要对接微信的公众号,首先就是要在开发者配置中开启服务端配置才行.但是一旦开启服务配置,你在微信公众号平台配置的自动回复消息,自定义菜单就全部失效.即使你开启后关闭,也需要重新配置才行,不然就是 ...
基于IdentityServer的系统对接微信公众号
业务需求公司有两个业务系统,A和B,AB用户之间属于多对一的关系,数据库里面也就是两张表,A表有个外键指向B.现在需要实现以下几个功能. A用户扫描B的二维码,填写相关的注册信息,注册完成之后自动属 ...
微信公众平台菜单编辑php,如何使用Vue.js实现微信公众号菜单编辑器（思路详解）...
这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(思路详解),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试 ...
微信公众平台菜单编辑php,Vue.js实现微信公众号菜单编辑器步骤详解（上）
这次给大家带来Vue.js实现微信公众号菜单编辑器步骤详解(上),Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试着做一个像 ...
前端对接微信公众号网页开发流程，前期配置
微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传.图片预览.获取位 ...
vue.js 在微信公众号内实现视频播放
环境:我司从事在线教育行业,想要将老师的讲课视频实现在线播放并监控用户播放时长关键词:vue.js.微信公众号.video视频播放 1. 微信公众号内可以直接使用video进行视频播放 2. 微信公 ...
微信公众号菜单html5,Vue.js 实现微信公众号菜单编辑器功能(一)
学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下具体样式代码查看项目github 创建一个vue实例 var app = new Vue({ el: '#app ...
weixintong ent.php,多商户版微信商城对接微信公众号的方法及设置
第一步首先自己申请一个认证的微信服务公众号,拥有了自己的公众号的用户请再来看我的帖子.还有绑定的域名要备案了[1]1.打开微信公众号https://mp.weixin.qq.com选择 [开发]→[开 ...

Vue项目对接微信公众号踩坑日记