重温Vue开发微信H5页面总结的那些坑

2023-12-24 05:53:28

刚入门前端的时候写过很多的微信H5页面，时隔多年感觉应该是手到擒来，不曾想竟很是费了一些功夫。现在把本次开发过程中遇到的问题以及我是如何解决的，做个记录。防止自己以后再去解决解决过的问题。

一、网页授权流程

网页授权流程分为四步，这里只说前端需要做的，其中的第一步：跳转授权页面获取code。

function weixinAuth() {
  // 当前网页的URL，不包含#及其后面部分
  var url = location.href.split('#')[0];
  var state = 'STATE';
  window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APP_ID + '&redirect_uri=' + encodeURIComponent(url) + '&response_type=code&scope=snsapi_userinfo&state=' + state + '#wechat_redirect';
}

二、JSAPI接口调用

在使用JSAPI接口前，需要先进行调用接口前的配置，代码如下：

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过get方式显示在url上
  appId: APP_ID, // 必填，公众号的唯一标识
  timestamp: timestamp, // 必填，生成签名的时间戳
  nonceStr: nonceStr, // 必填，生成签名的随机串
  signature: signature, // 必填，签名
  jsApiList: [
    'onMenuShareTimeline',
    'onMenuShareAppMessage',
    'onMenuShareQQ',
    'onMenuShareWeibo',
    'onMenuShareQZone',
    'chooseWXPay'
  ] // 必填，需要使用的JS接口列表
});

三、微信分享

微信分享主要包括三个步骤：

生成签名

wx.config({
  // ...
});
wx.ready(function () {
  wx.checkJsApi({
    jsApiList: [
      'onMenuShareTimeline',
      'onMenuShareAppMessage',
      'onMenuShareQQ',
      'onMenuShareWeibo',
      'onMenuShareQZone'
    ],
    success: function (res) {
      // 以键值对的形式返回，可用的api值true，不可用为false
      // 如：{"checkResult":{"chooseImage":true,"previewImage":true,"uploadImage":true,"downloadImage":true}}
    }
  });
});

分享给朋友

wx.ready(function () {
  // 分享给朋友
  wx.onMenuShareAppMessage({
    title: '分享标题', // 分享标题
    desc: '分享', // 分享
    link: '分享链接', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '分享图标', // 分享图标的图片路径，可以是相对路径
    success: function () {
      // 用户确认分享后执行的回调函数
    }
  });
});

分享到朋友圈

wx.ready(function () {
  // 分享到朋友圈
  wx.onMenuShareTimeline({
    title: '分享标题', // 分享标题
    link: '分享链接', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '分享图标', // 分享图标的图片路径，可以是相对路径
    success: function () {
      // 用户确认分享后执行的回调函数
    }
  });
});

四、微信支付

微信支付主要分为四个步骤：

统一下单

// 调用统一下单接口
wx.request({
  url: '/pay/unifiedorder', // 统一下单接口
  data: {
    openid: openid,
    product_id: product_id
  },
  success: function (res) {
    // 预支付参数
    var prepay_id = res.data.prepay_id;
    // ...
  }
});

参数签名

function paySign(prepay_id, timestamp, nonceStr) {
  var stringA = "appId=" + APP_ID + "&nonceStr=" + nonceStr + "&package=prepay_id=" + prepay_id + "&signType=MD5&timeStamp=" + timestamp;
  var stringSignTemp = stringA + "&key=" + API_KEY;
  var sign = CryptoJS.MD5(stringSignTemp).toString().toUpperCase();
  return sign;
}

发起支付

wx.ready(function () {
  // 支付
  wx.chooseWXPay({
    timestamp: timestamp, // 支付签名时间戳
    nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
    package: 'prepay_id=' + prepay_id, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
    signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
    paySign: sign, // 支付签名
    success: function (res) {
      // 支付成功后的回调函数
    }
  });
});