angular2 微信分享网页时自定义标题、描述和图片

引入js文件

在index.html中引入js文件

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>大洼X</title>
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>

使用

// 分享数据模型
export interface WxConfigModel {
  title: string;
  desc: string;
  link: string;
  img: string;
}

@Injectable({
  providedIn: 'root'
})
export class WechatUtil {

  constructor() {}

  /**
   * 配置微信分享
   */
  public initWxShareConfig() {
    if (!(window as any).wx) {
      return;
    }
    const wxConfigModel: WxConfigModel = {
      title: '标题',
      desc: '简述',
      link: '跳转连接',
      img: '图片地址'
    };
    this.config(wxConfigModel);
  }

  /**
   * 微信数据实际配置方法
   * @param wxConfigModel 分享信息
   */
  private config(wxConfigModel: WxConfigModel) {
    const wx = (window as any).wx;
    const href = location.href.split('#')[0];
    wx.config({
       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
       appId: '必填，公众号的唯一标识', 
       timestamp: '必填，生成签名的时间戳',
       nonceStr: '必填，生成签名的随机串',
       signature: '必填，签名',
       jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表
     });
     wx.ready(function () {
       wx.onMenuShareAppMessage({
         title: wxConfigModel.title, // 分享标题
         desc: wxConfigModel.desc, // 分享描述
         link: wxConfigModel.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
         imgUrl: wxConfigModel.img, // 分享图标
       });
       wx.onMenuShareTimeline({
         title: wxConfigModel.title, // 分享标题
         desc: wxConfigModel.desc, // 分享描述
         link: wxConfigModel.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
         imgUrl: wxConfigModel.img, // 分享图标
       });
     });
     wx.error(function (res) {
       // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
       console.log(JSON.stringify(res));
     });
  }
}

来源：CSDN

作者：大洼X

链接：https://blog.csdn.net/z13192905903/article/details/103769864

标签

微信分享

config

angular