H5 wechat sharing friends, circle of friends, QQ

1, Wechat sharing

1. Preparation

APPID official account id, application friend sharing interface, ip white list, JS interface security domain name settings (must be through the record). First, login the WeChat public platform and enter the function settings of "official account number" to fill in the "JS interface domain name".

2. Introduce js

Note: AMD/CMD standard loading method is supported

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 

3. Inject permission to verify configuration through config interface

All pages that need to use js SDK must be filled with configuration information first, otherwise they cannot be called (the same url only needs to be called once, and the web app of SPA with changed url can be called every time the url changes. At present, Android wechat client does not support the new H5 feature of pushshape, so pushState is used to realize web The page of app will cause signature failure, which is fixed in Android 6.2)

wx.config({
  debug: true,         //Turn on the debugging mode, and the return value of calling all APIs will be displayed in the client alert. To view the incoming parameters, you can print them on the PC side
  appId: '',           //Required, unique ID of public account
  timestamp: '',       //Required, generate signature timestamp
  nonceStr: '',        //Required, generate random string of signature
  signature: '',       //Required, signature
  jsApiList: [         //Required, js list is required, otherwise it cannot be shared successfully
    'onMenuShareTimeline',     //Wechat Moments
    'onMenuShareAppMessage',   //friend
    'onMenuShareQQ',           //QQ
    'onMenuShareWeibo',       //QQ Zone
  ]
})

4. Successful verification through the ready interface processing

wx.ready(function(){
   //After config information validation, ready method will be implemented. After all interface calls must be obtained after config interface, config is an asynchronous operation of the client. So if you need to call the relevant interface when the page is loaded, the relevant interface must be called in the ready function to ensure the correct execution. For interfaces that are called only when triggered by the user, they can be called directly and do not need to be placed in the ready function
});

5. Handle failure verification through error interface

wx.error({
  //If the validation of config information fails, the error function will be executed. For example, if the signature expires, the validation fails. The specific error information can be viewed in the debug mode of config, or in the res parameter returned. For SPA, the signature can be updated here
});

js code

var data = {
  title: '',
  summary: '',
  pic: '',
  url: '',
  success: function(){
    getWeixin() ;//Callback function executed after user confirms sharing
  },
  cancel: function(){
    //Callback function executed after user cancels sharing
  }
}
 
wx.config({
  swapTitleInWX: true,
  appId: "<?php echo $weixin_package['appid'];?>",
  timestamp: "<?php echo $weixin_package['timestamp'];?>",
  nonceStr: "<?php echo $weixin_package['noncestr'];?>",
  signature: "<?php echo $weixin_package['signature'];?>",
  jsApiList: [
    'onMenuShareTimeline',
    'onMenuShareAppMessage',
    'onMenuShareQQ',
    'onMenuShareWeibo',
   ]
})
 
wx.ready(function () {
  wx.onMenuShareTimeline(data);
  wx.onMenuShareAppMessage(data);
  wx.onMenuShareQQ(data)
  wx.onMenuShareWeibo(data)
})

Note:
Title, it is suggested that the image size should be within 14 words: 300 * 300 pixels; image format: the size should be no more than 10kB, and GIF format is not supported; the first picture in the current page body will be taken to briefly interpret the title, and it is suggested that the link within 20 words: ', / / share the link, change the link domain name or path must be consistent with the JS security domain name of the corresponding public account on the current page

2, QQ sharing

QQ is to identify the shared icon and title through the tag in the head, which involves an attribute itemprop of h5 microdata,

<meta itemprop="name" content="title"/>
<meta itemprop="description" name="description" content="describe"/>

Application in js: Custom sharing after data acquisition

/*QQ share*/
var shareName = 'Share title';
var shareDesc= 'Share description';
var sharePic= 'Share picture path';
var metaStr = '<meta itemprop="name" content="'+shareName+'"/><meta name="description" itemprop="description" content="'+shareDesc+'"/><meta itemprop="image" content="'+sharePic+'"/>';
$('head').append(metaStr);
$('title').html(shareName);

3, Wechat sharing example

export function wxShare() {
  let shareTitle = 'Ma Youchen is a good man'
  let shareInfo = 'Ma Youchen is a good man'

  let shareUrl =
    'https://profile.csdnimg.cn/9/E/B/1_qq_24147051'
  wx.ready(function() {
    //Share with friends
    wx.onMenuShareAppMessage({
      title: shareTitle,
      desc: shareInfo,
      link: window.location.href,
      imgUrl: shareUrl,
      trigger: function(res) {
        // Do not try to use ajax asynchronous request in trigger to modify the shared content, because the client share operation is a synchronous operation, at this time, the return package using Ajax will not return
        //alert('users Click to send to friends');
      },
      success: function(res) {},
      cancel: function(res) {
        //alert('cancelled ');
      },
      fail: function(res) {
        alert(JSON.stringify(res))
      }
    })
    //Share with friends
    wx.onMenuShareTimeline({
      title: shareTitle,
      link: window.location.href,
      imgUrl: shareUrl,
      trigger: function(res) {
        // Do not try to use ajax asynchronous request in trigger to modify the shared content, because the client share operation is a synchronous operation, at this time, the return package using Ajax will not return
        //alert('users Click to share to their friends circle ');
      },
      success: function(res) {},
      cancel: function(res) {
        //alert('cancelled ');
      },
      fail: function(res) {
        alert(JSON.stringify(res))
      }
    })
    //Share to QQ
    wx.onMenuShareQQ({
      title: shareTitle, // Share title
      desc: shareInfo, // Share description
      link: location.href, // Share links
      imgUrl: shareUrl, // Share Icon
      success: function() {
        // Callback function executed after user confirms sharing
      },
      cancel: function() {
        // Callback function executed after user cancels sharing
      }
    })
    //Share to Weibo
    wx.onMenuShareWeibo({
      title: shareTitle, // Share title
      desc: shareInfo, // Share description
      link: location.href, // Share links
      imgUrl: shareUrl, // Share Icon
      success: function() {
        // Callback function executed after user confirms sharing
      },
      cancel: function() {
        // Callback function executed after user cancels sharing
      }
    })
  })
  wx.error(function(res) {
    //If the validation of config information fails, the error function will be executed. For example, if the signature expires, the validation fails. The specific error information can be viewed in the debug mode of config, or in the res parameter returned. For SPA, the signature can be updated here
    console.log('Wechat sharing failed,Check the reason!', res)
  })
}

As shown in the above function, in main.js Execute directly to wxShare();
If you need to set the shared parameters as variables, you can pass them to wxShare(), and set shareTitle, shareInfo, shareUrl as parameters to receive.

Tags: PHP Android JSON SDK

Posted on Thu, 04 Jun 2020 06:43:21 -0700 by Spekta