微信接口之H5分享功能

最近忙了好久，也好久没有写点什么，总算抽出点时间可以来csdn看看。顺便把微信分享的功能写一点心得。

微信H5分享就是我们写的一个H5页面，可以是html、亦可以是其他动态类型的页面，对于我来说微信分享不是第一次做了，之前以为只可以在非html页面中加，后来仔细一想那我们的ajax干嘛去啦。

下面我就具体说一下静态页面和非静态页面怎么实现微信还H5分享。

非静态：这个好说了，我们只需要在当前页面的onload中获取Token和ticket，把微信分享接口需要的签名apikey什么的做一个全局变量取到值然后在页面前端调用就好了。一开始感觉这种方法确实方便，但是这种方法如果你有一个页面分享你需要写一遍，有几个页面就需要写几遍。

静态：个人建议不论是什么样子的页面都按照静态方式调取微信接口，拓展性比较好。

首先引用微信JS <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>，这个js版本一直在更新。

        var appId;微信公众号appid
        var timestamp;时间戳自己生成
        var nonceStr;随机字符串自己定义
        var signature;签名自己生成（重要）

这四个是我们调用微信js需要的参数，上面除了签名之外其他都好说，最重要是这个签名的生成：

public void signature(string currurl)
        {
            appid = vhcar.Appid;
            noncestr = "123456";
            timestamp = GenerateTimeStamp(DateTime.Now);
            StringBuilder sb = new StringBuilder();
            sb.AppendFormat("jsapi_ticket={0}&noncestr={1}&timestamp={2}&url={3}", vhcar.Jsapi_ticket, noncestr, timestamp, currurl);
            //SHA1签名千万不要弄错
            sign = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(sb.ToString(), "SHA1");
        }

生成签名的这个规则不要弄错，另外拼接的stringbuilder参数

1.access_token,这里需要注意，微信有两个token，一个是access_token，一个是token，我们这里需要的是access_token

2.ticket,这个是根据上面的access_token来获取的，所以如果accesstoken获取有问题的话这个就绝对有问题。

3.currurl，当前页面的链接地址，注意一定是当前页面在外网的链接地址。而且是完整的地址，就是你在微信打开你需要分享的页面复制链接后看到的地址是什么，这里就必须是什么。否则会一直提示签名出错。这里我的currurl是用js获取当前页面的链接传过来。可以用于参考。

获取token：

private void GetToken()
        {
            try
            {
                //获取access_token
                string url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + vhcar.Appid + "&secret=" + vhcar.Appsecret;
                System.Net.HttpWebRequest myReq = (HttpWebRequest)WebRequest.Create(url);
                //myReq.Method = "POST";
                HttpWebResponse myResp = (HttpWebResponse)myReq.GetResponse();
                StreamReader myStream = new StreamReader(myResp.GetResponseStream(), enc);
                string ret = myStream.ReadToEnd();
                //ret = str.Trim();
                string access_token = ret.Substring(ret.IndexOf("access_token\":\"") + 15, ret.IndexOf("\",\"") - ret.IndexOf("access_token\":\"") - 15);
                vhcar.Token = access_token;
                vhcar.Time = DateTime.Now;
            }
            catch (Exception)
            {
                vhcar.Token = null;
            }
        }

 private void GetTicket()
        {
            try
            {
                //获取access_token
                string url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + vhcar.Token + "&type=jsapi";
                System.Net.HttpWebRequest myReq = (HttpWebRequest)WebRequest.Create(url);
                //myReq.Method = "POST";
                HttpWebResponse myResp = (HttpWebResponse)myReq.GetResponse();
                StreamReader myStream = new StreamReader(myResp.GetResponseStream(), enc);
                string ret = myStream.ReadToEnd();
                //ret = str.Trim();
                string jsapi_ticket = ret.Substring(ret.IndexOf("ticket\":\"") + 9, ret.LastIndexOf("\",\"") - ret.IndexOf("ticket\":\"") - 9);
                vhcar.Jsapi_ticket = jsapi_ticket;
                vhcar.J_time = DateTime.Now;
            }
            catch (Exception)
            {
                vhcar.Token = null;
                vhcar.Jsapi_ticket = null;
            }
        }

获取时间戳：

 public string GenerateTimeStamp(DateTime dt)
        {
            // Default implementation of UNIX time of the current UTC time  
            TimeSpan ts = dt.ToUniversalTime() - new DateTime(1970, 1, 1, 0, 0, 0, 0);
            return Convert.ToInt64(ts.TotalSeconds).ToString();
        }

下面是js部分，主要是获取后台的几个参数，然后调用微信的几个js接口方法即可。

var test = window.location.href;

$.ajax({
                type: "POST",
                url: "/DoVChar/GetVCharAbout",
                data: { "uid": +uid, "currurl": test },
                success: function (msg) {
                    var arr = new Array();
                    arr = msg.split(',');
                    appId = arr[0];
                    timestamp = arr[1];
                    nonceStr = arr[2];
                    signature = arr[3];
                    

                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: appId, // 必填，公众号的唯一标识
                        timestamp: timestamp, // 必填，生成签名的时间戳
                        nonceStr: nonceStr, // 必填，生成签名的随机串
                        signature: signature, // 必填，签名，见附录1
                        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'hideAllNonBaseMenuItem', 'showMenuItems', 'closeWindow'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    });
                    wx.ready(function () {
                        //wx.hideAllNonBaseMenuItem();
                        wx.showMenuItems({
                            menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline'] // 要显示的菜单项，所有menu项见附录3
                        });
                        //分享到朋友圈
                        wx.onMenuShareTimeline({
                            title: '$20在线中文课，免费体验！', // 分享标题

                            link: 'https://www.koalaknow.com/VCharClassic.html?uid='+uid, // 分享链接
                            imgUrl: 'https://www.koalaknow.com/img/VcharImg/vcharlogo.png', // 分享图标

                            success: function () {
                                // 用户确认分享后执行的回调函数
                            },
                            cancel: function () {
                                // 用户取消分享后执行的回调函数
                            }
                        });
                        //分享给朋友
                        wx.onMenuShareAppMessage({
                            title: '$20在线中文课，免费体验！', // 分享标题
                            desc: '专业老师，专属课程，爱上“动起来”的中文', // 分享描述

                            link: 'https://www.koalaknow.com/VCharClassic.html?uid='+uid, // 分享链接

                            imgUrl: 'https://www.koalaknow.com/img/VcharImg/vcharlogo.png', // 分享图标

                            type: '', // 分享类型,music、video或link，不填默认为link
                            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                            success: function () {
                                // 用户确认分享后执行的回调函数
                            },
                            cancel: function () {
                                // 用户取消分享后执行的回调函数
                            }
                        });
                        wx.error(function (res) {
                            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                        });
                    });

                }
            })
        })