H5如何分享到朋友圈带图片？（后端C#）

前提：

有微信公众号，在微信公众号下面设置JS接口安全域名，

然后 html 文件放在安全域名对应网站下面。 

---

后端C#：

说明：

1、WxObjType 只是一个枚举而已，因为可能有多个公众号；

2、token 这一步的获取比较简单，请自行查阅相关资料。 token 需要缓存，做中心化共享处理，不要每次调用都新产生一个。

3、jsapi_ticket 其实也有限制，需要缓存，为了代码清晰就不处理了。

如果调用有问题，可以尝试使用：

微信 JS 接口签名校验工具

但以下代码已经实际用过，基本上是没有什么问题的了。

using Newtonsoft.Json;
using NLog;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Security.Cryptography;
using System.Text;

namespace Util.MgHelper
{
    /// <summary>
    /// 公众号帮助类
    /// </summary>
    public class GzhHelper
    {
        static Logger logger = LogManager.GetCurrentClassLogger();

        /// <summary>
        /// 获取微信分享的配置信息
        /// </summary>
        /// <param name="wxObjType"></param>
        /// <param name="url"></param>
        /// <returns></returns>
        public static WxGzhShareConfig GetH5ShareChatConfig(WxObjType wxObjType, string url)
        {
            WxObj wxObj = MgConfig.GetWxObj(wxObjType);
            string token = MgHelper.MgUtil.MiniprogramAuth.GetAccessTokeByWxObjType(wxObjType).access_token;
            string jsApiTicket = GetJsApiTicket(token);
            string timestamp = GetTimestamp();
            string nonceStr = GetNonceStr();
            string signature = GenerateSignature(jsApiTicket, nonceStr, timestamp, url);
            var r = new WxGzhShareConfig
            {
                appId = wxObj.AppId,
                timestamp = timestamp,
                nonceStr = nonceStr,
                signature = signature
            };
            return r;
        }

        public static string GetJsApiTicket(string accessToken)
        {
            string url = $"https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={accessToken}&type=jsapi";
            logger.Info("GetJsApiTicket url=>{0}", url);
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
            request.Method = "GET";
            request.ContentType = "application/json";
            try
            {
                using (HttpWebResponse response = (HttpWebResponse)request.GetResponse())
                {
                    using (Stream stream = response.GetResponseStream())
                    {
                        using (StreamReader reader = new StreamReader(stream))
                        {
                            string result = reader.ReadToEnd();
                            var r = JsonHelpers.FromJson<Jsapi_ticket>(result);
                            return r.ticket;
                        }
                    }
                }
            }
            catch (WebException ex)
            {
                // 处理异常
                Console.WriteLine(ex.Message);
                return null;
            }
        }


        // 生成随机字符串
        private static string GetNonceStr()
        {
            const string chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
            var random = new Random();
            var nonceStr = new string(Enumerable.Repeat(chars, 16)
              .Select(s => s[random.Next(s.Length)]).ToArray());

            return nonceStr;
        }

        // 生成当前时间戳
        private static string GetTimestamp()
        {
            long timestamp = (DateTime.Now.ToUniversalTime().Ticks - 621355968000000000) / 10000000;
            return timestamp.ToString();
        }

        // 生成签名
        private static string GenerateSignature(string token, string nonceStr, string timestamp, string url)
        {
            var stringToSign = $"jsapi_ticket={token}&noncestr={nonceStr}&timestamp={timestamp}&url={url}";
            logger.Info("GenerateSignature . stringToSign=>{0}", stringToSign);
            var sha1 = SHA1.Create();
            var bytes = Encoding.UTF8.GetBytes(stringToSign);
            var hashBytes = sha1.ComputeHash(bytes);
            var signature = BitConverter.ToString(hashBytes).Replace("-", "").ToLower();

            return signature;
        }
    }//end of class

    public class WxGzhShareConfig
    {
        public string appId { get; set; }

        public string timestamp { get; set; }

        public string nonceStr { get; set; }

        public string signature { get; set; }
    }
}//end of namespace

前端html加上：

1、查询很多资料，都是说需要post，但实际我用 get 也成功了。

2、一般写的是 location.href.split('#')[0]，如果有问题请按这个；

3、输出请在电脑浏览器完成，按F12查看 Console 和 Network 是否有正常输出。

4、wx.config 在未完成时，建议设置为 debug: true，这样有错误才能输出。

注：要为h5新生成一个二维码，扫码后再分享 ，要不然没有效果。

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
	$(function() {
		var currUrl = location.href;
		console.log(currUrl);
		var para ={
		  "Value": currUrl
		};
		console.log(para);
		//创建分享
        function funcShare() {
            $.ajax({
                async: false,
				method: "GET",
                url: "https://xxx.xxx.com/api/v1/wx/h5Share?url="+currUrl,
                data: null,
				dataType: 'json',
				success: function(res) {
                    var json = res.result;
                    console.log(json);
                    var jsApiList = ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ",
                        "onMenuShareWeibo", "onMenuShareQZone"
                    ];
                    wx.config({
                        debug: false,     //为true时分享到微信能alert出分享结果
                        appId: json.appId,
                        timestamp: json.timestamp,
                        nonceStr: json.nonceStr,
                        signature: json.signature,
                        jsApiList: jsApiList
                    });
                }
            });
        }
        //签名完成
        wx.ready(function() {
            // console.log("验证完成！！！");
            //分享的头部标题
            var title = "测试标题";
            //分享的内容
            var desc = `内容，微信分享给朋友在标题下方`;
            var link = location.href;
            //分享要显示的右下角小图片
            var imgUrl = "https://xx.com/Img/fw_icon.jpg";

            //朋友圈
            wx.onMenuShareTimeline({
                title: title,
                link: link,
                imgUrl: imgUrl
            });

            //朋友
            wx.onMenuShareAppMessage({
                title: title,
                desc: desc,
                link: link,
                imgUrl: imgUrl
            });

            //QQ
            wx.onMenuShareQQ({
                title: title,
                desc: desc,
                link: link,
                imgUrl: imgUrl
            });

            //微博
            wx.onMenuShareWeibo({
                title: title,
                desc: desc,
                link: link,
                imgUrl: imgUrl
            });

            //QQ空间
            wx.onMenuShareQZone({
                title: title,
                desc: desc,
                link: link,
                imgUrl: imgUrl
            });

        });

        funcShare();
    })
</script>