h5微信分享卡片

概述

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,在H5网页中改变在微信中的分享内容,以卡片的形式传播,为微信用户提供更优质的网页体验。

JSSDK使用步骤

步骤一:绑定域名

1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,不需要填写协议http或者https

2.在“开发者中心”查看对应的接口权限,确保公众号能使用微信分享、扫一扫等功能。

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):res.wx.qq.com/open/js/jwe…

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:res2.wx.qq.com/open/js/jwe… (支持https)

引入成功之后会在window上挂载wx对象,从而使用wx中的方法进行校验和后续的操作。

步骤三:权限验证

当网页需要以卡片形式分享时,在页面加载时先注入配置信息,进行校验,否则将无法成功调用后续的分享等功能。

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: ['updateAppMessageShareData','updateTimelineShareData',...] // 必填,需要使用的JS接口列表,可参考开发文档中的列表
});

步骤四:注册事件

当wx.config注册成功后,会返回errMsg: “config:ok” 信息,以及有权限调用的jsApiList列表;

如果返回的jsApiList为空,请核对公众号是否有对应事件的权限

{
  errMsg: "config:ok",
  jsApiList: ['updateAppMessageShareData','updateTimelineShareData',....]
}

配置成功后,开始注册事件

const setting = {
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: () => {
          if (success && typeof success === 'function') success();
    },
    cancel: () => {
         if (cancel && typeof cancel === 'function') cancel();
    },
};

window.wx.ready(() => {
 // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
    window.wx.updateAppMessageShareData(setting);
    window.wx.updateTimelineShareData(setting);
});

接口调用说明

所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:

success:接口调用成功时执行的回调函数。 fail:接口调用失败时执行的回调函数。 complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。 cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。 trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。 备注:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回。

以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下:

调用成功时:”xxx:ok” ,其中xxx为调用的接口名

用户取消时:”xxx:cancel”,其中xxx为调用的接口名

调用失败时:其值为具体错误信息

常见错误及解决方法

1. invalid url domain

当前页面所在域名与使用的appid没有绑定,请确认正确填写绑定的域名,仅支持80(http)和443(https)两个端口,因此不需要填写端口号(一个appid可以绑定三个有效域名)

2.invalid signature签名错误,最常见

  • 确认签名算法正确,可用mp.weixin.qq.com/debug/cgi-b… 页面工具进行校验。

  • 确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。

  • 确认url是页面完整的url(请在当前页面alert(location.href.split(‘#’)[0])确认),包括’http(s)://’部分,以及’?’后面的GET参数部分,但不包括’#’hash后面的部分

  • 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

  • 确保一定缓存access_token和jsapi_ticket。

  • 确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去’#’hash部分的链接(可用location.href.split(‘#’)[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

  • 确保获取签名的url和服务端去获取signature一致,当url上携带多个参数时,有可能导致与服务端注册的url不一致,所以建议使用encodeURIComponent先处理传入的url,通过服务端接口获取签名参数时,最后也返回注册的url,用于比较,确保两者一致

3.the permission value is offline verifying

确保config正确执行,或者调用的JSAPI有传入config的jsApiList参数

4.permission denied

该公众号没有权限使用这个JSAPI,或者是调用的JSAPI没有传入config的jsApiList参数中(部分接口需要认证之后才能使用),但是这种一般会报错invalid signature

完整代码示例

微信分享组件


/**
 * 微信分享组件
 */
import { get } from './request';

export default class WXShare {
    constructor(config) {
        this.config = {
            // 标题
            title: '',
            // 描述
            desc: '',
            // 注册链接
            link: '',
            // 分享链接
            sharkLink: '',
            // 图片
            imgUrl: '',
            ...config,
        };

        this.init();
    }

    // 注册微信配置
    setConfig(configData) {
        window.wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数。
            appId: configData.appId, // 必填,公众号的唯一标识
            timestamp: configData.timestamp, // 必填,生成签名的时间戳
            nonceStr: configData.nonceStr, // 必填,生成签名的随机串
            signature: configData.signature, // 必填,签名,见附录1
            jsApiList: [
                'updateAppMessageShareData',
                'updateTimelineShareData',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone',
            ], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        });

        window.wx.error((err) => {
            window.console.log('err', err);
        });

        const { title, desc, sharkLink, imgUrl, success = null, cancel = null } = this.config;
        const setting = {
            title,
            desc,
            link: sharkLink,
            imgUrl,
            success: () => {
                if (success && typeof success === 'function') success();
            },
            cancel: () => {
                if (cancel && typeof cancel === 'function') cancel();
            },
        };
        window.wx.ready(() => {
            window.wx.updateAppMessageShareData(setting);
            window.wx.updateTimelineShareData(setting);
            window.wx.onMenuShareQQ(setting);
            window.wx.onMenuShareWeibo(setting);
            window.wx.onMenuShareQZone(setting);
        });
    }

    // 获取微信配置
    init() {
        get(`/*******?url=${this.config.link}`)
            .then((res) => {
                const { code, data } = res || {};
                if (code === 0) {
                    this.setConfig(data);
                }
            })
            .catch((err) => {
                window.console.log('err', err);
            });
    }
}

环境判断以及调用

import WxShare from './wxShare';

/**
 * 是否在微信中打开
 * @return {Boolean} true-是 false-否
 */
export const isWxOpen = () => {
    const isWx = window.navigator.userAgent.match(/MicroMessenger/i);
    // 是否在微信中打开
    if (isWx && isWx[0] === 'MicroMessenger') {
        return true;
    }
    return false;
};

/**
 * 配置微信分享
 * @param {Object} params 配置信息
 * @param {String} params.title 标题
 * @param {String} params.desc 简介
 * @param {String} params.sharkLink 分享的链接,可以与注册的链接不一致,但需要是相同域名下的
 * @param {String} params.imgUrl 缩略图
 * @param {Function} params.success 成功回调
 * @param {Function} params.cancel 失败回调
 */
export const registerWx = (params) => {
    // 优先注册
    if (isWxOpen()) {
        const {
            title = '蝶恋花',
            desc = '衣带渐宽终不悔,为伊消得人憔悴',
            imgUrl = '',
            success = null,
            cancel = null,
            sharkLink = window.location.href // 分享链接,
        } = params || {};
        const config = {
            title,
            desc,
            link: encodeURIComponent(window.location.href), // 注册的链接
            sharkLink,
            imgUrl:
                imgUrl ||  'https://****favicon.ico',
            success,
            cancel,
        };
        // eslint-disable-next-line no-new
        new WxShare(config);
    }
};

效果预览

h5微信分享卡片

原文链接:https://juejin.cn/post/7317091895172136960 作者:抛个呆萌

(0)
上一篇 2023年12月28日 上午11:04
下一篇 2023年12月28日 上午11:15

相关推荐

发表回复

登录后才能评论