HTML链接分享微信增加标题，描述，图标

孤傲的大师

已于 2023-11-01 10:34:48 修改

阅读量1.3k

点赞数

文章标签： html 微信前端

于 2023-08-16 09:42:58 首次发布

本文链接：https://blog.csdn.net/qq_33208323/article/details/132207171

版权

HTML链接分享微信增加标题，描述，图标

写在前面：
JS-SDK官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
本地测试需要申请测试公众号的appID和appsecret
申请地址：href=“https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login”

1：系统生产环境需要正式的appID和appsecret
2：并且域名需要在微信备案
3：且微信安全文件放置在站点根目录下

1：首先前台引入微信js

<head>
 	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>

2：编写js脚本，调用一般处理程序（ashx）获取所需字段

        $(function () { 
            getloaca();
        })
        function getloaca() {
            var JSAccessToken = localStorage.getItem("JSAccessToken");
            if (JSAccessToken == null || JSAccessToken == "") {
                $.ajax({
                    url: "/Ajax/CRM/H5Share.ashx",
                    data: { t: "getAccessGetJs", JSAccessToken: "" },
                    type: 'post',
                    async: false,
                    success: function (data) {
                        var JsonData = JSON.parse(data);
                        getjsApi(JsonData.access_token);
                        localStorage.setItem("JSAccessToken", JsonData.access_token);
                    },
                    error: function (msg) {
                        console.log(msg);
                    }
                })
            }
            else {
                getjsApi(JSAccessToken);
            }

        }

        function getjsApi(AccessToken) {
            var jsticket = localStorage.getItem("jsapi_ticket")
            if (jsticket == null || jsticket == "") {
                $.ajax({
                    url: "/Ajax/CRM/H5Share.ashx",
                    data: { t: "AccessGetJs", access_token: AccessToken, signurl: window.location.href.split('#')[0] },
                    type: 'post',
                    async: false,
                    success: function (aaa) {
                        if (typeof (data) == "object") {
                            if (data.errcode = 42001) {
                                localStorage.setItem("JSAccessToken", "");
                                localStorage.setItem("jsapi_ticket", "");
                                getloaca();
                            }
                        }
                        var JsonData = JSON.parse(aaa);
                        if (JsonData.errmsg == "ok") {
                            localStorage.setItem("jsapi_ticket", JsonData.jsapi_ticket);
                            SetUserLoad(JsonData);
                        }
                        else {
                            localStorage.setItem("JSAccessToken", "");
                            getloaca();
                        }
                    },
                    error: function (msg) {
                        localStorage.setItem("JSAccessToken", "");
                        getloaca();
                    }
                })
            }
            else {
                $.ajax({
                    url: "/Ajax/CRM/H5Share.ashx",
                    type: 'post',
                    data: { t: "AccessGetJs", access_token: AccessToken, signurl: window.location.href.split('#')[0], jsticket: jsticket },
                    async: false,
                    success: function (data) {
                        var JsonData = JSON.parse(data);
                        if (JsonData.errmsg == "ok") {
                            SetUserLoad(JsonData);
                        }
                        else {
                            localStorage.setItem("JSAccessToken", "");
                            localStorage.setItem("jsapi_ticket", "");
                            getloaca();
                        }
                    },
                    error: function (msg) {
                        getloaca();
                        console.log(msg);
                    }
                })
            }

        }
        function SetUserLoad(JsonData) {
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: JsonData.appId, // 必填，公众号的唯一标识
                timestamp: JsonData.timestamp, // 必填，生成签名的时间戳
                nonceStr: JsonData.noncestr, // 必填，生成签名的随机串
                signature: JsonData.signature,// 必填，签名，见附录1
                jsApiList: ['checkJsApi', 'openLocation', 'getLocation', 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            wx.ready(function () {
                getjsJW();
            });
            wx.error(function (res) {
                console.log(res);
                localStorage.setItem("JSAccessToken", "");
                localStorage.setItem("jsapi_ticket", "");
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            });

        }

3：后端代码，一般处理程序（ashx）


              public class AccessJs { public int errcode { get; set; } public string errmsg { get; set; } public string ticket { get; set; } public int expires_in { get; set; } }


        /// <summary>
        /// 得到调用微信接口的初始化参数
        /// </summary>
        /// <param name="access_token"></param>
        /// <returns></returns> 
        public void AccessGetJs()
        {

            string access_token = Request.Form["access_token"];
            string signurl = Request.Form["signurl"];
            string jsticket = Request.Form["jsticket"];
            AccessJs data = new AccessJs();
            if (string.IsNullOrWhiteSpace(jsticket))
            {
                string url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + access_token + "&type=jsapi";
                string response = HttpService.Get(url);
                data = WeChat.Common.JsonHelper.JSONToObject<AccessJs>(response);
            }
            else
            {
                data.errcode = 0; data.errmsg = "ok"; data.ticket = jsticket;
            }
            if (data.errmsg == "ok")
            {
                WxPayData model = new WxPayData();
                //调App接口参数

                string noncestr = WxPayApi.GenerateNonceStr();
                string timestamp = WxPayApi.GenerateTimeStamp();
                model.SetValue("jsapi_ticket", data.ticket);//jsapi 
                model.SetValue("noncestr", noncestr);//随机字符串 	
                model.SetValue("timestamp", timestamp);//时间戳	        
                model.SetValue("url", signurl);//url
                String string1 = "jsapi_ticket=" + data.ticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url=" + signurl;
                //6、将字符串进行sha1加密  
                //String signature = SHA1(string1);  
                string signature = Sha1Sign(string1);
                model.SetValue("signature", signature);//签名
                model.SetValue("appId", WxPayConfig.WebAppsAppID);//appId
                model.SetValue("errmsg", "ok");//返回值
                model.SetValue("errurl", string1);//返回值 
                Response.Write(model.ToJson().Replace("\\", ""));
            }
            else
            {
                Response.Write(JsonConvert.SerializeObject(data));
            }
        }

        /// <summary>
        /// 调用微信接口获取access_token
        /// </summary>
        /// <param name="access_token"></param>
        /// <returns></returns>
        public void getAccessGetJs()
        {
            string JSAccessToken = Request.Form["JSAccessToken"];
            string url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + WxPayConfig.WebAppsAppID + "&secret=" + WxPayConfig.WebAppsAppSecret;
            //string url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx962ac84d0d14666d&secret=1ee7e5af8b409452d1cbc00aa7a3d340";
            string response = HttpService.Get(url);
            HttpContext.Current.Response.Write(response);
        }
  
        private static string Sha1Sign(string str, Encoding encoding = null)
        {
            if (encoding == null) encoding = Encoding.UTF8;
            var buffer = encoding.GetBytes(str);
            var data = SHA1.Create().ComputeHash(buffer);
            StringBuilder sub = new StringBuilder();
            foreach (var t in data)
            {
                sub.Append(t.ToString("x2"));
            }
            return sub.ToString();
        }