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

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

高洛峰

Release： 2016-12-05 11:28:34

Original

1949 people have browsed it

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

Copy after login

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

Copy after login

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>

Copy after login

3. Get wx in the background Share data

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

Copy after login

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

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

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:$store.name}】{sh:$goodsData.name}
  
  
  
  


  
    
    
    
      分销佣金
        {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>

Copy after login