WeChat JS-SDKカスタム共有機能例を詳しく解説【友達に共有・モーメントに共有】

この記事の例では、WeChat JS-SDK のカスタム共有機能について説明します。参考のためにみんなと共有してください。詳細は次のとおりです:

共有コンテンツは jssdk を通じて変更できます。

1. jssdk を設定します

Wx_config.html

<?php
import("@.ORG.jssdk");
$jssdk = new JSSDK(C(&#39;oauth_config.appid&#39;), C(&#39;oauth_config.appsecret&#39;));
$signPackage = $jssdk->GetSignPackage();
?>

2. 友達と共有し、Moments イベントに共有します

3.背景共有データ

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
  wx.config({
    debug: false,
    appId: &#39;<?php echo $signPackage["appId"];?>&#39;,
    timestamp: &#39;<?php echo $signPackage["timestamp"];?>&#39;,
    nonceStr: &#39;<?php echo $signPackage["nonceStr"];?>&#39;,
    signature: &#39;<?php echo $signPackage["signature"];?>&#39;,
    jsApiList: [
      &#39;onMenuShareTimeline&#39;,
      &#39;onMenuShareAppMessage&#39;,
      &#39;chooseImage&#39;,
      &#39;uploadImage&#39;
    ]
  });
</script>

ここでのアドレスは絶対アドレスである必要があります。そうしないと、WeChat は相対アドレスを認識できません。

設定されていない場合は、デフォルトのタイトル、デフォルトのロゴ、デフォルトの詳細になります。

イベントを設定後、ご希望の内容に応じて共有されます。

4. 配布ページ、ソースコードが欲しい

<script>
// 微信JSSDK开发
wx.ready(function () {
  // 分享给朋友
  wx.onMenuShareAppMessage({
   title: &#39;{sh:$wxShare.title}&#39;, // 商品名
   desc: &#39;{sh:$wxShare.desc}&#39;, // 店铺名
   link: &#39;{sh:$wxShare.link}&#39;, // 商品购买地址
   imgUrl: &#39;{sh:$wxShare.imgUrl}&#39;, // 分享的图标
   fail: function (res) {
    alert(JSON.stringify(res));
   }
  });
  // 分享到朋友圈
  wx.onMenuShareTimeline({
   title: &#39;{sh:$wxShare.title}&#39;, // 商品名
   link: &#39;{sh:$wxShare.link}&#39;, // 商品购买地址
   imgUrl: &#39;{sh:$wxShare.imgUrl}&#39;, // 分享的图标
   fail: function (res) {
    alert(JSON.stringify(res));
   }
  });
});
</script>