The 'JS interface domain name' in the WeChat official account implements the sharing function

1. Preparation work

APPID public account id, application friend sharing interface, ip whitelist, js interface secure domain name setting (must be filed) . You must first log in to the WeChat public platform and enter the function settings of "Official Account Settings" to fill in the "JS interface domain name"

2. Import js

Note: Support the use of AMD/CMD standard loading method

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

3. Inject permission verification configuration through the config interface

All pages that need to use JS-SDK must first inject configuration information, otherwise it will not be called (the same URL only needs to be called once, for changing URLs The SPA's web app can be called every time the URL changes. Currently, the Android WeChat client does not support the new H5 features of pushShate, so using pushState to implement the web app's page will cause the signature to fail. This problem will be fixed in Android 6.2)

wx.config({
  debug: true,         //开启调试模式，调用所有的api的返回值会在客户端alert出来，若要查看传入的参数，可以在PC端打印出来
  appId: '',           //必填，公账号的唯一标识
  timestamp: '',       //必填，生成签名的时间戳
  nonceStr: '',        //必填，生成签名的随机串
  signature: '',       //必填，签名
  jsApiList: [         //必填，需要使用js列表，否则无法分享成功
    'onMenuShareTimeline',     //朋友圈
    'onMenuShareAppMessage',   //朋友
    'onMenuShareQQ',           //QQ
    'onMenuShareWeibo',       //QQ空间
  ]
})

4. Handle successful verification through ready interface

wx.ready(function(){
   //config信息验证后会执行ready方法，所有接口调用必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});

5. Handle failed verification through error interface

wx.error({
  //config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
});

js code

var data = {
  title: '',
  summary: '',
  pic: '',
  url: '',
  success: function(){
    getWeixin() ;//用户确认分享后执行的回调函数
  },
  cancel: function(){
    //用户取消分享后执行的回调函数
  }
}

wx.config({
  swapTitleInWX: true,
  appId: "<?php echo $weixin_package[&#39;appid&#39;];?>",
  timestamp: "<?php echo $weixin_package[&#39;timestamp&#39;];?>",
  nonceStr: "<?php echo $weixin_package[&#39;noncestr&#39;];?>",
  signature: "<?php echo $weixin_package[&#39;signature&#39;];?>",
  jsApiList: [
    &#39;onMenuShareTimeline&#39;,
    &#39;onMenuShareAppMessage&#39;,
    &#39;onMenuShareQQ&#39;,
    &#39;onMenuShareWeibo&#39;,
   ]
})

wx.ready(function () {
  wx.onMenuShareTimeline(data);
  wx.onMenuShareAppMessage(data);
  wx.onMenuShareQQ(data)
  wx.onMenuShareWeibo(data)
})

Notes:

1. title, it is recommended to be within 14 characters

2. Picture size: 300*300 pixels; picture format: size does not exceed 10kB, GIF is not supported Format; will take the first qualified picture in the body of the current page

3. Briefly interpret the title, it is recommended to be within 20 words

4. ## link:'', //Share link, change the link domain name or path must be consistent with the public account JS security domain name corresponding to the current page

2. QQ sharing

QQ The shared icon and title are identified through the tags in the head, involving itemprop, an attribute of h5 microdata,

<meta itemprop="name" content="标题"/>
<meta itemprop="description" name="description" content="描述"/>
<meta itemprop="image" content="缩列图地址"/>

Related recommendations:

WeChat public account custom sharing content Realize

WeChat public account authorization settings, WeChat public authorization

The above is the detailed content of The 'JS interface domain name' in the WeChat official account implements the sharing function. For more information, please follow other related articles on the PHP Chinese website!