Nuxt微信分享微信支付

发表于 2019-12-11 | 分类于 Nuxt | 阅读次数：

一. 了解微信官方文档

二. 安装微信SDK

1	npm install weixin-js-sdk --save

import Vue from 'vue';
import wx from 'weixin-js-sdk';// 引入微信sdk
/*post       post请求方法
webShare     获取 wx.config({})需要的参数
baseURLError 项目地址 用于拼接链接
*/
import { post, webShare, baseURLError } from '@/server';// 封装好的 axios 请求
Vue.prototype.$wechat = wx;
const wechatShare = {
    install(Vue) {
        Vue.prototype.wxShare = function(shareData) {
            const pageUrl = window.location.href;// 获取当前地址 用于请求 获取wx.config({})需要的参数
            post(webShare, { url: encodeURIComponent(pageUrl) })
                .then((res) => {
                    const data = res.data;
                    this.$wechat.config({
                        debug: false,
                        appId: data.appId,
                        timestamp: data.timestamp,
                        nonceStr: data.nonceStr,
                        signature: data.signature,
                        jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData' ]// 你需要使用的微信api功能 必填
                    });

                    // 完成配置 加载分享功能
                    // shareData参数是我们调用传进来的对象
                    this.$wechat.ready(() => {
                        // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
                        this.$wechat.updateAppMessageShareData({
                            title: shareData.title,
                            desc: shareData.desc,
                            link: baseURLError + shareData.link,
                            imgUrl: shareData.imgUrl,
                            success() {
                                // 设置成功
                            },
                            cancel() {
                            }
                        });
                        // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
                        this.$wechat.updateTimelineShareData({
                            title: shareData.title,
                            desc: shareData.desc,
                            link: baseURLError + shareData.link,
                            imgUrl: shareData.imgUrl,
                            success() {
                                // 设置成功
                            },
                            cancel() {
                            }
                        });
                    });
                });
        };
    }
};

Vue.use(wechatShare);

四. 如何使用

在nuxt.config.js中添加

1
2
3

plugins: [
    { src: '~plugins/wx-share', ssr: false },
],

页面中使用

<template>
···
</template>
<script>
export default {
    mounted() {
        /*
        *title 分享的标题
        *desc  分享的文本简介内容
        *link  分享出去的链接地址（必须http://开头，不然你会哭）
        * imgUrl分享出去的图片（必须http://开头，不然你会哭）
        */
        this.wxShare({ title: '', desc: '', link: '', imgUrl: '' });
    },
};

五. 微信JSAPI 封装微信支付(wx-pay.js)

创建js文件

// 获取url中的参数
export function getUrlParam(name) {
    const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); // 构造一个含有目标参数的正则表达式对象
    const r = window.location.search.substr(1).match(reg);  // 匹配目标参数
    if (r != null) { return unescape(r[2]); } return null; // 返回参数值
}
// 这里请使用var 声明 不然下面无法获取到wxData 导致无法唤起支付
// eslint-disable-next-line no-unused-vars
// eslint-disable-next-line no-var
var wxData = {};
//  调用微信JS api 支付
/*
*success       支付成功的回调方法
*error         支付失败的回调方法
*/
export function jsApiCall(success, error) {
    // eslint-disable-next-line no-undef
    WeixinJSBridge.invoke('getBrandWCPayRequest', {
        'appId': wxData.appId,     // 公众号名称，由商户传入
        'timeStamp': wxData.timeStamp,         // 时间戳，自1970年以来的秒数
        'nonceStr': wxData.nonceStr, // 随机串
        'package': wxData.prepayId,     // 统一订单号
        'signType': 'MD5',         // 微信签名方式：
        'paySign': wxData.paySign // 支付签名
    },
    function(res) {
        if (res.err_msg === 'get_brand_wcpay_request:ok') { // 微信支付成功  回调
            success();
        } else { // 这里支付失败和支付取消统一处理//微信支付失败回调
            error();
        }
    });
}
// // 唤起微信方法
export function callWxPay(a, success, error) {
    wxData = a;
    if (typeof WeixinJSBridge === 'undefined') {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', jsApiCall);
            document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
        }
    } else {
        jsApiCall(success, error);
    }
}

六. 如何使用

第一步

// 点击支付按钮 调用接口获取appId 
// 使用window.location.replace 方法打开微信新页面获取 code
// 此时微信回打开一个页面 然后会回到当前页面
handleGoPay() {
    this.$post(getWxAppId)
        .then((res) => {
            if (res.status === 200) {
                window.location.replace('https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + res.appId + '&redirect_uri=' + window.location.href + '&response_type=code&scope=snsapi_userinfo#wechat_redirect');
            }
        })
        .catch((error) => { console.log(error); });
}

第二步

//在发起支付的页面
import { getUrlParam, callWxPay } from '@/plugins/wx-pay';
export default {
    mounted() {
        // 调用方法获取 微信code
        this.wxCode = getUrlParam('code');
        // 如果链接中含有code 则掉接口发起微信支付
        if (this.wxCode) {
            this.$post(fortDataChannel, { formCode: '订单号', code: this.wxCode })
                .then((res) => {
                    if (res.status === 200) {
                        //res.data 是后台返回吊起微信支付的配置参数也就是wxData
                        // 吊起支付后 关闭支付后执行的函数
                        callWxPay(res.data, () => { this.$router.replace('/success'); }, () => { this.$router.replace('/error'); });
                    }
                })
                .catch((error) => { console.log(error); });
        }
    },
}