微信公众号 - 网页服务

需要有一个认证的微信公众号，订阅号、服务号都可以，主体不能是”个人“
需要有一个域名，域名不能含有中文，域名需要备案

一、公众号与域名绑定

二、 IP白名单

三、准备工作

3.1 引入JS文件

四、后端(.net)生成需要的参数

4.1 获取accessToken

4.2 获取jsapi_ticket

4.3 生成其他参数

4.4 验证签名工具

五、前端配置

5.1 基本配置

5.2 分享到朋友圈

5.3 分享给朋友

5.4 分享到QQ

5.5 分享到腾讯微博

5.6 分享到QQ空间

六、测试环境

一、公众号与域名绑定

微信公众平台链接：https://mp.weixin.qq.com/
登录到公众号，找到设置 => 公众号设置 => 功能设置 => JS接口安全域名
将txt下载下来，放到域名目录，将域名填入

二、 IP白名单

登录到公众号，找到开发 => 基本配置 => IP白名单，将本地的IP和服务器的IP一起加上

三、准备工作

官方文档：https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS%E6%8E%A5%E5%8F%A3

3.1 引入JS文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

根据需求引用http或https的文件

四、后端(.net)生成需要的参数

微信错误码查看：https://blog.csdn.net/qq_31267183/article/details/83211972

<script>
wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，企业号的唯一标识，此处填写企业号corpidtimestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名，见附录1jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
</script>

4.1 获取accessToken

/// <summary>
/// 获取access_token
/// </summary>
/// <returns></returns>
public static AccessTokenViewModel GetToken()
{var url = "https://api.weixin.qq.com/cgi-bin/token";Dictionary<string, string> dict = new Dictionary<string, string>();dict.Add("appid", appId); // 公众号开发者ID（AppID）dict.Add("secret", secret); // 公众号开发者密码（AppSecret）dict.Add("grant_type", "client_credential");return WebService<AccessTokenViewModel>(dict, url);
}/// <summary>
/// 微信接口运行接口参数
/// <parm>错误码查看：https://blog.csdn.net/qq_31267183/article/details/83211972</parm>
/// </summary>
public class WxResult
{/// <summary>/// 错误代码/// </summary>public int errcode { get; set; }/// <summary>/// 错误描述/// </summary>public string errmsg { get; set; }
}/// <summary>
/// 获取Token返回参数
/// </summary>
public class AccessTokenViewModel : WxResult
{/// <summary>/// 网页授权接口调用凭证/// </summary>public string access_token { get; set; }/// <summary>/// access_token接口调用凭证超时时间，单位（秒）/// </summary>public string expires_in { get; set; }/// <summary>/// 用户刷新access_token/// </summary>public string refresh_token { get; set; }/// <summary>/// 用户唯一标识，在未观众公众号时，用户访问公众号的网页，也会产生一个用户和公众号唯一的openid/// </summary>public string openid { get; set; }/// <summary>/// 用户授权的作用域，使用逗号分隔/// </summary>public string scope { get; set; }
}/// <summary>
/// 远程获取链接
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="dic">参数</param>
/// <param name="url">链接地址</param>
/// <returns></returns>
public dynamic WebService<T>(Dictionary<string, string> dic, string url)
{var param = "";foreach (var item in dic){if (!string.IsNullOrEmpty(param))param += "&";param += item.Key + "=" + item.Value;}HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url + (param == "" ? "" : "?") + param);request.Method = "GET";request.ContentType = "text/html;charset=UTF-8";HttpWebResponse response = (HttpWebResponse)request.GetResponse();Stream myResponseStream = response.GetResponseStream();StreamReader myStreamReader = new StreamReader(myResponseStream, Encoding.UTF8);string retString = myStreamReader.ReadToEnd();myStreamReader.Close();myResponseStream.Close();var res = JsonConvert.DeserializeObject<T>(retString);return res;
}

4.2 获取jsapi_ticket

/// <summary>
/// 获取jsapi_ticket
/// </summary>
/// <param name="access_token"></param>
/// <returns></returns>
public static JsapiTicketViewModel GetTicket(string access_token)
{var url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket";Dictionary<string, string> dict = new Dictionary<string, string>();dict.Add("access_token", access_token);dict.Add("type", "jsapi");return WebService.HttpGet<JsapiTicketViewModel>(dict, url);
}/// <summary>
/// 微信接口运行接口参数
/// <parm>错误码查看：https://blog.csdn.net/qq_31267183/article/details/83211972</parm>
/// </summary>
public class WxResult
{/// <summary>/// 错误代码/// </summary>public int errcode { get; set; }/// <summary>/// 错误描述/// </summary>public string errmsg { get; set; }
}/// <summary>
/// 获取jsapi_ticket返回参数
/// </summary>
public class JsapiTicketViewModel : WxResult
{/// <summary>/// ticket/// </summary>public string ticket { get; set; }/// <summary>/// 有效时长/// </summary>public int expires_in { get; set; }
}
/// <summary>
/// 远程获取链接
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="dic">参数</param>
/// <param name="url">链接地址</param>
/// <returns></returns>
public dynamic WebService<T>(Dictionary<string, string> dic, string url)
{var param = "";foreach (var item in dic){if (!string.IsNullOrEmpty(param))param += "&";param += item.Key + "=" + item.Value;}HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url + (param == "" ? "" : "?") + param);request.Method = "GET";request.ContentType = "text/html;charset=UTF-8";HttpWebResponse response = (HttpWebResponse)request.GetResponse();Stream myResponseStream = response.GetResponseStream();StreamReader myStreamReader = new StreamReader(myResponseStream, Encoding.UTF8);string retString = myStreamReader.ReadToEnd();myStreamReader.Close();myResponseStream.Close();var res = JsonConvert.DeserializeObject<T>(retString);return res;
}

4.3 生成其他参数

/// <summary>
/// 获取jssdk所需签名
/// </summary>
/// <param name="ticket"></param>
/// <param name="url">要显示的url链接</param>
/// <returns></returns>
public static string Signature(string url)
{HttpCookie codeCookie = HttpContext.Current.Request.Cookies[cookieName];if (codeCookie != null){return "";}string noncestr = RandomNumber(16); // 随机数long timestamp = GetTimestamp(DateTime.Now);AccessTokenViewModel token = GetToken();JsapiTicketViewModel getTicket = GetTicket(token.access_token);var ticket = getTicket.ticket;string string1 = "jsapi_ticket=" + ticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url=" + url;string signature = FormsAuthentication.HashPasswordForStoringInConfigFile(string1, "SHA1").ToLower();return signature;
}/// <summary>
/// 生成验证码
/// </summary>
/// <param name="length">指定验证码的长度</param>
/// <returns></returns>
public string RandomNumber(int length)
{int[] randMembers = new int[length];int[] validateNums = new int[length];string validateNumberStr = "";char[] oCharacter = {'0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'};int iSeed = DateTime.Now.Millisecond;Random random = new Random(iSeed);for (int i = 0; i < length; i++){validateNumberStr += oCharacter[random.Next(oCharacter.Length)];}return validateNumberStr;
}/// <summary>
/// 获取1970-01-01至dateTime的毫秒数
/// 10位
/// </summary>
public long GetTimestamp(DateTime dateTime)
{DateTime dt = new DateTime(1970, 1, 1, 0, 0, 0, 0);return (dateTime.Ticks - dt.Ticks) / 10000000;
}

4.4 验证签名工具

官方地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

将字段传入，验证程序得到的signature是否正确

五、前端配置

5.1 基本配置

<script>
// 参数名大小写要一致
wx.config({debug: true, // 是否要调试，发布到正式时改成falseappId: '', // 公众号开发者ID，与后端参与签名的字段一致timestamp: '', // 时间戳，与后端参与签名的字段一致nonceStr: '', // 随机数，与后端参与签名的字段一致signature: '', // 签名，与后端参与签名的字段一致jsApiList: [        "onMenuShareTimeline", // 分享到朋友圈"onMenuShareAppMessage", // 分享给朋友"onMenuShareQQ", // 分享到QQ"onMenuShareWeibo", // 分享到腾讯微博"onMenuShareQZone", // 分享到QQ空间]
});wx.ready(function () {// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。_shareTimeline(); // 分享到朋友圈_shareAppMessage(); // 分享给朋友_shareQQ(); // 分享到QQ_shareWeibo(); // 分享到腾讯微博_shareQZone(); // 分享到QQ空间
});wx.error(function (res) {// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
</script>

5.2 分享到朋友圈

<script>
function _shareTimeline() {// 页面加载后设置微信分享到朋友圈的内容wx.onMenuShareTimeline({title: '', // 分享标题link: location.href, // 分享链接(当前页面URL)，与后端参与签名的字段一致imgUrl: '', // 分享图标，建议 300*300pxsuccess: function () {// 用户确认分享后执行的回调函数},cancel: function () {// 用户取消分享后执行的回调函数}});
}
</script>

5.3 分享给朋友

<script>
function _shareAppMessage() {// 页面加载后设置微信分享给朋友的内容wx.onMenuShareAppMessage({title: '', // 分享标题desc: '', // 分享描述link: location.href, // 分享链接(当前页面URL)，与后端参与签名的字段一致imgUrl: '', // 分享图标，建议 300*300pxtype: '', // 分享类型,music、video或link，不填默认为linkdataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空success: function () {// 用户确认分享后执行的回调函数},cancel: function () {// 用户取消分享后执行的回调函数}});
}
</script>

5.4 分享到QQ

<script>
function _shareQQ() {// 页面加载后设置微信分享到QQ的内容wx.onMenuShareQQ({title: '', // 分享标题desc: '', // 分享描述link: location.href, // 分享链接(当前页面URL)，与后端参与签名的字段一致imgUrl: '', // 分享图标，建议 300*300pxsuccess: function () {// 用户确认分享后执行的回调函数},cancel: function () {// 用户取消分享后执行的回调函数}});
}
</script>

5.5 分享到腾讯微博

<script>
function _shareWeibo() {// 页面加载后设置微信分享到腾讯微博的内容wx.onMenuShareWeibo({title: '', // 分享标题desc: '', // 分享描述link: location.href, // 分享链接(当前页面URL)，与后端参与签名的字段一致imgUrl: '', // 分享图标，建议 300*300pxsuccess: function () {// 用户确认分享后执行的回调函数},cancel: function () {// 用户取消分享后执行的回调函数}});
}
</script>

5.6 分享到QQ空间

<script>
function _shareQZone() {// 页面加载后设置微信分享到QQ空间的内容wx.onMenuShareWeibo({title: '', // 分享标题desc: '', // 分享描述link: location.href, // 分享链接(当前页面URL)，与后端参与签名的字段一致imgUrl: '', // 分享图标，建议 300*300pxsuccess: function () {// 用户确认分享后执行的回调函数},cancel: function () {// 用户取消分享后执行的回调函数}});
}
</script>

六、测试环境

使用微信web开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
选择“公众号网页项目”，登录微信公众号运营者的微信，即可测试，该工具与谷歌浏览器操作一致

微信公众号 - 网页服务 - 分享接口相关推荐

微信公众号开发之分享接口实现
微信公众号开发之分享接口实现第一步:先登录微信公众平台进行设置JS接口安全域名("域名不能包含http://"). 如图: 第二步:配置config接口权限验证首先需要通过获取 ...
公众号分享页面php,微信公众号网页分享功能开发的示例代码
现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接: 上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的 ...
微信公众号开发自定义分享从前台到Java后台调用微信JS接口分享朋友圈
20180811写在前面的话有很多人遇到问题之后问我,结果大多数是因为配置问题,所以请详细阅读前面的配置步骤. 20181016注意事项收到反馈,之前写的接口即将废弃,源代码中的js接口需要修改, ...
vue3+vant开发微信公众号网页爬坑不完全指北
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言 8月底的时候接到了一个微信公众号网页开发的任务, 在此之前我从没开发过微信公众号网页的项目, 心想这回又能学到新东西了, 然后又是移 ...
基于Thinkphp5+EasyWeChat+fastadmin微信小程序授权登录获取手机号微信公众号网页---联合授权登录
战前准备 1.使用 composer 安装 EasyWeChat $ composer require overtrue/wechat:~4.0 -vvv 或者在composer.json文件renq ...
微信公众号网页授权--前端获取code及用户信息（vue）
前段时间开发微信公众号网页授权,虽然网上已经有很多关于这方面的博客或者教程,但是第一次开发还是遇到挺多坑的,以下分享一下我的踩坑填坑之路. 一.测试号相关配置首先在你公司申请的测试号上配置好相关信息 ...
微信公众号网页授权--前端获取code及用户信息（vue）【简单详细版】
嗨喽大家好,前段时间开发微信公众号网页授权,虽然网上已经有很多关于这方面的博客或者教程,但是第一次开发还是遇到挺多坑的,以下分享一下我的遇到的一些问题的见解,希望对你们有帮助. 一.测试号相关配置首 ...
前端对接微信公众号网页开发流程，前期配置
微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传.图片预览.获取位 ...
前端对接微信公众号网页开发流程，授权对接
前面讲到前端对接微信公众号网页开发流程,前期配置,本篇文章主要详细介绍关于公众号的授权对接. 一.引入微信js-sdk 在需要调用 JS 接口的页面引入如下 JS 文件 http://res.wx. ...

微信公众号 - 网页服务 - 分享接口

一、公众号与域名绑定

二、 IP白名单

三、准备工作

3.1 引入JS文件

四、后端(.net)生成需要的参数

4.1 获取accessToken

4.2 获取jsapi_ticket

4.3 生成其他参数

4.4 验证签名工具

五、前端配置

5.1 基本配置

5.2 分享到朋友圈

5.3 分享给朋友

5.4 分享到QQ

5.5 分享到腾讯微博

5.6 分享到QQ空间

六、测试环境

微信公众号 - 网页服务 - 分享接口相关推荐

最新文章

热门文章

微信公众号 - 网页服务 - 分享接口

一、公众号与域名绑定

二、 IP白名单

三、准备工作

3.1 引入JS文件

四、 后端(.net)生成需要的参数

4.1 获取accessToken

4.2 获取jsapi_ticket

4.3 生成其他参数

4.4 验证签名工具

五、前端配置

5.1 基本配置

5.2 分享到朋友圈

5.3 分享给朋友

5.4 分享到QQ

5.5 分享到腾讯微博

5.6 分享到QQ空间

六、测试环境

微信公众号 - 网页服务 - 分享接口相关推荐

最新文章

热门文章

四、后端(.net)生成需要的参数