h5移动端配合微信sdk常用的9个工具函数

最新推荐文章于 2024-05-22 20:53:31 发布

Mr__proto__

最新推荐文章于 2024-05-22 20:53:31 发布

阅读量628

点赞数

文章标签：微信前端 vue.js

本文链接：https://blog.csdn.net/Mr__proto__/article/details/125386921

版权

h5移动端常用到的工具类函数

1.url参数转换成对象
- 将query参数转换层对象
2.将对象拼接成url参数
- 将对象拼接成query参数
3.根据身份证号返回年龄
- 根据身份证号返回年龄
4.微信功能扫一扫
- 微信功能扫一扫
5.获取地理位置
- 获取地理位置
6.微信获取设备信息
- 微信获取设备信息
7.微信分享到朋友圈或者qq功能
- 7.1：分享到朋友或者QQ。需要在点击按钮之前调用jWeixin.ready(funciton(){})
- 7.2：分享到朋友或者QQ。分享到朋友圈或者QQ空间
8.发送一个微信支付请求
- 发送一个微信支付请求
9.新页面全屏预览图片功能
- 新页面全屏预览图片功能

1.url参数转换成对象

将query参数转换层对象

/**
 * url参数转换成对象
 * @param {*} url 
 * @returns 
 */
function queryURLparamsRegEs6(url) {
    let obj = {};
    let reg = /([^?=&]+)=([^?=&]+)/g;
    url.replace(reg, (...arg) => {
        obj[arg[1]] = arg[2];
    });
    return obj;
}

2.将对象拼接成url参数

将对象拼接成query参数

/**
 * 将对象拼接成url参数
 * @param {*} data 
 * @returns 
 */
function paramFormateUrl(data) {
    let url = '';
    // 遍历data对象，取出需要的参数
    for (let k in data) {
      // 如果当前value为undefined ，则返回空字符串
      let value = data[k] !== undefined ? data[k] : '';
      // 得到参数，并且拼接参数，为下一步拼接到url后面做准备
      url += '&' + k + '=' + value;
    }
  // 如果url存在，则去除首字符并返回，因为主函数已经包含了'&'，否则返回空串
  return url ? url.substring(1) : '';
}

3.根据身份证号返回年龄

根据身份证号返回年龄

/**
 * 根据身份证号返回年龄
 * @param {*} value
 * @param {*} lang
 * @returns
 */

 function GetAge(identityCard) {
   console.log("identityCard",identityCard,identityCard.length);
  var len = (identityCard + "").length;
  if (len === 0) {
      return 0;
  } else {
      if ((len !== 15) && (len !== 18))//身份证号码只能为15位或18位其它不合法
      {
          return 0;
      }
  }
  var strBirthday = "";
  if (len === 18)//处理18位的身份证号码从号码中得到生日和性别代码
  {
      strBirthday = identityCard.substr(6, 4) + "/" + identityCard.substr(10, 2) + "/" + identityCard.substr(12, 2);
  }
  if (len === 15) {
      strBirthday = "19" + identityCard.substr(6, 2) + "/" + identityCard.substr(8, 2) + "/" + identityCard.substr(10, 2);
  }
  //时间字符串里，必须是“/”
  var birthDate = new Date(strBirthday);
  var nowDateTime = new Date();
  var age = nowDateTime.getFullYear() - birthDate.getFullYear();
  //再考虑月、天的因素;.getMonth()获取的是从0开始的，这里进行比较，不需要加1
  if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() === birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
      age--;
  }
  return age;
}

4.微信功能扫一扫

微信功能扫一扫

/**
 * 微信功能扫一扫
 * @param {*} params
 * @returns
 */
// function WxReady(){
//   jWeixin.ready({

//   })
// }
function scanCode(data) {
  const { needResults = "0", scanTypes = ["qrCode", "barCode"] } = data || {};
  return new Promise((resolve, reject) => {
    jWeixin.scanQRCode({
      desc: "scanQRCode desc",
      needResult: needResults, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      scanType: scanTypes, // 可以指定扫二维码还是一维码，默认二者都有
      success: function (res) {
        resolve(res);
        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
        console.log(result);
       // alert("res", JSON.stringify(res));
      },
      fail: function (err) {
        reject(err);
      },
    });
  });
}

5.获取地理位置

获取地理位置

/**
 * 获取地理位置
 */
function location(data) {
  // gps坐标 'wgs84'，火星坐标'gcj02'
  const { type = "gcj02" } = data || {};
  return new Promise((resolve, reject) => {
    jWeixin.getLocation({
      type: type, // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
      success: function (res) {
        jWeixin.openLocation({
          latitude: res.latitude, // 纬度，浮点数，范围为90 ~ -90
          longitude: res.longitude, // 经度，浮点数，范围为180 ~ -180。
          name: "未知", // 位置名
          address: "zz", // 地址详情说明
          scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
          infoUrl: "www.baidu.com", // 在查看位置界面底部显示的超链接,可点击跳转
        });
        resolve();
      },
      fail: function (res) {
        reject(res);
      },
    });
  });
}

6.微信获取设备信息

微信获取设备信息

/**
 * 设备信息
 */
function NetworkType() {
  return new Promise((resolve, reject) => {
    jWeixin.getNetworkType({
      success: function (res) {
        resolve(res.networkType); // 返回网络类型2g，3g，4g，wifi
      },
      fail: function (err) {
        reject(err);
      },
    });
  });
}

7.微信分享到朋友圈或者qq功能

7.1：分享到朋友或者QQ。需要在点击按钮之前调用jWeixin.ready(funciton(){})

/**
 * 分享到朋友或者QQ。
 * 需要在点击按钮之前调用jWeixin.ready(funciton(){})
 */
function MessageShareData(data) {
  const { title = "", desc = "", link = "", imgUrl = "" } = data || {};
  jWeixin.ready(() => {
    jWeixin.updateAppMessageShareData({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: imgUrl, // 分享图标
      success: function (res) {
        // 设置成功
        console.log(res);
      },
      fail: function (err) {
        console.log(err);
      },
    });
  });
}

7.2：分享到朋友或者QQ。分享到朋友圈或者QQ空间

/**
 * 分享到朋友圈或者QQ空间
 * @param {*} data
 */
function TimelineShareData(data) {
  const { title = "", link = "", imgUrl = "" } = data || {};
  jWeixin.ready(() => {
    jWeixin.updateTimelineShareData({
      title: title, // 分享标题
      link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: imgUrl, // 分享图标
      success: function (res) {
        // 设置成功
        console.log(res);
      },
    });
  });
}

8.发送一个微信支付请求

发送一个微信支付请求

/**
 * 发送一个微信支付请求
 * @param {*} data
 * @returns
 */
function WXPay(data) {
  const {
    timestamp,
    nonceStr,
    packages = 'prepay_id="1234567"',
    signType,
    paySign,
  } = data || {};
  return new Promise((resolve, reject) => {
    jWeixin.chooseWXPay({
      timestamp: timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
      nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
      package: packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
      signType: signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
      paySign: paySign, // 支付签名
      success: function (res) {
        // 支付成功后的回调函数
        resolve(res);
      },
      error: function (err) {
        reject(err);
      },
    });
  });
}

9.新页面全屏预览图片功能

新页面全屏预览图片功能

/**
 * 新页面全屏预览图片功能
 * @param {*} data
 * @returns
 */
function imagePreview(data) {
  const { urls = [""], showmenu = true, current = urls[0] } = data || {};
  return new Promise((resolve, reject) => {
    jWeixin.previewImage({
      urls: urls, //需要预览的图片链接链表
      showmenu: showmenu, //显示长按菜单
      current: current, //当前显示图片的链接
      success: function (res) {
        // 成功后的回调函数
        resolve(res);
      },
      error: function (err) {
        reject(err);
      },
    });
  });
}
function WxgetLocalImgData() {
  jWeixin.chooseImage({
    count:1,
    sizeType:['original','compressed'],
    sourceType:['album', 'camera'],
    success:function(res){
      let localId = res.localIds[0];
      jWeixin.getLocalImgData({
        localId:localId,
        success: function (res) {
          let localData = res.localData;
          // if(localData.indexOf("data:image") != 0){
          //   localData = 'data:image/jpeg;base64,' + localData
          // }
          // localData = localData.replace(/\r|\n/g,'').replace('data:image/jpg','data:image/jpeg');
          // _this.src = localData;
          console.log(res , localData);
        },
        fail: function (err) {
          console.log(err);
        },
      });
    }
  });
}