首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

微信开发之JS-SDK

什么是JS-SDK?

2017-12-18 20:05:21

使用JS-SDK的步骤

1. 绑定域名(仅首次使用JS-SDK才需要此步骤)

每个公众号最多能在3个不同的域名下,通过公众号的appid、appsecret来使用JS-SDK,公众号后台-设置-公众号设置-功能设置中,设置“JS接口安全域名”。

注意:该域名必须是通过备案的域名,不能使用IP地址,不能带端口号

2. 初始化JS-SDk

每次使用JS-SDK前必须先初始化。初始化的目的是,让微信服务器知道是哪一个公众号,在哪个域名下,调用哪些js接口功能,方便微信官方的监管(追溯散布谣言垃圾信息等)与接口权限控制(订阅号、服务号、企业号的权限不同)。

a.在要初始化JS-SDk的页面,引入官方指定的JS文件:http://res.wx.qq.com/open/js/jweixin-1.2.0.js

b.准备初始化所需要的5个参数:appId(每个公众号分配的)、timestamp(时间戳)、nonceStr(随机数)、signature(签名)、jsApiList(准备要使用的js接口的名称列表)。

wx.config({ debug: true, // 开启调试模式 appId: '', //公众号的唯一标识 timestamp: , //生成签名的时间戳 nonceStr: '', //生成签名的随机串 signature: '', //签名 jsApiList: [] //需要使用的JS接口列表});

注:wx是引入的官方指定js产生的对象,wx.config();是对象的方法

c.接着执行wx.error( );方法

d.最后会执行wx.ready( );方法

注:所有JS-SDK中的功能必须在成功初始化之后,才能调用。如果需要在页面加载时就调用某个功能,比如获取用户定位 ,则可以把调用定位的接口放在wx.ready( );方法内部,来确保正确执行;对于用户触发时才调用的接口,如扫码,则可以直接调用,不需要放在wx.ready( );方法内。

3. 敞开了使用JS-SDK中的功能,例如:

总结一下:

初始化JS-SDK

使用js接口

还比较简单,但是

签名

回过头看初始化其中的步骤b,其中有个参数signature(签名)。这个稍许复杂,请先喝口水压压惊,深呼气之后,再来看看如何签名。

signature这个参数是前台页面进行JS-SDK初始化所需要的参数,但是生成它有用到一些敏感参数(只希望在服务器端进行,而不希望在客户端进行),所以强烈的推荐做法是:初始化之前调用后台,由后台服务器来生成这5个参数,再传递给前台客户端进行初始化即可。

步骤一:获取access_token

获取方法:GET请求 https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=公众号的APPID&secret=公众号的APPSECRET

步骤二:获取jsapi_ticket

jsapi_ticket是专门用于初始化JS-SDk的凭证,有效期同样为7200秒。

注意:因为获取access_token和jsapi_ticket的次数每日有限制(access_token2000次。jsapi_ticket100万次),推荐在第一次获取了之后,全局缓存这两个参数。例如存在数据库中,每次获取时,先取已经存在数据库中的access_token或者jsapi_ticket,如果过期了(距离上一次的获取时间超过了7200秒),就重新获取。

步骤三:使用SHA-1加密方法得到签名signature

获取方法如下图:

总结一下签名:

首先要有有效的access_token(后台接口调用凭证)

才能用access_token得到jsapi_ticket(JS-SDK初始化专用凭证)

然后才能用jsapi_ticket加密得到signature(签名)

最后将得到的signature传回给页面,进行JS-SDK的初始化

也可以阅读官方文档,附录中可以查看有哪些接口可以使用和一些更详细的注意事项。

上次有2个朋友直接在公众号发起回话,但是超过了一定时间(48小时),

管理员就无法主动回复了。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171218G0S3HZ00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券