英特网校

微信公众号开发自定义内容分享开发

在这篇微信公众平台开发教程中,我H5经常会做一些从APP或其他地方分享出来的页面,在微信及QQ中会进行二次分享,需要自己定义分享的名字和图片; 微信的分享再分享在微信公众号文档中有相关说明:微信JS-SDK说明文档

注意本教程需要在真实域名和真实服务器中测试,并且需要在手机中用微信打开测试此功能!

本文需要先配置微信相关数据:【本教程使用的是微信公众平台接口测试帐号】最终测试效果

1.申请微信公众号测试账号

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

点击然后用自己的微信账号扫下登录!登录后获取appid和appsecret

1.png

2.修改JS接口安全域名【修改实际的域名】

2.jpg

3.用手机关注测试号公众号

3.jpg

4、修改网页授权微信用户基本信息【页面授权域名与真实页面一致】

4.png

5.png

5.下载官方demo

http://demo.open.weixin.qq.com/jssdk/sample.zip【demo为4个文件,每个文件都不能删除,需要修改的文件为sample.php文件】

(1)、修改js的地址官方script地址为http://res.wx.qq.com/open/js/jweixin-1.0.0.js,共享地址需要jweixin-1.1.0.js及以上版本才能调用

(2)、修改文档中的配置信息

(3)、添加js脚本,在配置中的jsApiList中添加onMenuShareTimeline、

onMenuShareAppMessage、onMenuShareQQ、onMenuShareQZone【最新版updateAppMessageShareData、updateTimelineShareData测试暂无效果】

,同时在按钮点击事件中添加对应事件!

<script>
 
wx.config({
   
debug: false,
   
appId: '<?php echo $signPackage["appId"];?>',
   
timestamp: '<?php echo $signPackage["timestamp"];?>',
   
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
   
signature: '<?php echo $signPackage["signature"];?>',
   
jsApiList: [
       
"hideMenuItems",
       
"onMenuShareAppMessage",
       
"onMenuShareQQ",
       
"onMenuShareQZone",
       
"onMenuShareTimeline",
   
]
  })
;
 
//注意由于微信官方升级,没有办法对返回值进行判断,导致分享取消同样会调用成功的回调。
 
//官方:https://open.weixin.qq.com/cgi-bin/announce?spm=a311a.9588098.0.0&action=getannouncement&key=11534138374cE6li&version=
  //
所以分享失败也是提示分享成功。
 
wx.ready(function () {
      wx.hideMenuItems({
        
menuList: ["menuItem:favorite"]//隐藏菜单功能,部分基础类的菜单不能隐藏
     
});
     
//分享到微信朋友
     
wx.onMenuShareAppMessage({
         
title: '英特网络',
         
desc: '在线教育平台',
          
link: 'http://www.intewl.com', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
         
imgUrl: 'http://www.intewl.com/public/static/uploads/about/20181104/f74019cedd2967796355dac82a2fc771.png', // 分享图标
         
success: function () {
           
// 用户点击了分享后执行的回调函数
             
alert("微信分享成功");
         
}
      })
;
     
//分享到微信朋友圈
     
wx.onMenuShareTimeline({
         
title: '英特网络', //
         
link: window.location.href, //
         
imgUrl: 'http://www.intewl.com/public/static/uploads/about/20181104/f74019cedd2967796355dac82a2fc771.png', // 分享图标
         
success: function () {
             
alert("分享朋友圈")
          }
      })
;
     
//分享到QQ好友
     
wx.onMenuShareQQ({
         
title: '英特网络', // 分享标题
         
desc: '在线教育平台', // 分享描述
          
link: 'http://www.intewl.com', // 分享链接
         
imgUrl: 'http://www.intewl.com/public/static/uploads/about/20181104/f74019cedd2967796355dac82a2fc771.png', // 分享图标
         
success: function () {
             
alert("QQ分享成功");
         
}
      })
     
//分享到QQ空间
     
wx.onMenuShareQZone({
         
title: '英特网络', // 分享标题
         
desc: '在线教育平台', // 分享描述
         
link: 'http://www.intewl.com', // 分享链接
         
imgUrl: 'http://www.intewl.com/public/static/uploads/about/20181104/f74019cedd2967796355dac82a2fc771.png', // 分享图标
         
success: function () {
            
alert('分享QQ空间成功');
         
}
      })
;

});
</script>

 

评论中心

登录后可评论,请 登录 注册