微信公众号开发之如何使用JSSDK

JavaScript029

微信公众号开发之如何使用JSSDK,第1张

微信开发交流群:148540125

欢迎留言、转发、打赏

系列文章参考地址 极速开发微信公众号

项目源码参考地址 点我点我--欢迎Start

服务号、订阅号可以通过登录 微信公众平台 查看 开发>接口权限

使用JSSDK主要包括

1、判断当前客户端版本是否支持指定JS接口、

2、分享接口(微信认证)

3、图像接口

4、音频接口

5、智能接口(识别语音并返回结果)

6、设备信息(获取网络状态)

7、地理位置

8、界面操作

9、微信扫一扫

10、微信小店(服务号必须通过微信认证)

11、微信卡券 (微信认证)

12、微信支付(服务号必须通过微信认证)

官方参考文档

步骤一:绑定域名

先登录微信公众平台进入 公众号设置 的 功能设置 里填写 JS接口安全域名 。

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https): http://res.wx.qq.com/open/js/jweixin-1.0.0.js

如需使用摇一摇周边功能,请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js

备注:支持使用 AMD/CMD 标准模块加载方法加载

步骤三:通过config接口注入权限验证配置

签名算法生成规则

请 官方参考文档

下面具体来讲讲 开源项目 weixin_guide 中的封装。

使用的时候只要在Controller方法上添加一个拦截器 JSSDKInterceptor 来实现签名验证再将 wx.config 需要的参数设置对应的属性在页面上进行获取。

拦截器实现如下:

在Controller中使用

JSP页面上面使用

测试结果

在AppConfig 中添加路由 me.add("/jssdk", JSSDKController.class,"/view")手机中访问 http://域名[/项目名称]/jssdk ,如果设置了 debug= true 成功了就会弹出

如果出现 {"errorMsg":"config:invalid url domian"} 请检查 步骤一:绑定域名 与你访问的域名是否在安全域名列表当中

步骤四:通过ready接口处理成功验证

步骤五:通过error接口处理失败验证

步骤六:接口调用

拦截器具体实现 参考地址 点这里

js 接口调用参考地址 点这里

以上就是JSSDK使用的介绍。

欢迎留言、转发、打赏项目

源码参考地址 点我点我--欢迎Start

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

例子为在vue中使用微信JS-SDK,步骤如下:

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

插件方式:

引入js文件方式:

在需要调用JS接口的页面引入如下JS文件,(支持https): http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问: http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。

挂载到Vue原型

与使用 JS-SDK 配置方式相同,所有需要使用开放标签的页面必须先注入配置信息,并通过openTagList字段申请所需要的开放标签,否则将无法使用(同一个 url 仅需调用一次)。开放标签的申请和 JS 接口的申请相互独立,因此是可以同时申请的。

配置成功之后,就可以使用相关的api了。例子为微信支付。

3.分享出去的是链接,不是卡片的原因及解决方案:

原因: 微信开放全域名访问后出现的限制。

解决方法:

这会导致别人通过分享卡进来的页面不是自己配置的页面。

解决办法: 把路由hash模式改成history模式。(让后端把匹配不到的页面重定向到首页)

开发者需要配合使用微信开放平台提供的 SDK 进行一次性订阅消息授权请求接入。正确接入 SDK 后,开发者移动应用会在终端本地 拉起微信应用进行订阅消息授权 ,微信用户确认后微信将拉起开发者移动应用,并带上授权用户 openid 等信息。

使用方式: 引导用户打开 https://mp.weixin.qq.com/mp/subscribemsg?action=get_confirm&appid=wxaba38c7f163da69b&scene=1000&template_id=1uDxHNXwYQfBmXOfPJcjAS3FynHArD8aWMEFNRGSbCc&redirect_url=http%3a%2f%2fsupport.qq.com&reserved=test#wechat_redirect 链接。

可拉起微信打开一次性消息订阅授权页:

使用方式:

如需添加参数,可在redirect_uri后面进行拼接,授权成功之后会带回来。

其他问题请参考: https://www.jianshu.com/p/d343067b1ce6