vue开发微信公众号
2018-08-06 本文已影响39人
代码锋
哎丫丫,最近需要开发微信公众号,前端使用的vue框架,看完腾讯的,我的内心无比沉重,天噜啦,生无可恋~~~
简单的总结一下吧,
1页面绘制
微信公众号开发而言还是使用基础的html、css、js绘制画面就行,就像h5一样,(一开始没做之前我以为还需要,,,单独学习语言,会死人的啊。还好腾讯比较照顾我们前端)
2获取openid
其实这个做完之后也感觉非常easy了,你只需要把你的页面部署到服务器上,然后呢,后端会给你这样一段url
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri='+ redirect_uri +'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
每个参数的意义请查看:微信网页授权
其中redirect_uri成功回调跳转到你的网页,然后后台会给你拼接点参数,从这样
变成这样
image.png
你就需要从url上获取code/state然后调取后台给你定义的接口就能取到openid了,前端不需要做的太复杂,无非取参数,调接口获取openid。
3vue调取微信sdk分享功能
1.全局分享的页面都是一样的
npm install weixin-js-sdk --save
在你需要的页面引入
import wx from 'weixin-js-sdk'
直接上代码:
image.png
注意,调取sdk都需要先wx.config,如果成功的话,就再wx.ready里执行,你在wx.config.jsApiList里面能执行的业务,在微信开发者工具里能看到结果。真机调试的时候wx.config.debug=true,用苹果机能弹出详情。
image.png
2.业务需要,有邀请页分享有二维码,其它页面分享都一样
写一个common.js,
import {
verifyConfigForShare
} from '@/api/weiconfig/weiconfig'
import wx from 'weixin-js-sdk'
export default {
weiconfig: function () {
verifyConfigForShare({
url: location.href.split('#')[0],
}).then(res => {
// console.log(res)
if (res.code == 0) {
wx.config({
debug: false,
appId:appId,
nonceStr: res.data.content.nonceStr,
signature: res.data.content.signature,
timestamp: res.data.content.timestamp,
jsApiList: [
'onMenuShareTimeline', // 分享到朋友圈接口
'onMenuShareAppMessage', // 分享到朋友接口
'onMenuShareQQ', // 分享到QQ接口
'onMenuShareWeibo', // 分享到微博接口
'onMenuShareQZone'
]
});
var shareData = {
imgUrl: 'http://p9s9revyo.bkt.clouddn.com/%E7%BA%AF%E7%B2%B91.png', // 分享显示的缩略图地址
link: 'https://home.vankin.com.cn', // 分享地址
desc: '跨越认知边界,成就美好未来', // 分享描述
title: '万金科技', // 分享标题
success: function () {}
}
wx.ready(res => {
wx.onMenuShareTimeline(shareData);
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareQQ({});
wx.onMenuShareWeibo({});
wx.onMenuShareQZone({})
})
}
})
},
addRegister: function () {
var name = JSON.parse(window.localStorage.getItem('userInfo')).name;
verifyConfigForShare({
url: location.href.split('#')[0],
}).then(res => {
// console.log(res)
if (res.code == 0) {
wx.config({
debug: false,
appId:appId,
nonceStr: res.data.content.nonceStr,
signature: res.data.content.signature,
timestamp: res.data.content.timestamp,
jsApiList: [
'onMenuShareTimeline', // 分享到朋友圈接口
'onMenuShareAppMessage', // 分享到朋友接口
'onMenuShareQQ', // 分享到QQ接口
'onMenuShareWeibo', // 分享到微博接口
'onMenuShareQZone'
]
});
var shareData = {
imgUrl: 'http://p9s9revyo.bkt.clouddn.com/%E7%BA%AF%E7%B2%B91.png', // 分享显示的缩略图地址
link: 'https://home.vankin.com.cn', // 分享地址
desc: '跨越认知边界,成就美好未来', // 分享描述
title: name, // 分享标题
success: function () {}
}
wx.ready(res => {
wx.onMenuShareTimeline(shareData);
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareQQ({});
wx.onMenuShareWeibo({});
wx.onMenuShareQZone({})
})
}
})
}
}
在main.js中全局引入
import common from '../commonFunction/common.js'
Vue.prototype.common = common;
在你需要的页面直接引入
mounted() { /
this.common.addRegister();
// this.common.weiconfig();
},
4vue调取微信sdk支付功能
也是在 mounted中请求接口配置 wx.config
verifyConfig({
url: location.href.split('#')[0],
}).then(res => {
if (res.code == 0) {
const shareobj = {
'appId': appId,
'timestamp': res.data.content.timestamp,
'nonceStr': res.data.content.nonceStr,
'signature': res.data.content.signature,
'jsApiList': ['chooseWXPay']
}
this.shareObj = shareobj;
wx.config({
debug: false,
appId: appId,
nonceStr: shareobj.nonceStr,
signature: shareobj.signature,
timestamp: shareobj.timestamp,
jsApiList: ['chooseWXPay']
});
}
})
先调取后端接口,获取,再在wx.ready中调 wx.chooseWXPay微信支付
payMoneyForH5(params).then(res => {
if (res.code == 0) {
const poas = res.data.content;
console.log(res)
wx.ready((res) => {
wx.chooseWXPay({
'appId': appId,
'timestamp': poas.timeStamp,
'nonceStr': poas.nonceStr,
'package': poas.package,
'signType': poas.signType,
'paySign': poas.paySign,
success: function (res) {
// alert(res)
if (res.errMsg == 'chooseWXPay:ok') {
that.$router.push({
path: '/pay/wxPaySuccess',
})
}
},
cancel: function (err) {
that.$router.push({
path: '/pay/wxPayFail',
query: {
courseId: that.content.id,
orderNo: that.orderId
}
})
}
})
});
wx.error(function (res) {
console.log(res)
alert("wx.error")
});
}
})
未完待续~~~