微信端分享、手机QQ好友分享以及小程序和H5数据交互

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

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

设置域名

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

不要带http://

微信分享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”

——————-node.js后端—签名————————

AppID和AppSecret可在“微信公众平台-开发-基本配置”页中获得（需要已经成为开发者，且帐号没有异常状态）。
**调用接口时，请登录“微信公众平台-开发-基本配置”提前将服务器IP地址添加到IP白名单中，点击查看设置方法，否则将无法调用成功。
**小程序无需配置IP白名单。
1，用AppID和AppSecret获取access_token

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

2，用access_token获取jsapi_ticket票据

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

3，用jsapi_ticket票据获取signature签名

var args={
 noncestr=Wm3WZYTPz0wzccnW //Math.random().toString(36).substr(2,15)
 jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
 timestamp=1414587457 //parseInt(new Date().getTime() / 1000) + ''
 url=http://mp.weixin.qq.com?params=value
}

function raw(args){
 let keys = Object.keys(args).sort();
 let obj = {};
 keys.forEach((key)=>{
   obj[key] = args[key];
 })
 // {a:1,b:2} => &a=1&b=2
 // 将对象转换为&分割的参数
 let val = '';
 for(let k in obj){
   val += '&' + k + '=' +obj[k];
 }
 return val.substr(1);
}

let string = util.raw(params);
let sign = createHash('sha1').update(string).digest('hex'); //得到的就是signature (要安装create-hash@1.2.0包)

4，用signature就能在H5里面调用起微信自带的功能了，例如分享和支付等等

wx.config({
 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
 appId: '{$data.appId}', // 必填，公众号的唯一标识
 timestamp: '{$data.timeStamp}', // 必填，生成签名的时间戳
 nonceStr: '{$data.nonceStr}', // 必填，生成签名的随机串
 signature: '{$data.signature}',// 必填，签名,上面的步骤就为了得到这个字段
 jsApiList: [
   ...
 ] // 必填，需要使用的JS接口列表
});