微信公众号测试项目
授权方案采用
图片引用地址SegmentFault
这种授权在第4步请求服务器返回token后,vue客服端直接重定向到最开始进入的页面
let params = { ...to.query } // api接口登录 wxmp.login(params).then(res => { setToken(res.data.token) window.location.href = window.location.origin + getToUrl() }) 微信分享使用的是history模式实现自定义分享
经过测试实现步骤如下：
- 授权后进入router.beforeEach时判断系统类型,是IOS系统就记录当前URL到vuex中
注意：如果进入路由有重定向,需要加入重定向后的路由名称,比如'/'重定向到'/home'
if (!Vue.device.isAndroid) { if (!store.state.app.iosJsUrl) { let landingPage = document.URL // 如果进入路由有跳转需要加入跳转后的路由名称,比如/跳转到/home if (to.name === HOME && landingPage.indexOf(HOME) === -1) { landingPage = landingPage + HOME } store.commit(types.SET_WX_JS_URL, {iosJsUrl: landingPage}) } } - 进入router.afterEach时判断系统类型,获取不同的jssdk签名地址
router.afterEach(to => { // store.commit(types.UPDATE_LOADING_STATUS, {isLoading: false}) let _url = window.location.origin + to.fullPath if (!Vue.device.isAndroid) { _url = store.state.app.iosJsUrl.split('#')[0] } wechat.getJSSDK(_url) }) - vue全局公用函数实现分享
Vue.prototype.wxShare = wechat.setWxShare setWxShare (title, desc, link, imgUrl) { Vue.wechat.ready(() => { // 分享给朋友 Vue.wechat.onMenuShareAppMessage({ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接 默认以当前链接 imgUrl: imgUrl, // 分享图标 success () { }, cancel () { } }) // 分享到朋友圈 Vue.wechat.onMenuShareTimeline({ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接 默认以当前链接 imgUrl: imgUrl, // 分享图标 success () { }, cancel () { } }) }) } - 页面中调用wxShare实现自定义分享
activated () { this.share() }, methods: { share () { let link = window.location.href.split('#')[0] this.wxShare('首页', '首页内容', link, 'https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg') } } # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm testFor a detailed explanation on how things work, check out the guide and docs for vue-loader.