Detailed explanation of WeChat JS-SDK custom sharing function examples [Share to friends/Share to Moments]

The example in this article describes the custom sharing function of WeChat JS-SDK. Share it with everyone for your reference, the details are as follows:

The shared content can be modified through jssdk.

1. Configure 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();
?>

<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>

2. Join share with friends, share to Moments event

<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>

3. Get wx in the background Share data

/**** 获取微信分享数据 ****/
$shop_id = $this->_get('shop_id','intval');
$wxShare['title'] = $goodsData['name'];
$wxShare['desc'] = $store['name'];
$wxShare['imgUrl']= $this->siteUrl.$goodsData['logoimg'];
$wxShare['link'] = $this->siteUrl.U('Goods/info',array('id'=>$goodsData['id'],'shop_id'=>$shop_id));
$this->assign('wxShare',$wxShare);

The address here must be an absolute address. Otherwise, WeChat cannot recognize the relative address.

If not set, it will be the default title, default logo, and default details.
After setting the event, it will be shared according to the content you want.

4. I want distribution page, source code

  
  
  
  
  
  
  
  
  
  
  


  

    

    
    

      
分销佣金
        {sh:$commission}元
      
已销售
        
          echo ($goodsData['salecount'] + $goodsData['fakemembercount']);
        件
    
  
  

    
      

        

        

          

          

            
我是
              {sh:$wxuserData.nickname}，
              
我为{sh:$store.name}代言。
          
        
      
    
    

      

        
        

          {sh:$goodsData.name}
          

            ¥{sh:$goodsData.price}
            ¥{sh:$goodsData.oprice}
          
        
      
    
    

      
      长按二维码 识别图中二维码
    
  
  

    

       分销如何赚钱
    
    

      

        第一步：转发商品链接或商品二维码图片给微信好友；
        

        

        第二步：从您转发的链接或图片进入商城的好友，系统将自动锁定成为您的客户，他们在微信商城中购买任何商品，您都可以获得分销佣金；
        

        

        第三步：您可以在分销中查看【我的团队】和【分销佣金】。好友确认收货后，佣金可提现。
        

        

      
    
  
  


<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>