uniapp中二次封装jssdk和使用

直接上代码

// import wx from "weixin-js-sdk";
/**
 * 考虑到包的大小，所以直接在 index.html 文件中cdn引入了jssdk
 * <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 * 注意：这里 jWeixin 一定要用这个，不要使用 wx
 */
import { getWeChatSignStr } from "@/api"; // 获取签名的接口
/**
 * @param {*} oType String  业务类型 例如: app 跳转app, share 微信和朋友圈分享等.
 * @param {*} paramsObj Object 接手一些需要处理的 参数
 * @param {*} customUrl String 自定义url
 * @returns
 */
export const wxJssdkTools = (oType, paramsObj = {}, customUrl) => {
  //#ifdef H5
  return new Promise(async (resolve, reject) => {
    let url = ``;
    var isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isIos) {
      url = location.href.split("#")[0];
      //   url = window.jsUrl  // 进入 h5的第一个页面时, 将当前 url 存起来
    } else {
      url = location.href.split("#")[0];
    }

    // console.log('wxJssdkTools参数', paramsObj)
    if (customUrl) url = customUrl;
    const res = await getWeChatSignStr({ url });
    // console.log('jssdk 签名检验：', res)
    const { title, desc, link, imgUrl } = paramsObj;
    // console.log(title, desc, link, imgUrl)
    // 这里使用 jWeixin, 因为 uniapp 中， wx 已经是一个全部变量了
    jWeixin.config({
      debug: false, // 开启调试模式 true 开启， false 关闭
      appId: res.result.appId, // 必填，公众号的唯一标识
      timestamp: res.result.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.result.nonceStr, // 必填，生成签名的随机串
      signature: res.result.signature, // 必填，签名
      // 必填，需要使用的JS接口列表（根据自己的需求添加进去）
      jsApiList: [
        "scanQRCode",
        "getLocation",
        "chooseImage",
        "previewImage",
        "updateAppMessageShareData",
        "updateTimelineShareData",
        "onMenuShareTimeline",
        "onMenuShareAppMessage",
      ],
      // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp']
      openTagList: ["wx-open-launch-weapp", "wx-open-launch-app"],
    });
    jWeixin.checkJsApi({
      jsApiList: [
        "updateAppMessageShareData", // 分享到朋友/QQ 的 API
        "updateTimelineShareData", // 分享到微信朋友圈/QQ空间 的 API
      ],
      success: function () {
        console.log("checkJsApi成功");
      },
      fail: function () {
        console.log("checkJsApi失败");
      },
    });
    jWeixin.ready(function () {
      // console.log('进入到wx.ready里面啦......')
      switch (oType) {
        case "app":
          console.log("进入app - ready 了吗？");
          resolve(JSON.stringify(paramsObj));
          break;
        case "share":
          // console.log('首页分享', link)
          jWeixin.updateAppMessageShareData({
            title, // 分享标题
            desc, // 分享描述
            link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl, // 分享图标
            success: function () {
              // console.log('resolve ---好友-- 分享成功')
              resolve(); // 分享成功
            },
            fail: function (err) {
              // console.log('reject ---好友---- 分享失败')
              reject(err); // 分享失败
            },
          });
          jWeixin.updateTimelineShareData({
            title, // 分享标题
            link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl, // 分享图标
            success: function () {
              // console.log('resolve ---朋友圈-- 分享成功')
              resolve(); // 分享成功
            },
            fail: function (err) {
              // console.log('reject ---朋友圈---- 分享失败')
              reject(err); // 分享失败
            },
          });
          break;
        default:
          console.log("默认");
      }
    });
    jWeixin.error(function (err) {
      switch (oType) {
        case "app":
          reject("app fail");
          break;
        case "share":
          reject("share fail");
          break;
        default:
          console.log("默认");
      }
    });
  });
  //#endif
};

引入和使用

1. 引入

import { wxJssdkTools } from "@/utils/wxJssdkTools";

2. 使用

 // #ifdef H5
    const link = location.href;
    // 配置分享参数
    await wxJssdkTools("share", { title: "我是标题", desc: "我是描述", link, imgUrl:"" });
    // #endif

注意：

1. 尽量使用 cdn 引入jssdk文件，减少包的大小
2. 这里 jWeixin 一定要用这个，不要使用 wx
3. 在项目根目录的index.html文件中引入： https://res.wx.qq.com/open/js/jweixin-1.6.0.js
4. 使用的时候加了 #ifdef H5 // #endif 条件编译，是因为这个一般用于h5端