实现H5页面微信分享功能

实现H5页面微信分享功能

一.通过微信打开的H5页面实现微信分享功能

1. 首先在公众号管理后台“公众号设置”的“功能设置”里填写JS接口安全域名，域名需要通过ICP备案，没有备案域名可以用SAE、BAE等平台。此外，自定义分享功能需要通过微信认证才能使用，没有认证的可以跟关系好的朋友借用权限，在他的JS接口安全域名设置这里填上你的域名和共享同一个开发者ID。
   
2. 在需要调用JS接口的页面引入微信JSSDK的JS文件：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js，这个文件在需要分享的页面是必须要引用的，单独特别重申一下，其他方面请阅读官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

// 官方是在title下边引入  我是在body下面直接引用的，没发现有什么问题
//也可以下载到本地
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

3. 接下来要配置config,我的是通过公司提供的js接口获取的信息，并且调用方法。

var title = '这里面写分享的名字';
var localUrl = encodeURIComponent(location.href.split("#")[0]);
var ajax = new XMLHttpRequwet();
ajax.open("get","公司接口url=" + location.href)
ajax.send();
ajax. onreadstatechange = function(){
   	if(ajax.readyState == 4 && ajax.status == 200) {
   	var {data} = JSON.parse(ajax.responseText)
   	vx.config({
   			debug:false, //测试环境为true 
   			appId:data.appId,
   			timestamp:data.timestamp,
   			nonceStr:data.nonceStr,
   			signature:data.signture,
   			jsApilist:['onMenuShareAppMessage',//需要调用的方法
                              'onMenuShareTimeline' 
                               ]
   				});
   				wx.ready(function() {

       var myurl = "http://diy-haier.highset.cn/index.jsp";
       //分享给朋友
       wx.onMenuShareAppMessage({
           title : title, // 分享标题
           desc : '海尔定制母婴家电，让你魔法加身，搞定养娃的大问题！', // 分享描述
           link : myurl, // 分享链接
           imgUrl : 'http://diy-haier.highset.cn/fx.jpg', // 分享图标,填写绝对路径
           type : 'link', // 分享类型,music、video或link，不填默认为link
           success : function() {
               // 用户确认分享后执行的回调函数
           },
           cancel : function() {
               // 用户取消分享后执行的回调函数
           }
       });
       // 分享到朋友圈
   	wx.onMenuShareTimeline({
           title : title, // 分享标题
           link : myurl, // 分享链接
           imgUrl : 'http://diy-haier.highset.cn/fx.jpg', // 分享图标
           success : function() {
               // 用户确认分享后执行的回调函数
           },
           cancel : function() {
               // 用户取消分享后执行的回调函数
           }
       });
   });
   wx.error(function(res) {
       alert(res.errMsg);
   });