v-shop 开源项目支持微信登录+微信支付

# 感谢 v-shop 感谢 v-shop 作者的无私奉献，同时也希望作者可以在主项目中增加微信登录的支持、微信自动注册的支持、微信支付的支持 **v-shop**** 的开源地址：** [https://github.com/JoeshuTT/v-shop](https://github.com/JoeshuTT/v-shop) [码云镜像：] [https://gitee.com/joeshu/v-shop](https://gitee.com/joeshu/v-shop) 大家可以关注作者项目主页，关注作者最新更新动态 # v-shop代码调整 ## 拦截器调整 src/common/request.js toLogin 方法调整： ```javascript let _domian = 'http://' + document.domain + '/login?redirect=' + router.currentRoute.fullPath _domian = encodeURIComponent(_domian) if (!window.goLogin) { window.goLogin = true Axios.get(window.subDomain + '/site/statistics').then(res => { // console.log(res.data) parent.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + res.data.data.wxMpAppid + '&redirect_uri=' + _domian + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect' }) } ``` 可通过 /site/statistics 接口获取到后台配置的公众号的 APPID； 结合微信公众号的网页授权相关说明，进行授权跳转，获取 code ； ## 根据code进行用户注册 src/pages/login/reg.vue ```javascript async register(code) { const res = await this.$request.post('/user/wxmp/register/simple', { code }) if (res.code !== 0) { this.$toast(res.msg) return } let _domian = 'http://' + document.domain + '/login' _domian = encodeURIComponent(_domian) this.$request.get('/site/statistics').then(res => { parent.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + res.data.wxMpAppid + '&redirect_uri=' + _domian + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect' }) } ``` ## 根据code进行用户自动登录 src/pages/login/login.vue ```javascript async login(code) { const res = await this.$request.post('/user/wxmp/login', { code }) if (res.code === 10000) { let _domian = 'http://' + document.domain + '/reg' _domian = encodeURIComponent(_domian) this.$request.get('/site/statistics').then(res => { parent.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + res.data.wxMpAppid + '&redirect_uri=' + _domian + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect' }) return } if (res.code !== 0) { this.$toast(res.msg) return } util.storage.set('token', res.data.token) util.storage.set('uid', res.data.uid) this.$route.query.redirect ? this.$router.replace({ path: this.$route.query.redirect }) : this.$router.replace({ path: '/home' }) // this.$toast.clear() this.$toast.success({ message: '登录成功', duration: 1500 }) } ``` ## 微信支付支持 src/common/pay.js ```javascript export function wxPay_jsapi(money, nextAction, payName, remark = '', token) { return request.post('/pay/wx/jsapi', { money, nextAction, payName, remark, token }) } ``` ## 页面上发起微信支付 public/index.html 增加全局的 WeixinJSBridge 组件 ```javascript if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); } }else{ onBridgeReady(); } ``` 在具体支付页面上(目前就订单列表、订单详情)，调用支付： ```javascript wxPay_jsapi(amountReal, '{type:0, id:' + orderId + '}', '在线支付', '', storage.get('token')).then(res => { if (res.code === 0) { this.$toast.clear() window.WeixinJSBridge.invoke( 'getBrandWCPayRequest', { 'appId': res.data.appid, 'timeStamp': res.data.timeStamp, 'nonceStr': res.data.nonceStr, 'package': 'prepay_id=' + res.data.prepayId, 'signType': 'MD5', 'paySign': res.data.sign }, function(res) { if (res.err_msg === 'get_brand_wcpay_request:ok') { // this.$router.replace({ path: '/order-detail', query: { id: orderId }}) parent.location.reload() } }) } else { this.$toast(res.msg) } }) ``` # 微信支付配置 **MA 授权，把你的微信支付授权给你的服务号使用** [《**微信支付MA授权**》](https://www.yuque.com/apifm/doc/zrui8q) **登录微信支付后台，开通 JSAPI 支付：**  **公众号支付，需要配置支付域名的，在开发设置中配置如下：** 通过点击上图，左侧菜单的 “开发配置” ，然后进行配置如下：  请如实配置你自己的h5商城的域名 # api工厂后台配置公众号信息 左侧菜单 “微信设置” --> “公众号设置”  如果没出现上面的菜单，请通过左侧菜单 “工厂设置” --> “模块管理” ，启用 “微信公众号” 模块，并 F5 刷新后台后即可出现菜单