微信端分享、手机QQ好友分享

2018-9-9    分类: 前端资源

微信为我们提供了从微信分享到到朋友圈、微信好友、qq好友、qq空间时,所显示不同的分享文案。(接口是收费的)

 

效果:用户用微信扫码显示的h5页面,点击右上角就会弹出底部框。如果是app嵌套h5页面分享功能的话,让app开发人员提供调用唤起分享弹出窗口的代码,也有微信朋友分享和微信朋友圈分享。

 

设置域名

微信公众平台进入---“公众号设置”----“功能设置”---“JS接口安全域名”

 

 

微信分享H5

官方文档地址为:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

找到已有公众号的appid,根据这个appid和url向后端发起请求,拿到配置所需要的参数:timestamp、noncestr和signature。

添加

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>

var wxTitle = '标题'; 
var wxDesc = "摘要"; 
var wxLogo = "http://xx/1.png"  //缩略图 
var wxLink = "http://xx.com/";  //分享点击要跳转的页面 

//配置信息 
wx.config({ 
"debug":false, 
"beta":true, 
"appId":"wx48d79203b4f0c482", 
"nonceStr":"rand_5b94f14f204b0", 
"timestamp":1536487759, 
"url":"https:\/\/m.weiclicai.com\/activity\/third-yearend-act\/thirdbill", 
"signature":"4e3c1ff25ee8daa742322278aaaeaf1af91f3d5c", 
"jsApiList":[
 "hideMenuItems",
 "onMenuShareAppMessage",
 "onMenuShareTimeline",
 "onMenuShareQQ"] 
});


wx.ready(function () {
  wx.hideMenuItems({
    menuList: [ //限制分享到到的平台
     "menuItem:share:weiboApp",
     "menuItem:share:facebook",
     "menuItem:share:QZone",
     "menuItem:originPage",
     "menuItem:readMode",
     "menuItem:openWithQQBrowser",
     "menuItem:openWithSafari",
     "menuItem:share:email"
   ]
  });

  wx.onMenuShareTimeline({
    title: wxDesc,
    desc: wxDesc,
    link: wxLink,
    imgUrl: wxLogo,
    success: function () {
     //分享微信朋友圈
 
    },
    cancel: function () {

    }
  });

  wx.onMenuShareAppMessage({
    title: wxTitle,
    desc: wxDesc,
    link: wxLink,
    imgUrl: wxLogo,
    success: function () {
    //分享微信朋友
 
    },
    cancel: function () {

    }
  });

  wx.onMenuShareQQ({
    title: wxTitle,
    desc: wxDesc,
    link: wxLink,
    imgUrl:wxLogo,
    success: function () {
    //分享qq朋友
 
    },
    cancel: function () {

    }
  });
});

https://segmentfault.com/a/1190000016199418

 

 

QQ分享好友 (免费)

qq手机 好友之间的分享,点击右上角,去分享

 <script type="text/javascript" src="https://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js"></script>
 <script type="text/javascript">
 var title = "维C物权3周年红包,手慢无";
 var summary = "我在维C物权的收益超过0%用户,赶紧来较量一下吧~";
 var sharepic = 'https://dn-weiclicai.qbox.me/5b725146ce0af.png'; //这里要写当前域名的图片
 var shareurl = "https://m.weiclicai.com/activity/third-yearend-act/thirdbill";//这里要写当前域名的图片
 
 setShareInfo({
   title: title,
   summary: summary,
   pic: sharepic,
   url: shareurl
 });
 </script>

 

https://www.cnblogs.com/joshua317/p/4761948.html

 

 

jweixin-1.4.0.js的使用方法:

踩坑:根据微信官方文档,onMeneShareTimeline、onMenuShareAppMessage、onMenuShareQQ、onMenuShareQZone接口即将废弃。建议使用1.4.0版本之后的分享接口:updateAppMessageShareData、updateTimelineShareData、onMenuShareWeibo。但是在config的jsApiList列表中,在加上1.4.0的接口名称时,一定要将对应的老版本的接口名称加上,否则新的接口不起作用。

https://res.wx.qq.com/open/js/jweixin-1.4.0.js

wx.config({
   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
   appId: '{$data.appId}', // 必填,公众号的唯一标识
   timestamp: '{$data.timeStamp}', // 必填,生成签名的时间戳
   nonceStr: '{$data.nonceStr}', // 必填,生成签名的随机串
   signature: '{$data.signature}',// 必填,签名
   jsApiList: [
    'checkJsApi',//检测接口权限
    'updateTimelineShareData',//1.4.0的分享接口,注意:使用新版本的分享功能,一定要在该列表加上对应的老版本功能接口,否则新接口不起作用
    'updateAppMessageShareData',//1.4.0的分享接口,注意:使用新版本的分享功能,一定要在该列表加上对应的老版本功能接口,否则新接口不起作用
    'onMenuShareAppMessage',//老版本分享接口。
    'onMenuShareTimeline'//老版本分享接口。
   ] // 必填,需要使用的JS接口列表
});

wx.checkJsApi({
  jsApiList: [ 'updateTimelineShareData',
   'updateAppMessageShareData',
   'onMenuShareAppMessage',
   'onMenuShareTimeline'
  ], // 需要检测的JS接口列表,所有JS接口列表见附录2,
  success: function(res) {
    // 以键值对的形式返回,可用的api值true,不可用为false
    // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    alert(JSON.stringify(res));
  },
  error:function(res){
    alert(res);
  }

});


//分享功能
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
  var shareData = {
   title: '分享标题', // 分享标题
   desc: '分享描述', // 分享描述
   link: 'http://www.baidu.com', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
   imgUrl: 'http://www.baidu.com/static/addHtml/images/iterationTheme/common/logo_new.png', // 分享图标
   success: function (res) {
     // 设置成功
   },
   error:function(res){
   }
  };
  //自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
  wx.updateAppMessageShareData(shareData);
  //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
  wx.updateTimelineShareData(shareData);

  *在实际开发中1.4.0仍然能使用老的那些方法
});

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

https://blog.csdn.net/u012274155/article/details/90716828

 

app分享内置的H5

需要app的开发人员提供,h5能调用app的分享接口,如

 

点击分享给微信好友 ,貌似可以是小程序或者是H5,(新浪微博分享给微信好友的卡片是小程序卡片)

至于分享出去的标题和图标,让app开发自己去定义

//我公司的部分代码
if (dev.isIosApp()) {
  window.webkit.messageHandlers.nativeJsBridge.postMessage({
     name: 'app.ComponentShareMethod',
     shareData: {...}
  });
} else if (dev.isAndApp()) {} {
  window.nativeJsBridge && window.nativeJsBridge.nativeShare(JSON.stringify({...}));
}

 

 

小程序分享内置H5

最新 jweixin.js:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

 

需要去微信公众平台设置:

要让小程序 嵌套h5页面需要 设置 业务域名,但业务域名不支持个人开发,需要公司帐号
设置路径在 开发>开发设置

https://www.cnblogs.com/imgss/p/8504185.html

 

(1)h5向小程序传数据

*注意bindmessage触发条件是:小程序后退、组件销毁、分享
小程序:
<web-view src="https://mp.weixin.qq.com/" bindmessage="msgHandler"></web-view>

Page({
  ...
  msgHandler(e){
    console.log(e.detail.data) //我是网页,获取到来自也页面的数据
  }
})

 

html页面:

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

<script>
  wx.miniProgram.navigateTo({ //跳转
   url: xcxUrl,
  })

  wx.miniProgram.postMessage({ data: {msg: '我是网页' }})//第一层应该是data,不能写成,wx.miniProgram.postMessage({msg: '我是网页' }) //错误写法
</script>

 

(2)小程序向h5页面发送数据,主要以url带参数形式传

//wxml
<web-view src="{{url}}"></web-view>

//js
Page({
 data:{
 url: ''
}
...
onLoad(options){
 let phone = options.phone;//获取到小程序其他页面传来的电话号码;
 let url = `http://localhost?phone=${phone}`;
   this.setData({url : url})
 }
})

如果发现 url带参数时,传给web-view,参数是被过滤掉的,就使用如下方法:
encodeURIComponent('http://www.baidu.com?wd=1') // "http%3A%2F%2Fwww.baidu.com%3Fwd%3D1"