最近在开发 h5 应用的时候,需要调起微信的扫一扫功能。那就得使用到微信的 JS-SDK,怎么在本地开发中,使用 JS-SDK 的功能呢?...(功能不限于微信扫一扫) 在这里,我们介绍两种方法: Demo 在 Mac M1 上进行;其他平台请自行验证 假设你已经申请了公众号测试账号,如果不知道如何操作,请前往本人之前的文章 - 调试微信公众号获取用户信息...access_token=ACCESS_TOKEN&type=jsapi 可以获取 Jsapi Ticket: 获取签名 我们已经获取到 jsapi_ticket,之后,通过 微信 js 签名工具...微信开发工具的控制台输出的效果如下: 图中的 signature 是重新生成的 2....参考文 微信 JS-SDK 如何本地调试 Mac上安装ngrok实现内网穿透
来源:51testing Fiddler是一个非常强大的代理工具,可以让你的前端开发调试更加方便。下面介绍在微信开发调试方面的应用。 ...微信网页开发中,由于有js接口安全域名和授权域名等的限制,导致部分功能需要部署到线上才能测试。通过代理可以实现本地调试网站的所有功能。...在真机上测试 在真机上测试本地微信网页项目的步骤如下: 1.手机和电脑连接同一个局域网。 ...到这里,本篇文章的主要内容就结束了,如果你想了解更多关于Fiddler和代理工具的使用,可以参考我同事的文章代理工具Fiddler -调试与替换接口状态, 代理工具做微信项目的调试配置。 ...比如微信开发者工具的登录和域名校验就是使用的HTTPS与微信服务器通信的,如果不代理这部分流量是无法正常运行微信开发者工具的。
运行之后会产生一个地址 3.该地址需要进行配置到文件里面 4.这个时候在项目的文件夹里面会有一个unpackage文件夹 5.小程序进行加载文件夹的时候,需要进行加载这个文件夹的根目录,带有app.json的目录 6.微信调试工具里面可以直接进行运行起来了...前言 最近在进行小程序的开发,接手了一些的小程序的项目,这个是原来都没有处理过的,一脸蒙圈,通过同事的协助以及自己的倒弄终于调试运行起来了,现在做一个记录备份; 准备工作 工具安装:HBuilderX...该地址需要进行配置到文件里面 4.这个时候在项目的文件夹里面会有一个unpackage文件夹 5.小程序进行加载文件夹的时候,需要进行加载这个文件夹的根目录,带有app.json的目录 6.微信调试工具里面可以直接进行运行起来了
调试微信接口,例如调试微信消息收发接口,我们需要提供一个公网访问url,正常情况下,我们需要建立web工程,然后打包,不部署服务器,提供服务器外网访问url。...这里介绍三种方式,将本地运行代码发布到互联网,提供映射域名,实现本地调试微信接口: 1、使用ngrok:详见http://blog.csdn.net/liuxiyangyang/article/details...(由于ngrok每次映射的公网域名都是随机的,这样每次重启都会发生变化,给本地调试造成麻烦,所以需要这个授权码,使我们的域名固定) 第二步:打开cmd窗口,进入ngrok目录,输入ngrok 80,就可以得到本机...详见http://www.imooc.com/wenda/detail/241318 值得注意的一点是,nat123虽然提供免费的域名,但是使用nat123的免费域名虽然在浏览器上能正常访问,但是在微信里就会提示
//后台返回的配置数据 wx.config({...debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。...生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: ['chooseWXPay'] // 必填,需要使用的JS
一、下载、安装Fiddler 二、微信授权调试 案发现场: 某天,一名正儿八经的开发"猿",在疯狂一顿Coding之后,他完成了微信授权登录功能的编码。...下来他想先在本地调试一下,然后再部署到线上环境。于是在本地Run起了Project,假设微信回调的地址是:localhost:9002。...PS: 请先自行登录微信公众平台进行相关配置。 1. Fiddler + 微信web开发者工具 打开微信web开发者工具,选择公众号网页开发: ?...Fiddler修改Hosts 完成以上配置,即可利用微信web开发者工具在PC本地进行微信授权调试,就这么简单。 2....手机端配置 完成以上配置,即可使用手机进行微信授权(可自行构造请求微信授权),微信回调后会走PC运行的项目接口,大概就这么简单。
,方法类似 其他的WebView也不一定能识别,需要WebView本身开启支持了调试 小米浏览器默认是支持的,微信X5在去年的时候也是默认支持的,不过最近需要手动开启了,在微信里访问 http:...使用微信开发者工具进行调试 微信开发者工具的调试分为两种,一种是基于Weinre的网络连接调试,另一种是基于USB线缆连接的调试。...调试情况与Chrome的远程调试类似,差的是微信开发工具里调试功能的稍微旧了些,好的是它可以识别一些Chrome识别不到的 5....点击后可以看到几个面板,能够满足基本的页面审查、请求查看、命令执行,需要的话也可以自己添加插件 而在微信内置浏览器中访问页面时,则需要手动引入 VConsole.js 这个文件...比如结合上述的 VConsole 来使用,可以在不借助电脑的情况下就能做一些基本的调试功能 四、断点调试 断点调试,包括JS的调试,以及DOM节点元素的树结构、属性改变的调试,它在调试过程中是很重要的
在开发小程序过程中,为了方便调试我们一般勾选不检验合法域名选项,如图: image.png 这样我们就可以使用测试服务器进行调试测试了,开发完成后如果想用手机测试,则需要点击真机调试: image.png...这样手机就会自动打开项目,但是这里有个问题,手机小程序必须开启调试模式才能正常请求,因为我们的域名是测试域名。...开发到这里一般问题就出现了,按照我说的流程,ios手机是不会有问题的,有问题的是安卓手机,安卓手机在打开测试版小程序时,并且打开调试面板,依然不能发出请求,返回的状态码是308,这个状态时微信服务器返回的...,安卓手机调试时使用不合法的域名是不能调试 的,这里需要注意。
整理一下通过h5做微信分享相关配置。 流程介绍 公众号配置(AppID、IP白名单、JS接口安全域名) 网页授权 JSSDK配置使用 1....公众号配置 登录微信公众号,获取AppID,配置白名单,然后配置JS接口安全域名。...配置白名单 1.3 配置JS接口安全域名 左侧菜单栏选择:设置 => 公众号设置: ? JS接口安全域名 2. 网页授权 网页授权主要是获取微信openId使用,如果只是用分享操作,本步可以略过。...为什么要走这一步呢因为有些操作,例如微信支付、播放微信录音、获取微信地址、微信卡券、商品、小店等等许多功能必须在微信浏览器汇总打开操作才可以,因此需要跳入微信浏览器及微信链接来处理后续操作。...}); 小结 其实微信分享(地理位置、扫一扫、卡券等微信各类接口)都是通过上述步骤配置的,可举一反三,在面对不同需求时通过微信开发文档来进行更为复杂的操作。
昨天微信推出了web开发工具,极大方便了微信开发 其中有一个功能:调试微信网页授权 之前在开发基于微信授权的功能时,需要在手机微信中打开自己开发的页面,跳转到微信授权页,点击授权后获取用户信息,然后进行开发和调试工作...这个过程需要在电脑上开发代码,在手机微信上调试,很不方便,通过使用微信web开发者工具,就可以直接在电脑上进行这种调试了 ?...步骤 (1)安装微信web开发工具 下载地址和说明页面: 微信公众平台开发者文档 -> 开发者工具 -> web开发者工具 http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html...(2)用你的微信关注开发用的公众号 (3)在公众号后台启用开发者中心 (4)进入公众号后台的 开发 -> 开发者工具 -> web开发者工具 页面,绑定你的微信号 (5)你的微信会收到“公众号开发者微信号绑定邀请...”,点击进入,同意绑定 (6)打开web开发工具,点击右上角的“登录”,用你的微信扫码,确认登录 (7)在web开发工具的地址栏中输入你的url,左侧的模拟显示器中就可以进行授权操作了
下载 IPAPatch 项目 使用 PP 助手下载砸过壳版本的微信 ipa(使用最新版本的微信,否则登录会提示需要升级),这个需要安装 PP 助手,下载后在下载目录找到其 ipa 将微信的 ipa 文件命名为...检查器打开」 首先登录微信账号,打开需要调试的小程序,打开后在 Mac 电脑上打开「Safari -> 开发」找到自己的 iPhone 手机,选择对应的页面就可以进行调试了。...JSContext 打开 JSContext 之后,找到的第一个 JS 文件实际就是微信的逻辑层代码执行 waservice.js 了: [ansmhpgrxo.png] 另外看到一些 JSBridge.subscribeHandle...w=750&h=1334&f=jpeg&s=61647] 使用 Reveal 查看 UI 布局 如果要研究微信小程序的布局,可以使用 Reveal 软件来查看 UI 布局。...这份实战课程以打造一款拥有天气预报和签到功能的小程序为主线,从基础知识到小程序运行机制,从开发环境搭建到小程序开发、调试、上线,打通微信小程序开发全流程,让新手可以从零开始完成并上线一个小程序。
微信公众平台为公众号开发者提供了网页版的接口调试工具,开发者可以直接在网页中调用对应的接口,比如获取access_token接口,创建菜单接口,发送消息接口 等等。...先看一下界面,访问: http://mp.weixin.qq.com/debug/ 可以看到如下界面: 一、接口类型:因为微信公众号接口比较多,所以这里进行了分类,包括:基础支持、向用户发送消息、...开发者不可能每调用一次接口就要去获取一次access_token,这样既增加了微信接口服务器压力,也增加了开发者的工作量。所以为access_token设置了过期时间,单位是秒。...2.1,菜单json 创建微信公众号菜单主要是通过json格式的字符串参数进行创建。 菜单级别包括:一级菜单、二级菜单; 类型包括:链接,消息,事件,调用摄像头,等等。具体可参考接口文档。...提示:如果你创建菜单后,提示创建成功,但是这里的菜单没有变化,可能是由于微信公众号菜单缓存引起的,可以先取消关注,然后再关注即可。
简介 由于微信浏览器中获取用户信息的回调地址必须是已经ICP备案的域名。...本程序基于微信开发者工具完成调试 NATAPP使用 注册NATAPP并实名认证 购买隧道 - 免费隧道 - Web(端口80)- 购买之后可在我的隧道中查看 - 复制authtoken 下载NATAPP...} 将web项目拷贝到配置中的root路径 启动nginx(此时可通过http://127.0.0.1或http://smalle.natappfree.cc访问) 配置回调地址 微信后台...request_filename) { proxy_pass http://127.0.0.1:8080; break; } } web项目中认证请求js...code=" + code; $.get(url, function(res) { console.log(res); }); ---- 相关文章:服务号使用微信网页授权(H5应用等)
因为大部分公众号web应用实际登录都是使用用户微信认证登录,下文主要是提供一种方法使在PC端使用任意浏览器绕过微信认证完成登录,后面就可以在浏览器中使用或调试web应用。...当然如果您本身就是公众号的管理者那可以直接设置自己的帐号为该公众号开发者帐号,作为开发者帐号其实这些都不要去关心,因为你可以直接使用微信开发者工具去完成授权,然后在开发者工具中进行调试 ?...也就是说我们只要能在微信公众号(服务号)应用完成认证后将相应的cookie取出并写入浏览器(或者其他调试工具),那浏览器就可以通过后面应用服务器的身份验证(无论当前网页使用怎样的域名甚至是前端人员的本地页面...对于cookie的获取其实还是比较方便的,如果被设置为微信公众号的开发者可以直接使用微信web开发者工具,调试信息包括cookies也都会有,如果不是开发者无法进入调试模式也没有关系,任何针对http协议及更底层协议的抓包工具都可以查看...(注意图片及js资源可能不含有cookies信息)点击Get Cookies获取cookie (如下图) ?
模拟器调试 方法很简单,仅仅需要在js代码中写上 debugger 保存后执行到这句代码的地方就会断下来,然后就可以单步调试了 QQ截图20220112182939.png 手机调试 通过点击开发者工具预览...,扫码打开小程序,打开右上角三个点,在弹出菜单右下角选择打开调试,会关闭小程序 重新扫码打开小程序,右下角有个vConsole按钮,点击就可以看到调试信息,这种方法只能看日志信息 真机调试 还是需要在...js代码中写上 debugger 记得先保存 然后通过点击开发者工具真机调试,扫码打开小程序,执行到这句代码的地方就会断下来,然后就可以单步调试了
前言 本文,我们来聊聊,怎么在微信公众号中获取到微信用户的信息呢?并且,我们怎么在本地进行调试?下面我们就这两点,展开来说。...本地调试 我们下载微信开发者工具 -- 选择稳定版本 Stable Build 即可。...做好了上面本地调试的工作之后,我们可以正式开始获取微信用户信息了。 获取微信用户信息 还记得我们说的 appID 和 appsecret 后面会用到?其中前端调用用到 appID,后端则两者都用到。...我们在 demo 的入口页面 App.js 中添加。...后话 对微信公众号的开发还是中规中矩。但是需要留意的几点是: 申请测试公众号,并关注 填写域名为 ip + 端口号 微信开发者平台使用 ip 地址访问网页 Ok,Finish!下次见~
背景:在企业微信开发,如果不能在企业微信直接调试,那效率非常低,问题又不容易定位到,企业微信设置里又没有开发者模式开关,就在我无从下手的时候,发现一个快捷键能打开调试模式 企业微信 Windows...版本调试 把 devtools_resources.pak 放到企业微信的安装目录下(复制的文件名,要保证为 devtools_resources.pak),注意安装目录带有版本号(4.0.1304.400...是浏览器内核的版本号); 关闭企业微信,重新启动; 按快捷键 ctrl + alt + shift + D,进入调试模式; 在需要调试的页面上点击右键,点“开发者工具”,进入调试模式。...---- 企业微信 Mac 版本调试 按下 command+shift+control+D 进入调试模式 帮助->开发调试选项->开启 webView 元素审查 内置浏览器右键
比如除了使用 Node.js 提供的原生 http 接口在云函数中发起网络请求,我们还可以使用一个流行的 Node.js 网络请求库 request 来更便捷的发起网络请求。...需特别注意,云函数运行环境即是管理端,与云函数中的传入的 openId 对应的微信用户是否是小程序的管理员 / 开发者无关。...请注意云函数的运行环境是 Node.js,因此在本地安装依赖时务必保证已安装 Node.js,同时 node 和 npm 都在环境变量中。...Unexpected end of JSON input while parsing near “xxx” 的解决办法: npm cache clean --force #清理npm的缓存 然后返回微信开发者工具...,右键你的云函数本地调试,成功如图:
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。...通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。...微信JS-SDK使用步骤如下: 步骤一:绑定域名 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。...2.小店商品详情页 viewType: '' }); 12.微信卡券 微信卡券接口中使用的签名凭证api_ticket,与步骤三中config使用的签名凭证jsapi_ticket不同,开发者在调用微信卡券...获取api_ticket api_ticket 是用于调用微信卡券JS API的临时票据,有效期为7200 秒,通过access_token 来获取。
前言 本篇为JS交互微信系列篇的第四篇微信JSAPI支付,记录在微信内置浏览器内用调用微信支付过程。...一、 介绍 JSAPI支付是用户在微信中打开商户的H5页面,商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。...准备内容 要拥有两个账号: 微信服务号,要通过认证(企业才拥有资格) 微信商户平台号(微信支付平台) 2. 平台配置 2.1 微信支付(商户平台)中 要开通产品中心的JSAPI支付。...// 微信签名,前端需要从后台获取该数据 appId: '', // 需要在微信绑定商户号,成功之后会生成有appid signType: '', // 微信签名方式,默认为"MD5...交互微信 上个步骤拿到需要交互微信的参数后,就开始调用微信的支付接口了,如下: // 微信支付 WeixinJSBridge.invoke('getBrandWCPayRequest', { appId
领取专属 10元无门槛券
手把手带您无忧上云