vue+h5端配置微信的jdk,实现分享朋友圈、微信支付

首先安装微信的jdk插件：
npm install jweixin-module -D
然后创建一个js文件，这里我的js名称是jwx.js：

var jweixin = require('jweixin-module');
import env from '../config/env';
export default {
  //判断是否在微信中
  isWechat: function () {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/micromessenger/i) == 'micromessenger') {
      //console.log('是微信客户端')
      return true;
    } else {
      //console.log('不是微信客户端')
      return false;
    }
  },
  initJssdk: function (callback) {
    var uri = window.location.href.split('#')[0]; //获取当前url然后传递给后台获取授权和签名信息
    uni.request({//env文件是我配置的域名链接，需要根据你当前的域名去配置，注意域名需放进公众号的白名单中，要不然不起作用
      url: env.baseService + '/wap/v1/wechat/jsapi/ticket', //你的接口地址，获取微信jdk所需的参数
      data: {
        url: uri,
      },
      method: 'POST',
      success: (res) => {
        //返回需要的参数appId,timestamp,noncestr,signature等
        //注入config权限配置
        console.log('res1', res);
        console.log('res2', uri);
        jweixin.config({//注意查看后端返回的参数，区分大小写
          debug: false,
          appId: res.data.data.appid,
          timestamp: res.data.data.timestamp,
          nonceStr: res.data.data.noncestr,
          signature: res.data.data.signature,
          jsApiList: [
            //这里是需要用到的接口名称
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
			'chooseWXPay'
          ],
        });
        if (callback) {
          callback(res.data);
        }
      },
    });
  },
  //在需要定位页面调用
  getlocation: function (callback) {
    if (!this.isWechat()) {
      //console.log('不是微信客户端')
      return;
    }
    this.initJssdk(function (res) {
      jweixin.ready(function () {
        jweixin.getLocation({
          type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
          success: function (res) {
            // console.log(res);
            callback(res);
          },
          fail: function (res) {
            console.log(res);
          },
          // complete:function(res){
          //     console.log(res)
          // }
        });
      });
    });
  },
  openlocation: function (data, callback) {
    //打开位置
    if (!this.isWechat()) {
      //console.log('不是微信客户端')
      return;
    }
    this.initJssdk(function (res) {
      jweixin.ready(function () {
        jweixin.openLocation({
          //根据传入的坐标打开地图
          latitude: data.latitude,
          longitude: data.longitude,
        });
      });
    });
  },
  chooseImage: function (callback) {
    //选择图片
    if (!this.isWechat()) {
      //console.log('不是微信客户端')
      return;
    }
    //console.log(data);
    this.initJssdk(function (res) {
      jweixin.ready(function () {
        jweixin.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album'],
          success: function (rs) {
            callback(rs);
          },
        });
      });
    });
  },
  //微信支付
  wxpay: function (data, callback) {
    if (!this.isWechat()) {
      //console.log('不是微信客户端')
      return;
    }
	console.log('data:',data);
    this.initJssdk(function (res) {
      jweixin.ready(function () {
        jweixin.chooseWXPay({
          timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
          package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: data.paySign, // 支付签名
          success: function (res) {
            // console.log(res);
            callback(res);
          },
          fail: function (res) {
            callback(res);
          },
          // complete:function(res){
          //     console.log(res)
          // }
        });
      });
    });
  },
  shareTimeline: function (data, callback) {
    //分享朋友圈
    if (!this.isWechat()) {
      //console.log('不是微信客户端')
      return;
    }
    this.initJssdk(function (res) {
      jweixin.ready(function () {
        jweixin.onMenuShareTimeline({
          //updateTimelineShareData
          title: data.title ? data.title : '分享朋友圈', // 分享标题
          link: data.link ? data.link : window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: data.imgUrl ? data.imgUrl : 'http://icon.mobanwang.com/UploadFiles_8971/200910/20091011134333685.png', // 分享图标
          success: function () {
            // 用户点击了分享后执行的回调函数
            // if (callback) {
            // 	callback(res.data);
            // }
          },
        });
      });
    });
  },
  shareMenu: function (data, callback) {
    //分享好友
    if (!this.isWechat()) {
      //console.log('不是微信客户端')
      return;
    }
    this.initJssdk(function (res) {
      jweixin.ready(function () {
        jweixin.onMenuShareAppMessage({
          //updateAppMessageShareData
          title: data.title ? data.title : '分享好友', // 分享标题
          desc: data.description?data.description:'分享描述', // 分享描述
          link: data.link ? data.link : window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: data.imgUrl ? data.imgUrl : 'http://icon.mobanwang.com/UploadFiles_8971/200910/20091011134333685.png', // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          success: function () {
            // 用户点击了分享后执行的回调函数
            // if (callback) {
            // 	callback(res.data);
            // }
          },
        });
      });
    });
  },
};

使用：
main.js中配置：

import jwx from './utils/jwx';
Vue.prototype.$jwx = jwx;//全局配置$jwx对象，方便在其他地方调用

在需调用的文件中配置：

initShare() {//初始化
      if (this.$jwx && this.$jwx.isWechat()) {//判断是否是微信浏览器环境
        uni.showToast({
          title: '微信环境',
        });
        this.$jwx.initJssdk({ shareTitle: '微信分享测试', shareDesc: '我是分享的描述' });
      }
    },