微信开发者工具和手机联调_微信开发者工具联调 - CSDN
  • 微信开发者工具项目演示 配置: 我这里是选择 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 

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

    (三)结束语

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


    展开全文
  • 真机调试有两种:扫描二维码真机调试,自动真机调试。 选择自动真机调试,前提: 这样改了js代码就不用重新使用微信扫码调试了。

    真机调试有两种:扫描二维码真机调试,自动真机调试。

    选择自动真机调试,前提:

    这样改了js代码就不用重新使用微信扫码调试了。

    展开全文
  • 为帮助开发者更方便、更安全地开发调试基于微信的网页,微信推出了 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开发者工具使用的简单介绍就到这里,感谢你的翻阅,如果你有所疑问可以留言讨论!

    展开全文
  • 如果想测试一下自己拿到 appid secret是不是正确的,可以通过在线接口调试工具进行测试 官方地址:https://mp.weixin.qq.com/debug/ 使用方式如下图 , 这个工具还是挺好用的按内容输入,然后点击检查问题就可以...

    番外话,写一篇工具类的博文

    如果想测试一下自己拿到 appid 和 secret 是不是正确的,可以通过在线接口调试工具进行测试

    官方地址:https://mp.weixin.qq.com/debug/

    使用方式如下图 , 这个工具还是挺好用的按内容输入,然后点击检查问题就可以了,这个是测试获取基础 token 的

    展开全文
  • 一、微信小程序web开发工具下载地址 1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目 2.1 微信小程序web开发工具...
  • 最近开始使用uni-app做项目,在爬坑中度过半月,昨天到了联调部分,发现之前引入的uniFly请求库有跨不过去的坑,临时决定换axios,换上后,发现在小程序无法运行,话不多说,先贴代码: import Axios from '../...
  • //启动项目(微信小程序) npm run dev:mp-weixin //启动项目(h5) npm run dev:h5 //启动项目(app平台) npm run build:app-plus (也就是App平台运行调试不支持cli方式,需在HBuilderX中运行调试) //启动...
  • 刚刚开始学习uni-app,不知道微信开发者工具,运行到页面是咋回事。后来接触了一下,发现蛮好用的,这个功能可以联调你需要的某一页面。 每次联调项目时,Hbuilder X每次都要重新编译到初始默认的首页,然后要...
  • 微信公众平台为公众号开发者提供了网页版的接口调试工具开发者可以直接在网页中调用对应的接口,比如获取access_token接口,创建菜单接口,发送消息接口 等等。 先看一下界面,访问: ...一、接口类型:因为...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • 今天在用微信小程序时,竟然获取不到服务器的数据,我一惊,...好嘛,那我就用开发者工具的真机调试,纳尼居然有数据…好,那我在用预览,结果没数据。 解决:点击小程序右上角的三点,选择“打开调试”就可以了 ...
  • a、服务器地址(URL) 是开发者用来接收微信消息事件的接口URL。 b、令牌(Token) 是自定义的。 测试环境 公众号 设置 (用于本地环境测试) 【开发】 -->【开发者工具】–> 【公众平台测试账号】 登录...
  • 在这篇微信公众平台开发教程中,我们将介绍如何进行微信公众平台上的开发调试方法。   一. 使用微信公众平台接口调试工具 进入地址 https://mp.weixin.qq.com/debug/, 在接口类型中选择要调试的类型...
  • 调试微信网页,当然首推微信官方的开发者工具了 但是这个开发者工具只能调试服务端的网页,如果每次都去服务端发布,那效率也太低了,所以本地调试是当务之急 网上搜了很多,不是用各种工具就是抓包,实在是繁琐,...
  • 不管是本机还是同一个局域网下其他电脑,开启的wampserver服务器,都可以让本机电脑请求到...当然只有电脑“微信开发者工具”可以请求到数据,而调试的时候,手机是请求不到数据的 2. 请求的URL是IP地址:http:...
  • 到后期调试接口,首先出现的问题可能就是“你请求的域名不合法”这个问题,你可以去微信开发者工具里面看看,你的小程序上面都绑定了那些域名,看看后台给你的接口在不在这三个之间,如果说你这个没有绑定任何域名,...
  • 第一步,打开微信开发者工具,切换为【公众号网页调试】   第二步、菜单json 如果后端是由你开发的,你理所当然认识以下这些内容,如果你不认识,那么发给你们的后端,他们肯定认识。让他们给你即可。 { "...
  • 在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统下页面如何如何,...看着满满的测试汇总文档,我们曾经在一个又一个知名或不知名的手机终端上...
  • 微信小程序入门

    2019-02-13 10:53:18
    微信开发者工具主要功能介绍 1.新版本的微信开发者工具会自动将修改后的页面显示出来,不需要我们执行编译,只需要ctrl+s保存即可。 2.控制台Sources下面的js文件中,带sm的是原始的js文件,不带sm的是执行编译...
1 2 3 4 5 ... 20
收藏数 832
精华内容 332
关键字:

微信开发者工具和手机联调