微信公众号开发之微信JSSDK
概述
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力， 为微信用户提供更优质的网页体验。
此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。
JSSDK使用步骤
步骤一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://www.php.cn/
备注：支持使用 AMD/CMD 标准模块加载方法加载
步骤三：通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客 户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});步骤四：通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
步骤五：通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});接口调用说明
所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：
success：接口调用成功时执行的回调函数。
fail：接口调用失败时执行的回调函数。
complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。
备注：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回。
以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：
调用成功时："xxx:ok" ，其中xxx为调用的接口名
用户取消时："xxx:cancel"，其中xxx为调用的接口名
调用失败时：其值为具体错误信息
/// <summary>
/// 微信参数准备
/// </summary>
private void WxSdkPramas(bool isShare)
{
var jsSdk = new JSSDKHelper();
//获取时间戳
var timestamp = JSSDKHelper.GetTimestamp();
//获取随机码
var nonceStr = JSSDKHelper.GetNoncestr();
var appId = WeiXinAppId;
var appSecret = WeiXinAppSecret;
//获取票证
var jsTicket = JsApiTicketContainer.TryGetTicket(appId, appSecret);
//获取签名
var signature = jsSdk.GetSignature(jsTicket, nonceStr, timestamp, Request.Url.AbsoluteUri);
ViewData["AppId"] = appId;
ViewData["Timestamp"] = timestamp;
ViewData["NonceStr"] = nonceStr;
ViewData["Signature"] = signature;
}- 下面是js相关代码：
<head>
<meta name="viewport" content="width=device-width" />
<title>公众号JSSDK演示</title>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '@ViewData["AppId"]', // 必填，公众号的唯一标识
timestamp: '@ViewData["Timestamp"]', // 必填，生成签名的时间戳
nonceStr: '@ViewData["NonceStr"]', // 必填，生成签名的随机串
signature: '@ViewData["Signature"]',// 必填，签名
jsApiList: [
"checkJsApi",
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2。详见：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
});
wx.error(function (res) {
console.log(res);
alert('验证失败');
});
wx.ready(function () {
var url = 'http://weixin.senparc.com';
var link = url + '@(Request.Url.PathAndQuery)';
var imgUrl = url + '/images/v2/ewm_01.png';
//转发到朋友圈
wx.onMenuShareTimeline({
title: 'JSSDK朋友圈转发测试',
link: link,
imgUrl: imgUrl,
success: function () {
alert('转发成功！');
},
cancel: function () {
alert('转发失败！');
}
});
//转发给朋友
wx.onMenuShareAppMessage({
title: 'JSSDK朋友圈转发测试',
desc: '转发给朋友',
link: link,
imgUrl: imgUrl,
type: 'link',
dataUrl: '',
success: function () {
alert('转发成功！');
},
cancel: function () {
alert('转发失败！');
}
});
});
</script>
</head>上面用到的Helper:
public class JSSDKHelper
{
public JSSDKHelper()
{
Parameters = new Hashtable();
}
protected Hashtable Parameters;
/// <summary>
/// 设置参数值
/// </summary>
/// <param name="parameter"></param>
/// <param name="parameterValue"></param>
private void SetParameter(string parameter, string parameterValue)
{
if (!string.IsNullOrEmpty(parameter))
{
if (Parameters.Contains(parameter))
{
Parameters.Remove(parameter);
}
Parameters.Add(parameter, parameterValue);
}
}
private void ClearParameter()
{
Parameters.Clear();
}
/// <summary>
/// 获取随机字符串
/// </summary>
/// <returns></returns>
public static string GetNoncestr()
{
Random random = new Random();
return MD5Util.GetMD5(random.Next(1000).ToString(), "GBK");
}
/// <summary>
/// 获取时间戳
/// </summary>
/// <returns></returns>
public static string GetTimestamp()
{
TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
return Convert.ToInt64(ts.TotalSeconds).ToString();
}
/// <summary>
/// sha1加密
/// </summary>
/// <returns></returns>
private string CreateSha1()
{
StringBuilder sb = new StringBuilder();
ArrayList akeys = new ArrayList(Parameters.Keys);
akeys.Sort();
foreach (string k in akeys)
{
string v = (string)Parameters[k];
if (sb.Length == 0)
{
sb.Append(k + "=" + v);
}
else
{
sb.Append("&" + k + "=" + v);
}
}
return SHA1UtilHelper.GetSha1(sb.ToString()).ToString().ToLower();
}
/// <summary>
/// 生成cardSign的加密方法
/// </summary>
/// <returns></returns>
private string CreateCardSha1()
{
StringBuilder sb = new StringBuilder();
ArrayList akeys = new ArrayList(Parameters.Keys);
akeys.Sort();
foreach (string k in akeys)
{
string v = (string)Parameters[k];
sb.Append(v);
}
return SHA1UtilHelper.GetSha1(sb.ToString()).ToString().ToLower();
}
/// <summary>
/// 获取JS-SDK权限验证的签名Signature
/// </summary>
/// <param name="ticket"></param>
/// <param name="noncestr"></param>
/// <param name="timestamp"></param>
/// <param name="url"></param>
/// <returns></returns>
public string GetSignature(string ticket, string noncestr, string timestamp, string url)
{
//清空Parameters
ClearParameter();
SetParameter("jsapi_ticket", ticket);
SetParameter("noncestr", noncestr);
SetParameter("timestamp", timestamp);
SetParameter("url", url);
return CreateSha1();
}
/// <summary>
/// 获取位置签名AddrSign
/// </summary>
/// <param name="appId"></param>
/// <param name="appSecret"></param>
/// <param name="noncestr"></param>
/// <param name="timestamp"></param>
/// <param name="url"></param>
/// <returns></returns>
public string GetAddrSign(string appId, string appSecret, string noncestr, string timestamp, string url)
{
//清空Parameters
ClearParameter();
var accessToken = AccessTokenContainer.TryGetToken(appId, appSecret);
SetParameter("appId", appId);
SetParameter("noncestr", noncestr);
SetParameter("timestamp", timestamp);
SetParameter("url", url);
SetParameter("accesstoken", accessToken);
return CreateSha1();
}
/// <summary>
/// 获取卡券签名CardSign
/// </summary>
/// <param name="appId"></param>
/// <param name="appSecret"></param>
/// <param name="locationId"></param>
/// <param name="noncestr"></param>
/// <param name="timestamp"></param>
/// <param name="cardId"></param>
/// <param name="cardType"></param>
/// <returns></returns>
public string GetCardSign(string appId, string appSecret, string locationId, string noncestr, string timestamp, string cardId, string cardType)
{
//清空Parameters
ClearParameter();
SetParameter("appId", appId);
SetParameter("appsecret", appSecret);
SetParameter("location_id", locationId);
SetParameter("nonce_str", noncestr);
SetParameter("times_tamp", timestamp);
SetParameter("card_id", cardId);
SetParameter("card_type", cardType);
return CreateCardSha1();
}
}更多微信公众号开发之微信JSSDK 相关文章请关注PHP中文网！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Scrapy实现微信公众号文章爬取和分析
Jun 22, 2023 am 09:41 AM
Scrapy实现微信公众号文章爬取和分析微信是近年来备受欢迎的社交媒体应用，在其中运营的公众号也扮演着非常重要的角色。众所周知，微信公众号是一个信息和知识的海洋，因为其中每个公众号都可以发布文章、图文消息等信息。这些信息可以被广泛地应用在很多领域中，比如媒体报道、学术研究等。那么，本篇文章将介绍如何使用Scrapy框架来实现微信公众号文章的爬取和分析。Scr
微信公众号认证和不认证有哪些区别
Sep 19, 2023 pm 02:15 PM
微信公众号认证和不认证的区别在认证标识、功能权限、推送频率、接口权限和用户信任度等方面。详细介绍：1、认证标识，认证公众号会获得官方颁发的认证标识，即蓝色V标志，这个标志可以增加公众号的可信度和权威性，让用户更容易辨别真实的官方公众号；2、功能权限，认证公众号相比未认证的公众号拥有更多的功能和权限，例如认证公众号可以申请开通微信支付功能，实现在线支付和商业化运营等等。
Python中的爬虫实战：微信公众号爬虫
Jun 10, 2023 am 09:01 AM
Python是一种优雅的编程语言，拥有强大的数据处理和网络爬虫功能。在这个数字化时代，互联网上充满了大量的数据，爬虫已成为获取数据的重要手段，因此，Python爬虫在数据分析和挖掘方面有着广泛的应用。在本文中，我们将介绍如何使用Python爬虫来获取微信公众号文章信息。微信公众号是一种流行的社交媒体平台，用于在线发布文章，是许多公司和自媒体推广和营销的重要工
用PHP构建一个微信公众号API接口
May 13, 2023 pm 12:01 PM
在当今互联网时代，微信公众号成为了越来越多企业的重要营销渠道。想要自己的微信公众号实现更多的功能，常常需要编写相应的接口。本文将以PHP语言为例，介绍如何构建一个微信公众号API接口。一、前置准备在编写微信公众号API接口之前，需要开发者拥有一个微信公众号的账号，并且在微信公众平台中申请开发者接口权限。申请成功后，可以获取到相关的开发者AppID和AppSe
如何使用Laravel开发一个基于微信公众号的在线点餐系统
Nov 02, 2023 am 09:42 AM
如何使用Laravel开发一个基于微信公众号的在线点餐系统随着微信公众号的广泛应用，越来越多的企业开始将其作为在线营销的重要渠道。在餐饮行业中，开发一个基于微信公众号的在线点餐系统能够提高企业的效率和销售额。本文将介绍如何使用Laravel框架来开发一个这样的系统，并提供具体的代码示例。项目准备首先，需要确保已经在本地环境中安装好了Laravel框架。可以通
公众号每天只能发一篇文章吗
Jun 16, 2023 pm 02:04 PM
公众号每天不是只能发一篇文章，每次最多可以发表八篇文章，多篇文章的发布方法：1、点击左侧的“素材管理”，再点击“新建图文素材”开始编辑第一篇文章；2、编辑完第一篇文章之后，点击左侧第一篇文章下面的+号，点击“图文消息”即可编辑第二篇文章；3、做完多图文后，点击“保管并群发”即可完成多篇文章的发布。
使用Go语言框架构建微信公众号应用
Jun 04, 2023 am 10:40 AM
随着互联网的普及和移动设备的广泛使用，微信公众号已经成为了企业营销必不可少的一部分。通过微信公众号，企业可以实现轻松地与用户互动，推广产品和服务，提高品牌知名度。为了更好地开发微信公众号应用，越来越多的开发者和企业选择使用Go语言来构建微信公众号应用。Go语言是一种由Google开发的编程语言，它的语法简洁，适合构建高性能、高并发的实时应用程序。在简单易用和
PHP与微信公众号开发指南
Jun 11, 2023 pm 03:31 PM
随着微信公众号在社交网络中的逐渐普及，越来越多的开发者开始涉足微信公众号开发领域。在这其中，PHP作为一种常见的后端编程语言，也开始被广泛应用于微信公众号的开发中。本文将介绍PHP在微信公众号开发中的基础知识和常用技巧。一、PHP与微信公众号开发基础微信公众号开发微信公众号是指一种基于微信平台的互联网应用程序，可以为用户提供不同类型的服务和内容，如信息推送
