首页 > 其他分享 >uniapp使用微信jssdk自定义分享

uniapp使用微信jssdk自定义分享

时间：2023-11-30 14:13:01浏览次数：58  
标签：uniapp 自定义 jssdk title 微信 res 分享 imgUrl 页面

前言提示：本文记录的是使用uniapp开发的H5+APP项目，H5端使用微信自定义分享功能，文中有关APP的兼容，如果不需要兼容APP的可以忽略

一、引入

首先安装 jweixin-module 包

npm install jweixin-module --save

二、封装工具方法

为了方便使用，新建一个 wechat.js 文件：

// #ifdef H5
import http from "./http";
import wx from "jweixin-module";

// 需要调用的微信api列表
export const WXAPI = [
  "chooseWXPay",
  "updateAppMessageShareData",
  "updateTimelineShareData",
  "onMenuShareAppMessage",
  "scanQRCode",
  "getLocation",
];
// 微信分享朋友默认配置
const shareOptionsDefalut = {
  title: "这是标题", // 分享标题
  desc: "这是描述", // 分享描述
  imgUrl: "图片地址", // 封面图
};

export default {
  /**
   * 判断是否在微信中
   */
  isWechat() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/micromessenger/i) == "micromessenger") {
      return true;
    } else {
      return false;
    }
  },

  /**
   * 通过config接口注入权限验证配置
   * @param {Object} cb 需要执行的函数
   */
  getWxConfig(cb) {
    http("POST", "/shop/wx/shareFriend", {
      url: encodeURIComponent(window.location.href),
    }).then((res) => {
      if (res.success) {
        wx.config({
          debug: false, // 是否开启调试模式
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名，见附录1
          jsApiList: WXAPI,
        });
        if (cb) {
          cb();
        }
      }
    });
  },

  /**
   * 唤起微信分享
   * @param {Object} sharedata 分享需要的参数
   * @param {Object} cb 成功回调
   * @param {Object} errorCb 失败回调
   */
  callWexinShare(
    sharedata = shareOptionsDefalut,
    cb = () => {},
    errorCb = () => {}
  ) {
    this.getWxConfig(() => {
      wx.ready(() => {
        console.log("---config注入成功---，开始使用sdk接口");
        // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
        wx.updateAppMessageShareData({
          title: sharedata.title || shareOptionsDefalut.title,
          desc: sharedata.desc || shareOptionsDefalut.desc,
          // 微信对分享图有限制，具体看踩坑
          imgUrl:
            (sharedata.imgUrl || shareOptionsDefalut.imgUrl) +
            "?x-oss-process=image/resize,w_120,m_lfit/format,png/quality,q_80",
          link: window.location.href,
          success: (res) => {
            cb(res);
          },
          cancel: (cancelMsg) => {
            errorCb(cancelMsg);
          },
        });
        // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
        wx.updateTimelineShareData({
          title: sharedata.title || shareOptionsDefalut.title,
          imgUrl:
            (sharedata.imgUrl || shareOptionsDefalut.imgUrl) +
            "?x-oss-process=image/resize,w_120,m_lfit/format,png/quality,q_80",
          link: window.location.href,
          success: (res) => {
            cb(res);
          },
          cancel: (cancelMsg) => {
            errorCb(cancelMsg);
          },
        });
      });
      wx.error((res) => {
        console.log("---注入失败，查看失败原因---", res);
      });
    });
  },
};
// #endif

  1. 对工具函数简单说明下

    • isWechat 判断当前是否是微信环境
    • getWxConfig(关键) 请求后端接口，注入配置信息
    • callWexinShare 对微信分享接口的二次封装

  2. 注意事项

    • 整个 wechat.js 文件里最好用条件编译包裹起来【#ifdef H5、#endif】，不然打包 APP 后会出现报错（APP 没有 window 对象）
    • callWexinShare 函数的成功回调和失败回调参数都需要有一个默认值，不然 updateAppMessageShareData 的 success 回调中会报错‘cb is not defined’（这个当时我也没注意到，不过在 onMenuShareTimeline 这个接口倒不会报错，怪不得是即将废弃的接口，新接口更加规范了）

三、页面中使用

  1. 在 main.js 中将 wechat 绑定在 vue 全局对象上，方便后续使用
import wechat from "@/utils/wechat.js";
Vue.prototype.$wechatSdk = wechat;
  1. 在 App.vue 中的 onLaunch 周期里，使用 uni.addInterceptor 去监听页面的每次变化

根据官方文档说的“同一个 url 仅需调用一次，对于变化 url 的 SPA 的 web app 可在每次 url 变化时进行调用”

onLaunch() {
  // #ifdef H5
  const naviArr = [
    'navigateTo',
    'redirectTo',
    'reLaunch',
    'switchTab',
    'navigateBack',
  ]
  for (let i of naviArr) {
    uni.addInterceptor(i, {
      success:(e)=>{
        this.watchRouter()
      },
    })
  }
  this.watchRouter() // 首次进入页面
  // #endif
},
  1. 然后在 methods 里调用 callWexinShare 方法
methods:{
  watchRouter() {
    if (this.$wechatSdk?.isWechat()) {
      this.$wechatSdk.callWexinShare()
    }
  }
}
  1. （看需求）因为项目需求需要在一些特定页面根据页面的信息配置分享内容，如作者主页、商品详情页
async getInfo() {
  const res = await api()
  this.goodDetail = res.data
  // #ifdef H5
  // 微信自定义分享
  if (this.$wechatSdk?.isWechat()) {
    this.$wechatSdk.callWexinShare({
      title: this.goodDetail.title,
      desc: this.goodDetail.desc,
      imgUrl: this.goodDetail.imgUrl,
    })
  }
  // #endif
}

四、踩坑

  1. 使用 uni.addInterceptor 去监听页面跳转的 api，忽略了浏览器的返回按钮（会出现分享的页面的配置内容还是上一个页面的），所以要在 onUnload 页面卸载的时候重置回默认配置
onUnload() {
  // #ifdef H5
  if (this.$wechatSdk?.isWechat()) {
    this.$wechatSdk.callWexinShare()
  }
  // #endif
},
  1. 有一种场景：A 页面进入 B 页面，B 页面调接口获取详情，然后用详情去配置分享内容，B 页面进入 C 页面再返回 B 页面，不管是 uni.navigateBack 返回页面还是浏览器返回页面都会把分享内容重置回默认配置，这时候再分享 B 页面，就不是根据接口返回的内容配置的了。因为配置 B 页面分享内容是放在调接口的时候，所以想了两个方法解决：第一种简单粗暴，直接在 onShow 的时候再去调接口获取详情，这种不太友好；第二种是第一次进入页面的时候把详情信息存在本地，然后返回的时候在 onShow 里判断是否有详情信息，如果有则更新分享配置：
async getInfo() {
  const res = await api()
  this.goodDetail = res.data
  // #ifdef H5
  uni.setStorageSync("wxshareData", this.goodDetail)
  // 微信自定义分享
  if (this.$wechatSdk?.isWechat()) {
    this.$wechatSdk.callWexinShare({
      title: this.goodDetail.title,
      desc: this.goodDetail.desc,
      imgUrl: this.goodDetail.imgUrl,
    })
  }
  // #endif
}

 onShow() {
  // #ifdef H5
  // 从上一个页面返回到这个页面的时候判断缓存，有则更新微信分享配置
  const wxshareData = uni.getStorageSync('wxshareData');
  if (wxshareData) {
    if (this.$wechatSdk?.isWechat()) {
      this.$wechatSdk.callWexinShare({
        title: wxshareData.title,
        desc: wxshareData.desc,
        imgUrl: wxshareData.imgUrl,
      })
    }
  }
  // #endif
}
  1. 微信 SDK 对分享图标是有限制的！！！

图片格式：微信 SDK 支持的分享图标格式为 JPEG、PNG 格式，不支持 GIF 格式。
图片大小：微信 SDK 对分享图标的大小有限制，图片大小不能超过 32KB。
图片尺寸：微信 SDK 对分享图标的尺寸也有限制，建议分享图标的尺寸为 120px * 120px。
图片质量：为了保证分享图标的清晰度，建议分享图标的质量在 80%以上。

这个是最坑的，sdk 文档也没有说明，最后还是 GPT 上找到的！（内心 os：怪不得江湖上都吐槽微信，这次算是领教了）

我的解决方案是采用 oss 图片压缩对图片进行压缩处理，就是在图片链接后拼接"?x-oss-process=image/resize,w_120,m_lfit/format,png/quality,q_80"，详细参数可以参考oss 图片缩放

五、其他

标签：uniapp,自定义,jssdk,title,微信,res,分享,imgUrl,页面
From： https://www.cnblogs.com/wp-leonard/p/17867213.html

相关文章

  • 关于自定义R类-前后端数据交互协议
    关于自定义R类-前后端数据交互协议前言这是我在学习前后端分离开发时遇到的一种前后端数据交互思想时的笔记记录，以便日后遗忘查阅；目录目录关于自定义R类-前后端数据交互协议前言目录一、什么是前后端数据交互协议二、如何自定义一个结果类①思考R类要包含哪些基础属性②设......
  • tita升级｜考核流程支持自定义配置
    升级详情：“推荐你关注一下TitaOKR“1.考核流程中新增指标制定与确认流程Q1：在哪新增？小T：在考核模板的考核流程设置中，指标制定与指标确认流程节点有两种添加方式：1）考核模板中新增固定流程三，固定流程三为考核流程为“指标制定+指标确认+执行期+员工自评+同事评价+上级评价+绩效校......
  • 自定义标签
    1.在应用（如：app01）下创建文件夹templatetags再创建一个py文件，编写自定义标签（如：mytag） 2.编写自定义标签fromdjangoimporttemplateregister=template.Library()@register.filter(name="cut")defcut(value,arg):returnvalue.replace(arg,"")@register.filt......
  • 2-6 自定义模块、第三方模块、内置模块
    ​ 概要：自定义模块第三方模块内置模块 1.自定义模块 1.1模块和包importhashlib​​defencrypt(data):  """数据加密"""  hash_object=hashlib.md5()  hash_object.update(data.encode('utf-8'))  returnhash_object.hexdigest()......
  • Android项目实战（六十七）：自定义圆形进度条
    圆形进度条支持设置：1、圆环背景颜色2、圆管背景宽度3、进度圆环颜色4、进度圆环宽度5、圆环进度6、开始角度7、动画执行时间 自定义类：packagecom.example.mainactivty;importandroid.content.Context;importandroid.content.res.TypedArray;importandroid.......
  • uniapp开发App从开发到上架全过程
    ​当我们的APP开发完毕，最终交付的时候，必然要经历的一个环节，就是APP上架，国内APP上架一般为IOS端appstore上架，安卓端应用商店比较多，最常见的应用商店有华为应用商店、小米应用商店、OPPO应用商店、VIVO应用商店、应用宝应用商店等。在开始上架前，需要准备好相应的材料，安卓端需要准......
  • 2023-11-23-idea技巧-自定义后缀补全
    Idea技巧-PostfixCompletion在idea中可以使用.xxx进行后缀补全比如.sout如何自定义后缀补全?比如.log在idea中打开设置File|Settings|Editor|General|PostfixCompletion这里定义了上面提到的sout同理点击上图+号新建一个模板,并参考sout写入对应的规则效果......
  • 一些有用的自定义函数（抄录）
    提取字符串中的数字'提取字符串中的数字FunctionGetDigits(strTextAsString)AsStringDimstrCharAsString,strMsgAsStringDimiAsLongstrMsg=""Fori=1ToLen(strText)strChar=Mid(strText,i,1)IfstrCharLike"#"The......
  • SpringBoot JPA实践之EntityManage查询返回自定义DTO entityManager.createNativeQuer
    SpringBootJPA实践之EntityManage查询返回自定义DTOentityManager.createNativeQuery(sql)  在很多时候我更喜欢随意组合查询出来返回一个DTO对象的实现，JPA提供的多数查询均以返回Entity居多，它提供的EntityManager对象可以实现将SQL语句查询的结果转换为自定义DTO对象（这与......
  • el select 选项多列，换行，表格，数据量大，全部显示，自定义el-select，el-select插入表格
    1、效果图：2、实现：自定义下拉框内容，采用radio或checkbox作为选项绑定值<template><el-selectv-model="selectValue"v-bind="$attrs"clearable><!--隐藏的option组件，展示下面的插槽--><el-optionv-show="false"/><!--......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99