首页 前端知识 feat:使用企业微信JS-SDK的onMenuShareAppMessage()实现点击转发自定义分享内容(TypeScript)

feat:使用企业微信JS-SDK的onMenuShareAppMessage()实现点击转发自定义分享内容(TypeScript)

2024-04-23 21:04:35 前端知识 前端哥 183 354 我要收藏

背景:企业微信应用使用企业微信JS-SDK的分享接口实现分享样式自定义
原生:
在这里插入图片描述
需要实现成:
在这里插入图片描述

企业微信JS-SDK 是企业微信面向网页开发者提供的 基于企业微信内 的网页开发工具包。
通过使用企业微信JS-SDK,网页开发者 可借助企业微信 高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用企业微信分享、扫一扫等企业微信特有的能力,为企业微信用户提供更优质的网页体验。

传送门:企微JS-SDK开发文档

目录

    • 步骤一:引入JSSDK
    • 步骤二:通过config接口注入权限验证配置
      • 注意点: url的赋值
    • 步骤三:封装分享api
      • 注意点:每次调用api都需要重新注册一遍
    • 步骤四:监听转发按钮

步骤一:引入JSSDK

<!-- 这里以jssdk1.2.0为例子,在html文件里引入jssdk -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

步骤二:通过config接口注入权限验证配置

// 示例:
wx.config({
    beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,企业微信的corpID,必须是本企业的corpID,不允许跨企业使用
    timestamp: '', // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见 附录-JS-SDK使用权限签名算法
    jsApiList: [] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});

这里的config里的内容一般是请求后端获取,举个例子:

新建一个qwjssdk.ts文件或js文件,这里以Typescript为例,JavaScript类似。

  1. 提前将需要用到的api用一个数组存起来
const defaultApiSet = new Set([
  'onMenuShareAppMessage', // 获取“转发”按钮点击状态及自定义分享内容接口
])
/**
 * [getBrowserEnv 判断当前浏览器的环境,可忽略]
 * @return {[Object]}
 */
function getBrowserEnv(): {isWxWork: boolean, wxWorkVersion: string | null} {
  const ua = navigator.userAgent.toLowerCase()
  const isWxWork = /wxwork/i.test(ua) && /micromessenger/i.test(ua)
  // 获取企业微信版本
  let wxWorkVersion = null
  if (ua.match(/wxwork\/(\S*)\s/)) {
    wxWorkVersion = (ua.match(/wxwork\/(\S*)\s/) as object)[1]
  }
  return {
    isWxWork,
    wxWorkVersion
  }
}
  1. 定义一个方法调用签名接口和注册配置信息

    getParams是请求后端接口,获取签名,返回来的参数可以与配置信息对应上即可,一般返回(appId、timestamp、noncestr、signature)。具体可阅读JS-SDK使用权限签名算法。

    注意点: url的赋值

    为什么 url赋值 要使用encodeURIComponent()
    :因为有个业务场景需要带值为中文的请求参数,所以这里需要先编码再把url传给签名接口,否则不会走分享api。这里因项目而异。没有作者这个业务场景的话可以直接将url赋值为window.location.href.split('#')[0]

// 请求接口获取参数
async getParams() {
    const url = encodeURIComponent(window.location.href.split('#')[0]) // 注意点,因项目而已
    const res = await Api.getJssdkConfig({ launchUrl: url }) // 请求自己定义接口的方法
    if (res.code.value === 0) {
      return new Promise((resolve, reject) => {
        resolve(res.data.value)
      })
    }
  }
async initConfig() {
	const config:any = await this.getParams() 
	if (!config) {
		console.log('签名失败')
		return false
    }
    config.jsApiList = Array.from(defaultApiSet) // 将需要用到的api赋值给confi.JsAPIList
    await this.registeredConfig(config) // 去注册,将注册信息带到注册配置方法里面
}
  1. 注册配置信息
// 注册配置信息
registeredConfig(config) {
    console.log('registeredConfig config:>> ', config);
    window.wx.config({
      // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
      beta: true,
      // 开启调试模式
      debug: false,
      // 必填,企业微信的corpID
      appId: config.appId,
      // 必填,生成签名的时间戳
      timestamp: +config.timestamp,
      // 必填,生成签名的随机串
      nonceStr: config.noncestr,
      // 必填,签名,见 附录-JS-SDK使用权限签名算法
      signature: config.signature,
      // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
      jsApiList: config.jsApiList
    })
    return new Promise((resolve, reject) => {
      // 如果是企业微信端的情况下执行,浏览器的情况下走else。不判断的话可忽略此判断。此方法在上面已经写了。
      if (getBrowserEnv().isWxWork) {
        window.wx.ready(() => {
          console.log('注册成功', config)
          // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
          resolve(null)
        })
        window.wx.error(err => {
          // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
          console.log('注册失败', err, config)
          reject(err)
        })
      } else {
        resolve(null)
      }
    })
  }

步骤三:封装分享api

在公共方法文件里面封装分享方法的调用。
这里就命名一个common.ts文件为例吧。

注意点:每次调用api都需要重新注册一遍

每次调用api之前都需要调用前面写的initConfig()重新注册一遍配置信息。否则分享的样式比如title、desc、imgUrl都会不生效。

// 引入qwjssdk文件,路径自己决定
import qwjssdk from '~/utils/qwjssdk'
/**
 * 通过调用jssdk能力自定义分享内容
 * */
export const wxShareAppMessage = async (shareObj: shareObj) => {
  await qwjssdk.initConfig() // 重点!!这里根据业务需求,需要每次更换路由都需要重新注册一遍,否则分享出去的样式不生效。
  if (!window.wx) {
    return
  }
  // 获取“转发”按钮点击状态及自定义分享内容接口
  window.wx.onMenuShareAppMessage({
    title: shareObj.title, // 分享标题
    desc: shareObj.desc, // 分享描述
    link: shareObj.link, // 分享链接
    imgUrl: shareObj.imgUrl, // 分享图标
    success: function () {
      // 这里可以写分享成功之后的逻辑
      console.log('SUCCESS onMenuShareAppMessage :>> ', shareObj);
    },
    error: (err)=>{
      // 这里可以写分享失败之后的逻辑
      console.log('ERR onMenuShareAppMessage :>> ', err);
    }
  });
}

这里只用到了success 和 error 的回调,其他回调可以看下面这段官网的描述:

所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:
success:接口调用成功时执行的回调函数。
fail:接口调用失败时执行的回调函数。
complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。
注意
不要尝试在 trigger 中使用 Ajax 异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用 Ajax 的回包会还没有返回。
以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性err_msg,其值格式如下:
调用成功时:“xxx:ok” ,其中xxx为调用的接口名
用户取消时:“xxx:cancel”,其中xxx为调用的接口名
调用失败时:其值为具体错误信息

步骤四:监听转发按钮

在业务代码里面,引入封装的api,这里就以index.vue举例叭

import { wxShareAppMessage } from '~/utils/common'
/**
 *  调用分享api,实现分享自定义内容
 */
const toShare = () => {
  shareData.value = {
    title: '搜索',
    desc: '搜索',
    link: window.location.href,
    imgUrl: 'xxxxxxxxx.png'
  }
  wxShareAppMessage(shareData.value)
}

toShare()  // 根据自身的业务逻辑调整请求位置

执行上面代码就代表着开始监听转发按钮了。

快去尝试叭~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5843.html
评论
发布的文章

【Java】JSONArray详解

2024-04-30 12:04:14

Unity——LitJSON的安装

2024-04-30 12:04:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!