微信公众号的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)。

备注:支持使用 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: ‘‘,// 必填,签名
  jsApiList: [] // 必填,需要使用的JS接口列表
});

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

wx.ready(function(){
  // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});

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

wx.error(function(res){
  // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});

详细步骤以及所提供的接口查阅开发文档,文档地址:https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html--------------------------------------------------------------------最大的坑也是最容易忽略的,在调用微信接口的页面中,当前页面的url参数里面不能存在  &符号,存在 & 符号页面会调取不到接口。因为在页面之间跳转传参数时一定要注意!!!!

-------------------------------------------------------------------------------------------

个人笔记,仅供参考

 

原文地址:https://www.cnblogs.com/1427wsl/p/12361404.html

时间: 2024-08-01 13:14:49

微信公众号的js-sdk在使用中的坑的相关文章

公众号第三方平台开发 教程六 代公众号使用JS SDK说明

公众号第三方平台开发 教程一 创建公众号第三方平台 公众号第三方平台开发 教程二 component_verify_ticket和accessToken的获取 公众号第三方平台开发 教程三 微信公众号授权第三方平台 公众号第三方平台开发 教程四 代公众号发起网页授权说明 公众号第三方平台开发 教程五 代公众号处理消息和事件 公众号第三方平台开发 教程六 代公众号使用JS SDK说明 另,感谢一下这个大虾的博客,这几篇东西都是在他的博文基础上完成的,他的博客里也有一些接口代码可以下载 微信开发系列

微信公众号支付 js api java版本

说起来.微信支付真是一堆坑. 居然官网都没有java版本的完整代码. 就算是php版本的.还都有错误.且前后各种版本.各种文档一大堆....不停的误导开发人员. 花了一天半时间.总算实现了微信公众号支付.和pc端的微信扫码支付.其他不说了.直接给思路 本人做的是微信V3版本的微信支付.微信的官方文档中.提供的demo 只有一些工具类.这些类还是很有作用的. https://mp.weixin.qq.com/paymch/readtemplate?t=mp/business/course3_tmp

吐槽贴-微信公众号那些让人想起神兽的坑

 恍惚之间,距离上次写博客已经过去差不多两个月了.最近忙成狗,自从书出版后关注微信接口的时间就很少了,一方面,公司的事情实在太忙,现在是求生存的阶段,只能一心扎在项目中.另一方面,书发行后,好像突然少了点继续关注微信的动力,一种被微信折磨了大半年然后终于释然的感觉.最近也很少在群里说话了,但也一直关注着群里的动态.看着那些被微信一次次坑的体无完肤.茶饭不思的小伙伴,心里顿时一群神兽(羊驼)飘过,但我有时也挺力不从心的,虽然他们问的问题我基本上都遇到过,大部分也都解决过,也都帮早进群的伙伴解决过,

使用开源库MAGICODES.WECHAT.SDK进行微信公众号支付开发

概要 博客使用Word发博,发布后,排版会出现很多问题,敬请谅解.可加群获取原始文档. 本篇主要讲解微信支付的开发流程,相关业务基于MAGICODES.WECHAT.SDK实现.通过本篇教程,您可以很方便的快速完成微信公众号支付的开发. 关于Magicodes.WeChat.SDK MAGICODES.WECHAT.SDK为心莱团队封装的轻量级微信SDK,现已全部开源,开源库地址为:https://github.com/xin-lai/Magicodes.WeChat.SDK 更多介绍,请关注后

微信JS-SDK]微信公众号JS开发之卡券领取功能详解

js sdk: http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E9.99.84.E5.BD.952-.E6.89.80.E6.9C.89JS.E6.8E.A5.E5.8F.A3.E5.88.97.E8.A1.A8 微信团队在2015年初改革了微信JS的API,本文主要详细说明其中用到的卡券领取功能. 微信卡券需要认证过的公众号才能申请开通,而且创建的卡券也是要审核才能投放的.微信的卡券对于用户体验上来说

利用OpenShift托管Node.js Web服务进行微信公众号开发

最近写了一个微信的翻译机器人.用户只要关注该微信号,发送英文的消息,就能收到中文翻译的回复.后台是用Node.js写的,托管在OpenShift的Paas平台上.翻译过程实际上是调用微软的Bing translation API做的,代码中用到了alexu84的bing-translate和JacksonTian的wechat这两个npm模块.下面把做的过程详细说一下. 1. 微信公众号开发 首先是要到https://mp.weixin.qq.com 申请一个公众号,并申请成为开发者.目前个人只

VopSdk一个高逼格微信公众号开发SDK:自动化生产(装逼模式开启)

VopSdk一个高逼格微信公众号开发SDK(源码下载) VopSdk一个高逼格微信公众号开发SDK:自动化生产(装逼模式开启) 针对第一版,我们搞了第二版本,老规矩先定个目标. 一 我们的目标 a.移除PayExcute,统一执行入口,目前只保留一个入口Excute b.序列化特性统一,目前只用设置xml特性即可(反序列化时xml和json都可以直接用) c.支持文件上传,目前只有多客服管理上传头像接口用到过 d.使用T4模板自动生产所有Request.Response.以及所有测试Test(装

SAE微信公众号PHP SDK, token一直验证失败

用的是SAE,创建的是微信公众号PHP SDK框架,里面example文件夹下有server.php用来验证token的.但是问题来了,无论我怎么输入URL和token,一直告诉我token验证失败.我尝试过:1.URL:http://XXXXXXX.sinaapp.com/example/server.phptoken:weixin(就是文件里面默认的token值) 这是建立之初教程指示的地址.仍然 显示token验证失败2.我在官网,微信公众平台开发手册里下载的实例代码URL:http://

一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app

一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 项目地址:https://github.com/jrainlau/wechat-subscriptor 下载&运行 git clone git@github.com:jrainlau/wechat-subscriptor.git cd wechat-subscriptor && np

微信公众号sdk

微信公众号开发 能享用微信公众号的API,比如分享给好友,分享到朋友圈,禁止菜单功能,选择图片,获取地址,以及支付 微信的功能有两种执行方式 一种是 wx.xx 一种是 WeixinJSBridge.call() WeixinJSBridge是很老的方式,在微信网页才能使用的全局变量,不需要引入js插件,现在都不用了,但是去查资料会有很多,看了没用的,但是有两个是可以用的 // 禁止菜单功能 WeixinJSBridge.call('hideOptionMenu'); // 关闭当前页面 Wei