微信H5页面里面可以做一个按钮直接分享到朋友圈吗

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信H5页面里面可以做一个按钮直接分享到朋友圈吗相关的知识,希望对你有一定的参考价值。

这个的话,微信已经不支持了。是否分享H5是用户的一个权限,对于用户分享这个事情是他的个人行为,我们不能去过分的干预,这样的话会涉及到一个诱导分享和强制分享的问题。
现在的话,唯一的做法就是在H5里加一个分享按钮,但是这个分享按钮的目的不是说让用户一键分享朋友圈,而是提示他您可以去分享这个H5,做一个提示作用,然后用户根据提示可以在H5页面的右上角,一般正常是有三个点,那么我们可以做一个提示,去指向这三个点,最后点开以后有真正的微信分享按钮,用户再去选择要不要分享。
参考技术A 可以的

分享到微信朋友圈页面

C#

1.获取签名

public class WeiXinJsSignature
    {
        /// <summary>
        /// 构造函数
        /// </summary>
        public WeiXinJsSignature()
        {
            string url = ConfigurationManager.AppSettings["UrlAddress"] + "/Home/Index";//分享的页面地址
            Timestamp = GetTimeStamp();
            Noncestr = Guid.NewGuid().ToString().Replace("-", "");
            string jsapiTicket = GetTicket();
            string sourceStr = string.Format("jsapi_ticket={0}&noncestr={1}&timestamp={2}&url={3}", jsapiTicket, Noncestr, Timestamp, url);
            Signature = GetSHA1(sourceStr);
        }
        /// <summary>
        /// 公众号的唯一标识
        /// </summary>
        public string AppId { get; set; }
        /// <summary>
        /// 生成签名的时间戳
        /// </summary>
        public string Timestamp { get; set; }
        /// <summary>
        /// 生成签名的随机串
        /// </summary>
        public string Noncestr { get; set; }
        /// <summary>
        /// 签名
        /// </summary>
        public string Signature { get; set; }

        /// <summary>
        /// 获取JsApiTicket
        /// </summary>
        /// <returns></returns>
        public string GetTicket()
        {
            string ticket = string.Empty;
            try
            {
                string JsApiTicketUrl = System.Configuration.ConfigurationManager.AppSettings["JsApiTicket"];
                HttpWebRequest request = (HttpWebRequest)WebRequest.Create(JsApiTicketUrl);
                request.Method = "GET";

                HttpWebResponse response = (HttpWebResponse)request.GetResponse();
                string JsApiTicketString = string.Empty;
                using (StreamReader reader = new StreamReader(response.GetResponseStream()))
                {
                    JsApiTicketString = reader.ReadToEnd();
                    LogWriter.ToTrace(string.Format("获取JSAPITicke 结果:{0}", JsApiTicketString));
                }
                var jsApiTicketObj = new { Code = "", ErrorMessage = "", AppId = "", JsApiTicket = "" };

                var ticketObj = JsonConvert.DeserializeAnonymousType(JsApiTicketString, jsApiTicketObj);
                ticket = ticketObj.JsApiTicket;
                AppId = ticketObj.AppId;

                LogWriter.ToTrace(string.Format("获取JsApiTicket成功:{0} Appid:{1}", ticket, AppId));
            }
            catch (Exception ex)
            {
                LogWriter.ToError(string.Format("获取JsApiTicket失败:{0}", ex.ToString()));
            }
            return ticket;
        }
        /// <summary>
        /// 获取当前时间戳
        /// </summary>
        /// <returns></returns>
        private string GetTimeStamp()
        {
            DateTime startTime = TimeZone.CurrentTimeZone.ToLocalTime(new System.DateTime(1970, 1, 1));
            return ((int)(DateTime.Now - startTime).TotalSeconds).ToString();
        }
        /// <summary>
        /// SHA1加密
        /// </summary>
        /// <param name="source"></param>
        /// <returns></returns>
        private string GetSHA1(string source)
        {
            string rethash = "";
            try
            {

                System.Security.Cryptography.SHA1 hash = System.Security.Cryptography.SHA1.Create();
                System.Text.ASCIIEncoding encoder = new System.Text.ASCIIEncoding();
                byte[] combined = encoder.GetBytes(source);
                hash.ComputeHash(combined);

                var sb = new StringBuilder();
                foreach (var t in hash.Hash)
                {
                    sb.Append(t.ToString("x2"));
                }

                rethash = sb.ToString();
                //rethash = Convert.ToBase64String(hash.Hash);
            }
            catch (Exception ex)
            {
                LogWriter.ToError("加密失败 : " + ex.Message);
            }
            return rethash;
        }
    }

  

2.配置

appsettings配置
<add key="JsApiTicket" value="http://IP:port/api/JsApiTicket" />
<add key="UrlAddress" value="http://localhost:5876" />  这个是部署的分享页面服务的地址

3.返回给前端签名

 

private WeiXinJsSignature GetSignature()
        {
            WeiXinJsSignature WXJsSign = new WeiXinJsSignature();
            return WXJsSign;
        }
ViewData["WeiXinJsSignature"] = JsonConvert.SerializeObject(GetSignature());

  

 

html

html
<input type="hidden" id="WeiXinJsSignature" value="@ViewData["WeiXinJsSignature"]" />

js
引入<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
WeiXinJsMng: {
  WeiXinJsSignature: {},
  init: function () {
    var WeiXinJsSignature = $("#WeiXinJsSignature").val();
    blogMng.WeiXinJsMng.WeiXinJsSignature = JSON.parse(WeiXinJsSignature);
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
      appId: blogMng.WeiXinJsMng.WeiXinJsSignature.AppId, // 必填,公众号的唯一标识
      timestamp: blogMng.WeiXinJsMng.WeiXinJsSignature.Timestamp, // 必填,生成签名的时间戳
      nonceStr: blogMng.WeiXinJsMng.WeiXinJsSignature.Noncestr, // 必填,生成签名的随机串
      signature: blogMng.WeiXinJsMng.WeiXinJsSignature.Signature,// 必填,签名,见附录1
      jsApiList: ["previewImage"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    });
  }
}
WeiXinJsMng.init();

这个是点击查看大图的js代码:你可以了解一下
imgPreview: function () {
  var imgs = $("#BlogImgList").children("img");
  var srcList = [];
  $.each(imgs, function (i, item) {
    if ($(item).attr("originalsrc").length > 0) {
      srcList.push($(item).attr("originalsrc"));
      $(item).click(function (e) {
        // 通过这个API就能直接调起微信客户端的图片播放组件了
        wx.previewImage({
          current: $(this).attr("originalsrc"), // 当前显示图片的http链接
          urls: srcList // 需要预览的图片http链接列表
        });
      });
    }
  });
}

  

  

以上是关于微信H5页面里面可以做一个按钮直接分享到朋友圈吗的主要内容,如果未能解决你的问题,请参考以下文章

h5分享微信小程序到朋友圈

关于JS交互--调用h5页面,点击页面的按钮,分享到微信朋友圈,好友

h5页面微博里面打开 怎样做分享到微信的功能

h5怎么做分享到QQ 朋友圈微信 微博等功能

微信H5隐藏分享给朋友、分享到朋友圈按钮

在微信中得H5页面上做一个按钮,点击按钮直接保存图片,这样能实现么?有啥方式呢?