vue 微信公众号中如何调取微信JSSDK 和微信支付

闲来无事，抽个疯来写写博客。

宝剑尚未配好，出门已是江湖。对于撸VUE 我是认真的~ 从啥也不懂到项目完成，也是花了不少时间啦。

说说我用到的技术栈吧

  * vue-cli 官方脚手架模板。* vue-router 前端路由 （采取的是hash模式）。* vuex 状态管理工具。* axios 数据交互工具（官方封装ajax，在node中也可以使用）。* mint-ui UI组件工具（饿了么VUE组件库）。* less css预处理语言* ES5,ES6 （JS标准）。* webpack 编译工具。* rem布局，解决大部分屏幕适配问题

当然还有用到微信的一些API了，毕竟是开发公众号。

总的来说就是碰到调微信API的问题

因为是前后端分离，所以我的授权也是改了模式

1、定义一个vue中间件，所有的微信授权后的回跳都走这个中间件，然后再根据入口的不同跳转到相应的路由（这样就显得很傻逼了，授权的时候会闪一个页面，让人感觉很不舒服），请求的数据用localStroge缓存，这也带来了很多麻烦，不推荐使用。

2、微信授权的回跳地址填后端的，然后再由后端重定向到前端程序，携带参数请求用户信息，然后再用sesionStroge缓存在本地，方便后续调用，目前看还算是最优的方案了。贴段代码~

     getquerystring(name){let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");let r = window.location.search.substr(1).match(reg);if(r!=null)return  unescape(r[2]); return null;},getnewsdata(code,state) {const url=this.HOST+'/api/user/detail';Indicator.open({spinnerType: 'triple-bounce'});Axios.get(url, {params: {code: code,state:state}}).then((response) => {Indicator.close();if(response.data) {const anduserInfo={uid: this.outjsencrpt(response.data.data.content.uid),openid: this.outjsencrpt(response.data.data.content.openid),nickname: response.data.data.content.nickname,headimgurl: response.data.data.content.headimgurl};const token = this.outjsencrpt(response.data.data.content.token);window.sessionStorage.setItem(this.DISCOVE,JSON.stringify(anduserInfo));window.sessionStorage.setItem("token",token);this.wxuserinfo = anduserInfo;}}).catch((response) => {console.log(response.data)})

后面我们看看微信支付：

大家知道微信支付是要到微信商户平台去配授权目录的，那这个目录应该怎么配呢，

下面看看截图

所以我配的支付目录是： http://xxxxx.com/#/medicaservice/

配玩后就笑嘻嘻的去手机端调试了

能想象到的~ BUG出来了

在安卓手机测微信支付没有问题，但是在IOS手机上测就会报“url未注册”

然后只能各种百度了查资料了

都说是什么current URL 和 this URL 的问题，反正我也没看懂，就自己试着找问题，

发现了一个严重的问题，安卓机子测试，走到那个页面，路由也是跟着变化的，然而IOS测试，页面的渲染变化了，科室路由却没有跟着变。当时严重怀疑vue-route的兼容性，但是没办法啊，项目写到这里了，总不能换框架吧。

只能硬着头皮写，还是一样网上找资料，慢慢摸索。

终于找到解决办法了：

在路由的#前面加个？号，微信浏览器就会把后面的路由当成参数过滤掉了。

后面只需在商户平台配成这样:

http://xxxxx.com/

http://xxxxx.com/#/medicaservice/

一定要配两个，不然安卓机是调不起来的。

配好后就差不多完事了

每次调到需要支付的路由时，判断他是什么系统，如果是IOS 就在#前面加个?号，这样就OK啦。

办法比较土，也可以用路由钩子函数来改变URL

 weixinPay:function(parmse){var vm = this;if (typeof WeixinJSBridge == "undefined"){//微信浏览器内置对象。参考微信官方文档alert("微信浏览器");if( document.addEventListener ){alert("浏览器监听");document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(parmse), false);}else if (document.attachEvent){document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(parmse));document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(parmse));}}else{//  alert("直接回调");vm.onBridgeReady(parmse);}},/*** @method 支付费用方法* @param data:后台返回的支付对象,(详情微信公众号支付API中H5提交支付);*/onBridgeReady:function(params){var  vm = this;WeixinJSBridge.invoke('getBrandWCPayRequest',params,function(res){// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。if(res.err_msg == "get_brand_wcpay_request：ok" ){vm.$router.replace({path: '/medicalservice/orderdetail',query:{order_id:vm.order_id}});}else{vm.$router.replace({path: '/medicalservice/orderdetail',query:{order_id:vm.order_id}});}});},

vue 微信公众号中如何调取微信JSSDK 和微信支付相关推荐

Vue 开发在微信公众号中如何文件下载
通常我们调用下载接口时,我们需要根据后端提供的接口返回信息进行相应的处理操作. 1.接口返回文件路径(部分). window.open('http://192.168.22.246:8080'+ f ...
在做vue h5 时因改变手机字体导致页面布局错乱比如在微信公众号中放入h5 客户把手机字体或者微信字体调大导致页面错乱
认定了就要好好的珍惜对待,人生不容辜负,你必须要更加努力 .加油骚年 ** 正文: ** 在做vue h5 时因改变手机字体导致页面布局错乱比如在微信公众号中放入h5 客户把手机字体或者微信字 ...
微信公众号中的支付宝支付与微信支付支付宝支付问题（微信bug）
一般,在微信公众号中的商城都是需要支持微信支付和支付宝支付的,当然,较大的公司对于鹅厂和阿里的站队就不说了,所以这里简单记录一下支付宝支付和微信支付的主要流程.说是简单介绍,这是因为确实不难,因为前端 ...
php怎么添加会员卡,怎么在微信公众号中添加一个会员卡领取功能
怎么在微信公众号中添加一个会员卡领取功能发布时间:2020-12-09 16:06:27 来源:亿速云阅读:129 作者:Leah 这篇文章将为大家详细讲解有关怎么在微信公众号中添加一个会员卡领取 ...
php 微信开发菜单,微信公众号中个性化菜单的开发实例
微信公众号中个性化菜单的开发实例个性化菜单让公众号的不同用户群体看到不一样的自定义菜单.该接口开放给已认证订阅号和已认证服务号,个性化菜单要求用户的微信客户端版本在iPhone6.2.2,Andro ...
基于WeX5平台开发微信公众号中的在线问卷调查
在线调查问卷在我们的生活中应用的非常广泛,能够非常方便快捷的获取到我们需要的信息,统计分析出相关核心的数据,方便我们的决策.在微信发展迅速的时代,覆盖面非常的大,那么基于微信公众号去推送我们的在线问卷 ...
有趣的设计模式——微信公众号中蕴藏的观察者模式
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 观察者模式概述在正式进入该设计模式之前,我想问一下:你们平常都用微信干什么呢? " ...
python微信公众号翻译功能怎么用_Watson使用指南（七）在微信公众号中实现识图作诗功能...
本文章主要是写一下这个项目开发的过程及之间遇到的问题,作为记录,也希望以此为契机认识志同道合的朋友,一起学习交流. 目录: 概述环境准备及相关账号申请部署Python Flask应用到Bluemi ...
微信公众号服务器端脑图,微信公众号中隐藏的思维导图工具，帮你随时随地高效思考...
「有什么好用的思维导图工具推荐呢?」后台里收到了很多小伙伴类似的问题. 事实上,市面上的思维导图工具真的非常多.无论是老牌的 XMIND,还是在线版的百度脑图或者 ProcessOn 都可以帮你制作 ...

vue 微信公众号中如何调取微信JSSDK 和微信支付

vue 微信公众号中如何调取微信JSSDK 和微信支付相关推荐

最新文章

热门文章