• https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140 ... 微信手机端调试工具[下载地址] (https://mp.weixin.qq.com/wiki/10/e5f772f4521

    https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140


    http://blog.csdn.net/ktutu/article/details/70175979


    微信手机端调试工具[下载地址]

    (https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html
    进入后的页面 
    这里写图片描述 
    这里写图片描述

    注意:

    1.如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。

    2.安装好后,选择移动调试,X5 Blink内核调试,先验证手机是否支持X5 Blink内核调试,如果不支持,找一台支持的手机。 
    这里写图片描述 
    3.翻墙,用usb线连接移动设备与本机,在手机设置里搜索usb调试,打开usb调试功能,用移动设备扫描以上二维码,勾选信息>TBS setting > 是否打开TBS内核 Inspector调试功能,点击开始调试。 
    4.退出微信,从新登录打开微信端的网页后会出现下图(如果未出现,或空白则需要翻墙),点击inspect 
    这里写图片描述 
    5.现在进入了我们熟悉的chrome调试界面

    这里写图片描述


    展开全文
  • 微信开发者工具项目演示 配置: 我这里是选择 ios 手机代理配置 打开手机选择网络(必须确保手机,电脑在同一局域网下面) 然后点击微信调试 出现下面连接结果界面: 然后用手机打开微信里面相应网页(你需要调试...

    微信开发最大的特点就是不好调试,所以微信官方推出了一款调试工具!

    下载地址:传送门

    微信开发者工具项目演示

    配置:

    我这里是选择 ios

    在这里插入图片描述

    手机代理配置

    打开手机选择网络(必须确保手机,电脑在同一局域网下面)

    在这里插入图片描述

    在这里插入图片描述

    然后点击微信调试
    出现下面连接结果界面:

    在这里插入图片描述

    然后用手机打开微信里面相应网页(你需要调试的功能页面,菜单或者页面)

    下面是我自己点击菜单后的页面,以及连接后的结果页面
    在这里插入图片描述

    展开全文
  • 相关文章微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序...

    相关文章

    微信小程序开发(二)开发之日历打卡小程序发现页

    微信小程序开发(三)入门之创建打卡活动

    微信小程序开发(四)入门之打卡功能开发


    前言

    一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序如雨后春笋般出现在我们的视线里。追着这波大浪潮,笔者所在的公司也开始将有些需求转移到微信小程序上。接下来将以几篇文章将最近的一个日历打卡小程序的开发过程以及遇到的问题和大家做个分享。

    (一)微信开发者工具

    小程序团队推出了自己的开发工具-微信开发者工具,目前微信开发者工具任然在不断的完善中,在开发小程序时经常要不断的更新。论坛上吐槽的文章也是一大堆,存在很多bug,笔者在开发过程中也是被它坑过。笔者是安卓开发者,习惯于这种可视化的编程,所以没有选择Webstrom或者其他开发工具,接下来将介绍微信开发者工具基本功能



       

    1. 机型选择:小程序以IPhone6的屏幕尺寸为设计标准,让UI小姐姐按照IPhone6屏幕尺寸来切图。
    2. 预览界面:写好视图布局后点击编译,视图界面刷新显示
    3. 远程调试:手机端和PC端开发工具联调(非常实用)
    4. 上传代码:上传到腾讯服务器,提交审核必经步骤。可以填写版本号和备注信息
    5. 5-1:代码体积,微信限制 2M 以内。  5-2:ES语法转换,开发中一般不校验合法域名信息 。5-3:域名信息:小程序后台要做配置服务器域名,有request 域名,socket 域名以及uploadFiledownloadFile域名。注意:域名小程序要求必须是https 
    6. 控制台:打印输出信息,方便调试
    7. 资源文件:对应项目的文件目录,一般可以在这里进行断点调试
    8. 本地数据存储:显示的是本地存储的数据,对应的相关API是wx.setStorageSync(key,data)
    9. 视图调试:标组件以子父层级结构呈现,方便调试。

    以上就是在开发过程中微信开发者工具常用到的功能,微信开发者工具也在不断的完善,为了以后更好的提升开发效率,也需要我们在开发过程中将遇到的问题不断的反馈给小程序团队做优化,希望大家抱着包容的心态。开发过程中大家也可以依照自己的习惯选择其他的开发工具。


    (二)小程序框架以及目录结构介绍

        

    •  逻辑层

      小程序开发框架的逻辑层由 JavaScript 编写。逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。逻辑层对应的是js文件,在每个页面的js文件中,系统提供了一系列的方法如:页面生命周期onLoad(),onShow(),onHide(),等,下拉刷新onPullDownRefresh(),页面到底部(上拉加载)onReachBottom()方法,分享功能onShareAppMessage()等。


    • 视图层

      框架的视图层由 wxml  wxss 编写,由组件来进行展示。将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。 wxml 由小程序提供的组件组成,wxss css 样式。

    • app文件

      app.json 
      文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。页面的json文件一般用来配置当前页面的窗口表现。app.js 用来提供全局变量,如baseUrl。app.wxss 提供全局的css样式

      {
        "pages": [                    //页面的路径(在此处可快捷创建页面)
          "pages/index/index",
          "pages/logs/index"
        ],
        "window": {                   //视图窗口
          "navigationBarTitleText": "Demo"
        },
        "tabBar": {                   //底部tab
          "list": [{
            "pagePath": "pages/index/index",
            "text": "首页"
          }, {
            "pagePath": "pages/logs/logs",
            "text": "日志"
          }]
        },
        "networkTimeout": {           //设置是否超时
          "request": 10000,
          "downloadFile": 10000
        },
        "debug": true
      }
      
      
    • utils/.json 

      系统提供的工具类,一般编写公共的方法导出方便其他页面调用。

    (三)结束语

        本篇文章简单的介绍了微信开发者工具和小程序的框架,微信的开发文档对相关功能的介绍十分的详细。接下来将开始我们的日历打卡小程序开发之旅。


    展开全文
  • 使用手机扫描开发者工具的二维码进行预览,如果不打开调试模式写库(云开发自带的库),总是写库失败, 当打开手机端的调试后,写库成功,请问大神,这个是为什么?上线后会不会也写库失败? ![图片说明]...
  • 一、微信小程序web开发工具下载地址 1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目 2.1 微信小程序web开发工具...

    一、微信小程序web开发工具下载地址


    1.1 在微信公众平台-小程序里边去下载开发工具下载地址


    1.2 下载后安装一下就可以使用了:


    二、创建项目


    2.1 微信小程序web开发工具需要扫码登陆,所以必须先绑定开发者才可以:



    2.2 已经绑定的开发者可以创建项目,需要填写AppID、项目名称、本地开发目录。





    AppID需要去设置里边获取,如果不填的话官方给的提示是部分功能受限:




    三、开发工具界面介绍:





    1. 编辑:开发的时候,需要到编辑区去写代码 

    2. 调试:开发完需要调试程序的时候需要切换到这个区域,调试区有很多工具可供使用。

    3. 项目:在这里可以上传或者预览项目

    4. 编译:就相当于运行项目的意思

    5. 关闭:关闭当前工程

    6. 微信小程序web开发工具提供实时预览的功能,界面的效果会在这个区域显示

    7. 这个区域可以看到整个项目的文档目录结构

    8. 这个区域是编码区

    9. 这里是选择屏幕尺寸的地方

    10. 模拟网络环境:2G/3G/4G/WiFi



    四、调试区六大工具介绍:


    在调试区开发工具提供了6种调试模式:


    4.1 Console

    Console的意思是控制台,做过开发的都知道几乎每个IDE都会有控制台,可以显示错误信息和打印变量的信息等。


     

    4.2 Sources

    Sources显示了当前项目的所有脚本文件,微信小程序框架会对这些脚本文件进行编译。

    Source下边还有一个区域,做过软件开发的都知道,一般下边是控制台会显示一些log信息、断电调试等等。



    4.3 Network

    Network顾名思义:这个区域显示的是与网络相关的信息,我这里暂时没有进行网络请求。



    4.4 Storage

    官方的解释是显示当前项目的使用wx.setStorage或者wx.setStorageSync后的数据存储情况。这个后续用到再慢慢研究


     

    4.5 AppData

    AppData是显示当前项目显示的具体数据,可以在这里编译,并且会在页面实时显示。



    4.6 Wxml


    Wxml调试区:把他的名字换一下的话大家就好理解了,其实他的实质就是HTML+CSS,微信只是把HTML改成了Wxml而已。学过HTML的人一看就明白,左侧的区域是HTML语言+CSS的一些标签属性。右侧可以便捷的设置CSS的属性。




    转自:http://lib.csdn.NET/article/5/52864?knId=1796#focustext

    展开全文
  • 为帮助开发者更方便、更安全地开发和调试基于微信的网页,微信推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。你可以...

    为帮助开发者更方便、更安全地开发和调试基于微信的网页,微信推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。你可以:

    •     使用自己的微信号来调试微信网页授权

    •     调试、检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出

    •     使用基于 weinre 的移动调试功能

    •     利用集成的 Chrome DevTools 协助开发 

    该工具界面主要由几大部分组成,如下图所示:

    1.jpg

    顶部菜单栏是刷新、后退、选中地址栏等动作的统一入口,以及微信客户端版本的模拟设置页。左侧是微信的 webview 模拟器,可以直接操作网页,模拟用户真实行为。右侧上方是地址栏,用于输入待调试的页面链接,以及清除缓存按钮。右侧下方是相关的请求和返回结果,以及调试界面和登录按钮。

    (一)调试微信网页授权

    之前在开发基于微信的网页授权的功能时,开发者通常需要手机上输入 URL 进而获取用户信息,从而进行开发和调试工作,可是因为手机的诸多限制,这个过程很不方便。 通过使用微信 web 开发者工具,从此开发者可以直接在 PC 或者 Mac 上进行这种调试了。具体操作步骤为:

    ①开发者可以在调试器中点击“登录”,使用手机微信扫码登录,从而使用真实的用户身份(支持测试号)来开发和调试微信网页授权。请确认手机登录页,绑定的公众号为“微信 web 开发者工具”,如下图所示: 

    2.jpg

    ②为了保证开发者身份信息的安全,对于希望调试的公众号,我们要求开发者微信号与之建立绑定关系。具体操作为:公众号登录管理后台,启用开发者中心,在开发者工具——web 开发者工具页面,向开发者微信号发送绑定邀请。绑定页面如下图所示: 

    3.jpg

    ③开发者在手机微信上接受邀请,即可完成绑定。每个公众号最多可同时绑定10个开发者微信号。邀请确认页面如下图所示:

    4.jpg

    ④完成登录和绑定后,开发者就可以开始调试微信网页授权了,注意只能调试自己绑定过的公众号,在微信 web 开发者工具中打开类似的授权页 URL,webview 模拟器显示效果如图:

    5.2.png

    (二)模拟JSSDK权限校验

    通过 web 开发者工具,可以模拟 JSSDK 在微信客户端中的请求,并直观地看到鉴权结果和 log。以微信 JSSDK DEMO 页面为例:http://demo.open.weixin.qq.com/jssdk  在调试器中打开该 URL,可以方便地在右侧的 JS-SDK Tab 中看到当前页面 wx.config 的校验情况和 JSSDK 的调用 log。 如下是校验通过的页面:

    6.jpg

    如下是校验未通过的页面:

    7.jpg

    在“权限列表” Tab 中,可以查询到当前页面拥有权限的 JS-SDK 列表:

    8.jpg

    (三)移动调试

    我移动调试从来就没有成功过,所以这里不做说明!

    (四)Chrome DevTools

    微信 web 开发者工具集成了 Chrome DevTools。同之前在 PC 上的调试体验一致,可以快速上手。如下图所示:

    9.jpg

    下载地址:http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html#.E4.B8.8B.E8.BD.BD.E5.9C.B0.E5.9D.80 

    微信web开发者工具使用的简单介绍就到这里,感谢你的翻阅,如果你有所疑问可以留言讨论!

    展开全文
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • 番外话,写一篇工具类的博文 如果想测试一下自己拿到 appid和 secret是不是正确的,可以通过在线接口调试工具进行测试 官方地址:https://mp.weixin.qq.com/debug/ 使用方式如下图 , 这个工具还是挺好用的按内容...
  • 刚刚开始学习uni-app,不知道微信开发者工具,运行到页面是咋回事。后来接触了一下,发现蛮好用的,这个功能可以联调你需要的某一页面。 每次联调项目时,Hbuilder X每次都要重新编译到初始默认的首页,然后要...
  • 微信开发者工具中能正常请求本地后台数据,但在手机预览中却请求不到。 解决办法 1、在微信开发者工具中设置:不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 2、微信小程序开发者工具中,wx....
  • 微信公众平台为公众号开发者提供了网页版的接口调试工具开发者可以直接在网页中调用对应的接口,比如获取access_token接口,创建菜单接口,发送消息接口 等等。 先看一下界面,访问: ...一、接口类型:因为...
  • 微信服务号现在真的很强大,里面有各种各样的服务和功能。现在的移动端应用,可以说,微信已经超过了APP。对于微信开发而言,它和普通的web项目其实并没什么区别。微信项目也是web项目的一种,只不过它是在微信的...
  • 调试微信网页,当然首推微信官方的开发者工具了 但是这个开发者工具只能调试服务端的网页,如果每次都去服务端发布,那效率也太低了,所以本地调试是当务之急 网上搜了很多,不是用各种工具就是抓包,实在是繁琐,...
  • 第一步,打开微信开发者工具,切换为【公众号网页调试】   第二步、菜单json 如果后端是由你开发的,你理所当然认识以下这些内容,如果你不认识,那么发给你们的后端,他们肯定认识。让他们给你即可。 { "...
  • 最近开始使用uni-app做项目,在爬坑中度过半月,昨天到了联调部分,发现之前引入的uniFly请求库有跨不过去的坑,临时决定换axios,换上后,发现在小程序无法运行,话不多说,先贴代码: import Axios from '../...
  • 由于微信的服务是在外网的,所以这个回调接口也只能是外网,而且微信要求回调接口只能是通过ICP备案的域名,不能使用IP。所以在开发调试的时候,需要把代码部署到线上的服务器,通过打log来跟踪接口调用情况,很明显
  • 到后期调试接口,首先出现的问题可能就是“你请求的域名不合法”这个问题,你可以去微信开发者工具里面看看,你的小程序上面都绑定了那些域名,看看后台给你的接口在不在这三个之间,如果说你这个没有绑定任何域名,...
  • 微信开发者工具 开发者工具上的录音文件与移动端格式不同,暂时只可在工具上进行播放调试,无法直接播放或者在客户端上播放 debug的时候发现,工具上录音的路径是http://tmp/xxx.mp3,客户端上录音是wxfile://...
  • 最近在开发中有开发微信公众号,使用公众号来调起微信扫码功能。开发完后,让人感到困惑的是,如何来调试,项目的数据获取是内网,而公众号的接入是外网。 如下做法: 修改本机的host指向:127.0.0.1 xx.xxx....
  • 在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统下页面如何如何,...看着满满的测试汇总文档,我们曾经在一个又一个知名或不知名的手机终端上...
1 2 3 4 5 ... 20
收藏数 824
精华内容 329