2020-01-05 12:38:53 i042416 阅读数 75

假设我用vue开发了一个web应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试.

假设我的web应用的访问入口是如下公众号菜单的"预约"按钮:

那么为了能够在微信开发者工具里调试,需要首先进入该公众号的后台,在web开发者工具里,将我本人的微信号添加进去:

点击"绑定开发者账号":

输入待绑定的微信账号:

点击绑定,该微信号会收到一条消息,询问是否绑定:

点击同意操作完成绑定.

接下来,把要调试的web应用的url放到微信开发者工具地址栏里,回车之后,微信开发者工具就会弹出一个询问窗口,点击Allow之后,就可以在微信开发者工具提供的类似Chrome开发者工具调试器一样的界面里进行单步调试了.

这个粘贴到地址栏的url很有讲究。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=yyyy&redirect_uri=https%3a%2f%2fwww.xxx.com%2fsmart&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect
其中appid=后面的值,是从微信公众号控制台里拷贝出来的appid:

redirect_uri, 即为我们开发的web应用,部署到服务器之后生成的url,需要经过url encode处理:https://www.xxx.com/smart

这个url准备好之后,将其粘贴到微信开发者工具地址栏里,回车,即可看到一个对话窗口,要求获得我们公开信息的许可:

点击Allow之后,就可以像使用Chrome开发者工具的调试器一样,在微信开发者工具里进行单步调试了:

要获取更多Jerry的原创文章,请关注公众号"汪子熙":

2017-03-27 22:25:27 u010882234 阅读数 2783

             简单讲一下利用微信官方提供的工具--微信web开发者工具,进行微信工程的本地调试和测试、生产环境的调试。

             本地调试,  利用自己申请的订阅号的公众平台测试账号测试。

            1、按照上篇文章中介绍的,设置网页授权域名,本地启动服务,做好外网映射。利用花生壳或ngrok做好外网映射,在微信公众平台的测试号配置中配置好域名,就可以利用域名访问本地服务了。我用的是ngrok,挺好用的,推荐大家试一试。

             2、关注测试号,用关注的微信登录微信web开发者工具,在工具输入框中输入做好外网映射的域名,就可以访问本地的微信项目了。可以在本地打断点进行测试后台代码,在Network查看资源加载情况和请求的执行情况,也可以在工具内的Sources监控js执行情况,调试页面效果。


            下面讲测试环境和生产环境的调试。

             1、与本地调试一样,打开自己要调试的服务号的公众平台,进入“web开发者工具”,绑定自己的微信号。



             2、用自己的微信号登录微信web开发者工具,输入服务号的域名,就可以调试了。但是只能在工具里调试,不能看后台代码了。可以在Network查看资源加载情况和请求的执行情况,也可以在工具内的Sources监控js执行情况,调试页面效果。这些还是可以的,和普通的web项目一样。


             另外,如果是有些获取access_token、openid等的操作,需要获取微信用户的信息,去授权登录等。可以先在自己微信上登录下,获取信息写入到服务器中,再去用微信web开发者工具测试。

             以上,是使用微信web开发者工具的调试功能,其余功能,下次再说。


2018-11-30 15:45:53 qq_43475097 阅读数 2986

微信小程序测试的策略和注意事项

一、测试前准备(环境搭建)

1.前端页面
微信Web开发者工具安装、授权测试用的微信号可预览和调试小程序…
可参考此文: 微信Web开发者工具-下载、安装和使用图解

2.管理后台
配置内网测试服务器环境,通过PC端Web站点管理小程序前端的输出内容,可从开发人员获取管理账号进行测试

二、测试范围

1.权限测试

需要检查以下几种情况下微信用户访问的权限

1)未授权微信登录小程序
未授权时,一般使用一些业务功能的时候,都会弹出提醒:先授权再操作对应功能。or在提交数据到后台的时候,会提示补充相关身份信息才能提交成功

2)已授权微信登录小程序
授权微信访问小程序,意味着自己的微信账号可被小程序管理方所获取,自动以微信的身份行使业务操作权限,比如咨询、支付、数据查询等

3)同一微信号在不同手机端登录授权查看数据权限
同一微信号在不同手机微信端授权登录同一小程序之后,所能查看的数据和操作的权限都应该是同步一致的

2.功能测试

1)按功能模块测试
根据设计好的各个大类功能模块划分,然后再逐级细化,覆盖到每个功能尽可能全面的测试点

2)按业务流程测试
小程序的业务,比如咨询、支付、播放、查询、下载。把各个功能点串联起来形成完整的业务流程来检查;同一个业务,可能有不能的路径来实现,每个路径都需要覆盖检查

3)按数据流向测试
根据数据从某一端操作输入和输出流向,设计基于数据流的测试用例,输出的数据也可能成为另外一端的输入,检查输入的数据是否按照代码逻辑执行正确的输出,是否数据发生异常(无法输入;有输入却无任何输出;输出不正确;多余的输出其他信息…)

4)同一功能不同的入口有效性的检查
小程序中在首页、列表页、详细页、其他的业务功能相关页面,都有可能存在同一个功能的入口,如付费咨询、免费咨询业务中,可以直接从首页进入付费咨询入口,也可以通过免费咨询入口再切换到付费咨询入口。每一个入口路径都需要覆盖检查

5)交互性检查
一般而言,产生数据和功能交互变化的情况主要有这几个分类:前台<–>前台、后台<–>后台、前台<–>后台。前台从A1页面提交的数据,可能需要在前台A2页面查看到,也会在对应后台的B页面查到记录;后台B1页面修改or添加的数据,对应到前台的A页面产生交互变化,后台本身的不同页面之间也可能存在同一个数据的输出值

3.版本配置测试

有时候小程序一次性做了几套不相同的模板,在前端程序代码中修改配置参数,保存后重新编译,即可从一个版本切换到另一版本,同时也需要在管理后台作相应的切换,以保证前端进行数据调用

对于非公用的部分:不同版本直接的切换,需要保证彼此的功能模块和数据独立性不受干扰影响,即不同版本的管理后台所添加的数据只应该调用到各自对应模板的前台小程序中,不同版本的小程序从前台提交的数据也只会提交到各自管理后台,不应该有交差重叠

对于公用的部分:切换不同的模板,都会显示相同的内容

4.兼容性测试

1)手机操作系统
常规的手机端OS为:Android(7.x/6.x/4.x/2.x…)、IOS(11.x/10.x/9.x…)

2)微信版本
对于已上线的小程序,有可能会因为微信版本升级之后导致对部分小程序的组件支持产生冲突,手机端微信上查看的小程序页面出现样式有异常,比如出现少部分区域的黑屏,这种情况需要同步在小程序的程序包中修改一些组件再次更新

5.易用性测试

1)导航
定位到页面某个模块所在位置,回到顶部or底部,导航条的收展,导航标签的文字是否容易理解

2)功能入口
重要且常用业务的功能入口,是否在比较显眼的位置,业务操作过程是否便于大多数用户使用和查看

3)上下层级进入&返回
首页<–>列表页、列表页<–>详细页 、首页<–>详细页。不同层级之间的进入和返回实现是否有相应按键易操作

4)字体、图片、动态交互效果
字体:标签、标题、内容、动态播放字体…
图片:轮播图、背景图、封面图、触屏产生的交互图…

三、注意事项

1.上线

1)上线配置
内网测试、线上测试对应不同url接口;上线前,需要修改内网测试接口地址为正式环境使用的接口。同时还有一个配置参数的 转换设置也要关注到

2)审核
将程序包提交给微信官方进行审核,工作日审核一般0.5d-1d之内可以搞定

3)发布
微信官方审核通过后,即可发布小程序到正式环境中访问使用,通过手机微信端搜索对应小程序的名字即可搜索到

2.常用功能

1)缓存清理
微信Web开发者工具、手机端微信的缓存清理。
使用场景:数据修改后检查修改的效果,程序修改代码后检查效果等情况,可清除缓存后再检查

2)编译
更新测试版本时使用。小程序需要经过几轮的循环测试和修复,开发人员每次修复Bug完成之后会添加新的程序包给到测试人员,测试人员则需要通过微信Web开发者工具删除旧版本的项目程序,重新添加新版本的程序包,然后编译调试

3.常用操作键

  • 新建项目:Ctr+Shift+N
  • 保存:Ctr+S
  • 关闭文件:Ctr+W
  • 搜索:Ctr+F
  • 刷新:Ctr+R
  • 编译:Ctr+B
  • 预览:Ctr+Shift+P
  • 清除缓存:CTRL+SHIFT+DEL
2018-02-21 21:51:22 Julialove102123 阅读数 839

1. 准备

2. 开发工具使用

  • 登录页

使用微信扫码登陆开发者工具,开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。

  • 模式选择

开发者工具提供两种开发模式的选择。

  1. 公众号网页调试 : 直接进入公众号网页项目调试界面,在地址栏输入 URL,即可调试该网页的微信授权以及微信 JS-SDK 功能。
  2. 小程序调试 :进入小程序本地项目管理页,可以新建、删除本地的项目,或者选择进入已存在的本地项目。

  • 新建项目

在本地创建一个小程序项目

  1. 需要一个小程序的 AppID;如没有 AppID,可以选择体验模式,但体验模式无法进行代码真机预览和上传等操作,部分 API 无法正常调用
  2. 登录的微信号需要是该 AppID 的开发者;
  3. 需要选择一个空目录,或者选择的非空目录下存在 game.json 或者 project.config.json。当选择空目录时,可以选择是否在该目录下生成一个简单的项目。

  • 管理项目

对本地项目进行删除和批量删除

  • 主界面

开发者工具主界面,从上到下,从左到右,分别为:菜单栏、工具栏、模拟器、编辑器、调试器 五大部分。


  • 菜单栏

微信web开发者工具

切换账号:快速切换登录用户

关于:关于开发者工具

检查更新:检查版本更新

开发者论坛:前往开发者论坛

开发者文档:前往开发者文档

调试:调试开发者工具、调试编辑器;如果遇到疑似开发者工具或者编辑器的 bug,可以打开调试工具查看是否有出错日志,欢迎在论坛上反馈相关问题

更换开发模式:快速切换公众号网页调试和小程序调试

退出:退出开发者工具

项目

新建项目:快速新建项目

打开最近:可以查看最近打开的项目列表,并选择是否进入对应项目

查看所有项目:新窗口打开启动页的项目列表页

关闭当前项目:关闭当前项目,回到启动页的项目列表页

文件

新建文件

保存

保存所有

关闭文件

编辑:可以查看编辑相关的操作和快捷键

工具

编译:编译当前小程序项目

刷新:与编译的功能一致,由于历史原因保留对应的快捷键 ctrl(⌘) + R

编译配置:可以选择普通编译或自定义编译条件

前后台切换:模拟客户端小程序进入后台运行和返回前台的操作

清除缓存:清除文件缓存、数据缓存、以及授权数据

界面:控制主界面窗口模块的显示与隐藏

设置:

外观设置:控制编辑器的配色主题、字体、字号、行距

编辑设置:控制文件保存的行为,编辑器的表现

代理设置:选择直连网络、系统代理和手动设置代理

通知设置:设置是否接受某种类型的通知


工具栏

点击用户头像可以打开个人中心,在这里可以便捷的切换用户和查看开发者工具收到的消息。

用户头像右侧是控制主界面模块显示/隐藏的按钮。至少需要有一个模块显示。

工具栏中间,可以选择普通编译,也可以新建并选择自定义条件进行编译和预览。

通过切后台按钮,可以模拟小程序进入后台的情况

工具栏上提供了清缓存的快速入口。可以便捷的清除工具上的文件缓存、数据缓存、还有后台的授权数据,方便开发者调试。

工具栏右侧是开发辅助功能的区域,在这里可以上传代码、查看项目信息


模拟器

模拟器可以模拟小程序在微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。

开发者可以选择不同的设备,也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。


在模拟器底部的状态栏,可以直观地看到当前运行小程序的场景值,页面路径及页面参数

设置页

外观设置、编辑设置、代理设置和通知配置。菜单栏上点击设置,或者使用快捷键 ctrl(⌘) + , 可以打开设置页。

外观设置

编辑器支持配置外观和代码编辑器习惯和风格。

  • 主题:深色、浅色
  • 字体
  • 字号
  • 行距

appearance

编辑设置

  • 修改文件时自动保存
  • 编译时自动保存所有文件
  • 文件保存时自动编译小程序
  • 自动折行
  • 用空格代替 Tab
  • 代码缩略图
  • Tab 大小

edit

代理设置

可以配置不使用代理,或使用系统代理,或使用自定义代理。

proxy

通知设置

可以设置是否接收系统消息、开发者社区消息、监控报警消息。

bbs

2016-09-06 16:07:59 chen517611641 阅读数 4422

##准备工作
1.ngrok,微信的接口有一些是被动的接收从微信服务器发送的消息的,所以需要提供一个域名给微信服务器,ngrok可以将本机的指定端口,映射到一个域名。花生壳什么的也可以。
2.微信web开发者工具,微信官方的调试工具
##测试账号配置
###测试账号信息
在测试账号管理界面,你可以获取到AppID和APPSecret。
###接口配置信息
这里写图片描述

验证URL有效性成功后即接入生效,成为开发者。如果公众号类型为服务号(订阅号只能使用普通消息接口),可以在公众平台网站中申请认证,认证成功的服务号将获得众多接口权限,以满足开发者需求。

此后用户每次向公众号发送消息、或者产生自定义菜单点击事件时,开发者填写的服务器配置URL将得到微信服务器推送过来的消息和事件,然后开发者可以依据自身业务逻辑进行响应,例如回复消息等。

下面的文档描述了这个接口的作用:
http://mp.weixin.qq.com/wiki/8/f9a0b8382e0b77d87b3bcc1ce6fbc104.html
###JS接口安全域名
这里写图片描述
配置在ngrok生成的域名,配置这个配置项的目的是让开发者可以在该域名下调用微信开放的JS接口。
JS-SDK相关的内容可以看这里:
http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
###测试账号二维码
这里写图片描述
用测试账号扫一下这个二维码,就能关注这个测试账号了,回复信息什么的就可以测试了。
###体验接口权限列表
这里写图片描述
测试账号默认大部分接口都是默认开启的,有几个需要手动开启。
这里需要注意的是网页授权获取用户基本信息这个。
这里写图片描述
如上所示,这里需要配置一个域名,网页授权成功回调的时候,必须是这个域名下的地址才行,不然就报scope参数错误或没有scope权限的错误。
至此,开发环境就搭建好了,可以按照微信公众平台开发文档里的微信网页开发部分写一个网页授权获取基本信息的demo了。

微信小程序入门

阅读数 528

微信小程序开发一

阅读数 997

微信开发调试方法

阅读数 149

没有更多推荐了,返回首页