• 微信开发者工具的用途  开发微信小程序和公众号网页开发   小程序  添加小程序项目  在小程序的管理页面可以增删项目    添加小程序可以使用小程序公众号的appid,也可以不使用(一些功能不能使用) ...

    微信开发者工具的用途

      开发微信小程序和公众号网页开发

      

    小程序

      添加小程序项目

        在小程序的管理页面可以增删项目

        

          添加小程序可以使用小程序公众号的appid,也可以不使用(一些功能不能使用)

          

      小程序编辑器功能

        头部是编辑器的基本功能,包括打开关闭新建文件,编辑设置,界面,快捷键之类的设置

        

        左上角是用户的信息和用户要是否要显示模块

        

        左边是选择手机型号,预览百分比,信号选择,页面预览,打开路径,场景值(怎么进入小程序的区别),页面参数等信息

        

        中间上边是编译,调试,预览,远程调试,切后台(点击后就弹出场景值),清除各种缓存

        

        右上角是上传到腾讯服务器,测试服务器的按钮,上传需要填写必要的信息

        

        点开右上角的详情是这个项目的基本配置信息。基出调试库是sdk的版本版本越高功能越强大。项目配置主要是代码转移,压缩,补全,是否检验域名。域名信息主要是在小程序平台配置的安全域名,微信会根据域名验证是否安全。腾讯云状态我理解是项目在腾讯云部署的话一些配置

        

     

        

                   

        代码编辑左边是目录列表,右边是单个文件代码

        

        小程序调试工具

          console:代码输出,报错

          source:当前项目编译后的脚本文件

          network:观察请求的情况

          security:看着像是安全方面的东西,有人懂给我讲一下

          stroage:显示当前stroage存储情况

          appData:显示当前页面data数据情况

          wxml:页面结构和对象的css

          sensor:模拟地理位置和重力感应

          trace:我研究这是链接手机调试的东西,没太搞懂

        

    公众号开发

      编辑器头部只有前进后退一些基本功能,输入框里面是调试的网页链接

      

      展示区基本上一样

      

      调试区跟chrome的一样

      

    小程序示例

      搜小程序示例。示例是腾讯的demo,可以让人快速的了解上手开发。地址https://github.com/Hao-Wu/WeApp-Demo

    小程序开发助手

      搜小程序开发助手。管理开发进度和线上版本

      

    vue开发小程序

      由美团实现的vue开发小程序简称mpvue。官网(http://mpvue.com/)

     

     

     

     

     

     

     

     

     

     

     

     

     

     

        

     

        

     

    转载于:https://www.cnblogs.com/lichunjing/p/8651154.html

    展开全文
  • 在头像后边有三个按钮: ...编译模式:普通编译和自定义编译条件 ...远程调试:真机的远程调试功能,会通过我们的网络连接对我们手机运行的小程序进行一个调试 切后台:切后台按钮会帮助我们快速的切到不...

    这里写图片描述
    个人中心:点击头像显示的是个人中心面板,展示的是小程序版本以及系统版本更新之后的一个推送消息,也方便我们去切换我们的小程序账号
    在头像后边有三个按钮:
    模拟器,编辑器和调试器:点击来显示或隐藏相应的模块
    编译模式:普通编译和自定义编译条件
    预览:在真机预览
    远程调试:真机的远程调试功能,会通过我们的网络连接对我们手机运行的小程序进行一个调试
    切后台:切后台按钮会帮助我们快速的切到不同的场景值,通过这个场景值可以帮助我们去个性化一些我们的功能需求
    清缓存:我们可以清楚我们开发者工具和我们调试设备的一个数据缓存,文件缓存,授权缓存,网络缓存和我们的登录状态
    上传,测试,腾讯云,详情
    上传会帮助我们把本次的小程序代码上传到我们的管理后台,会默认的设置为我们的开发版本
    小程序都有哪些版本?
    这里写图片描述
    预览版本:在手机上预览在我们手机上是一个怎样的表现
    开发版本:通过上传之后把我们的本地代码。上传成一个具有版本号的小程序的应用,那么应用开发者权限的成员可以通过小程序开发助手来看到我们的开发版本
    体验版本:就是我们在小程序管理后台可以直接将我们的开发版本切换成我们的体验版本,具有体验权限的成员就可以看到体验版本
    如果我们要将我们的开发版本上线成一个线上版本的话,我们需要先去提交审核,提交审核之后,我们的小程序就称为了一个审核版本的小程序,那么微信通过我们的审核之后,我们的小程序就正式的发布上线了。

    测试按钮:测试按钮我们可以通过每24小时生成一个测试报告。微信会给我们随机的分配4到8种的机型测试我们的小程序页面的一个首屏加载时间,CPU占比等这些指数
    腾讯云:第三方平台,可以快速的帮助我们构建一个小程序的开发环境和线上环境
    点击详情,会弹出一个详情的面板,可以通过一些项目的设置,还可以看到我们一些域名信息,腾讯云的状态
    项目设置:可以设置调试的一个基础库版本,
    可以设置编译的配置:Es6转ES5等等

    调试模块:
    主要分为七个模块
    这里写图片描述
    console: 打印小程序页面的调试log信息
    sources:会列出微信小程序页面的所有脚本文件
    Network:展示网络请求的状态信息
    Stroge:在小程序里面通过调用wx.setStroge和wx.setStrogeSycc函数设置我们的缓存的时候,在这里可以动态的修改这些缓存数据
    APPData: 是微信小程序页面上真实展示的一个数据,可以在这里动态的修改,来查看我们小程序页面在模拟器上不同设备的一个兼容性的情况
    wxml 页面:展示了微信小程序页面 的各个组件元素以及我们可以通过对这些组件元素。对它进行一个样式属性的修改
    sensor:只要是我们的一个地址位置信息和一个设备旋转角度的一个展示,在这里我们可以动态的去修改我们的地理位置信息来模拟我们小程序在不同地理位置下的一个表现,在设备旋转角度这里,我们可以设置旋转角度的参数来查看它的一个设备的旋转角度,可以看到各个坐标轴的变化

    OK,这就是对开发者工具详解。

    展开全文
  • 工具栏 人头像-个人中心:展示小程序系统版本更新后的一个推送消息。... ... 普通编译:我们可以选择添加编译模式自定义编译条件,如启动页面和页面的启动参数,已经...远程调试(真机调试):通过网络连接对我们手机...

    工具栏

    在这里插入图片描述

    人头像-个人中心:展示小程序系统版本更新后的一个推送消息。方便的切换小程序账号
    头像旁边的3个按钮,我们可以点击他们去控制相应的模块的显示或隐藏

    普通编译:我们可以选择添加编译模式自定义编译条件,如启动页面和页面的启动参数,已经我们需要进入的一些场景值

    预览 :让本地的代码实时的在真机上预览,点击该按钮,他会生产一个二维码,用真机扫描即可

    远程调试(真机调试):通过网络连接对我们手机运行的小程序进行一个调试。

    切后台:快速去切到不同的场景值,通过这个场景值,我们可以去个性化一些,我们的需求功能。

    清缓存:我们可以去清除我们开发者工具和我们调试设备的数据缓存,文件缓存,搜全缓存,网络缓存,登录状态

    在这里插入图片描述
    上传:本次代码上传到我们的管理后台,默认设置为一个开发版本。确认后。填写版本和备注
    在这里插入图片描述

    小程序5大版本:
    在这里插入图片描述

    - 就是左侧的模拟器- 预览版本
    - 上传成功后成一个具有版本号的应用 - 开发版本。
       有开发权限的成员可以通过小程序开发助手来看我们-开发版本。
    
    - 小程序管理后台可以直接将我们的开发版本切换成我们的体验版本
       具有体验权限的成员就可以看到我们这样的一个体验版本
    
    - 开发版本上线 - 提交审核后- 审核版本 - 审核成功 - 线上版本
    
    *测试按钮-新版本没有放到工具栏,在菜单栏 - 工具- 自动化测试
    *测试:每24小时生生一个测试报告,微信会给我们随机分配4-8种机型来测试页面首屏加载时间,cpu占比
    		
    *腾讯云:新版是在创建工程的时候的一个选项,它是一个第三方平台,快速构建一个小程序的开发环境和线上环境。
    
    
    
    • 详情: 通过一些项目设置,看一些域名信息和状态,切换调试的基础库,设置一些编译的配置ES6转ES5上传代码的时候,自动补全一个样式
      在这里插入图片描述

    模拟器

    • 小程序的模拟器- 可以切换模拟器机型,网络状态和屏幕缩放。
      在这里插入图片描述

    调试模块:

    在这里插入图片描述

    • console: 打印页面的一些调试log信息
    • sources:列出小程序页面的所有脚本文件,我们可以对这些文件,进行断点调试。

    在这里插入图片描述

    • network:展示各个网络请求的一个状态信息,以及我们所请求资源的一个响应数据等。

    • storage:通过调用wx.setStorage和wx.setStorageSync这个函数,设置缓存时,可以动态去修改这些缓存数据

    • appData:微信小程序页面上真实展示的一个数据,也可动态的修改来查看我们小程序页面在模拟器上不同设备的兼容性情况

    • wxml:展示微信小程序页面的各个组件元素,也可对组件元素样式属性的修改

    • sensor:地理位置信息,设备旋转角度的展示。在这里可以动态去修改我们的地理位置信息,来模拟小程序页面在不同地理位置下的表现。

    在这里插入图片描述

    • 可以拖拽这个图片,来查看它的一个设备的旋转角度
    展开全文
  • 只能在微信里打开?小样,图样图森破,限制了oauth、微信浏览器内打开,照样能看你源码~ 使用fiddler来抓包 需要先做一些简单的准备工作: 一台带有无线网卡的PC或者笔记本电脑,然后将电脑和手机连接到同...

    在朋友圈看到一款疯转的H5小游戏,想要copy,什么?只能在微信里打开?小样,图样图森破,限制了oauth、微信浏览器内打开,照样能看你源码~


    使用fiddler来抓包

    需要先做一些简单的准备工作:

    • 一台带有无线网卡的PC或者笔记本电脑,然后将电脑和手机连接到同一个Wi-Fi网络中,并且保证二者是在同一个ip网段内的

    • 在电脑上安装 Fiddler;

    • 打开Fiddler在菜单栏中点击 Tools - Fiddler Options - Connections 中按照如下配置后重启下fiddler:


      wechat_fiddler_01.jpg

    很好理解,即允许远程设备使用本机联网.

    好了,可以重启fiddler软件了,重启完毕后把软件最大窗口,不然你可能看不懂怎么没有找到那个该死的Online图标?在工具条的最右边,鼠标移到那个Online上,看图:(转载请注明出处:猿资猿味)

    wechat_fiddler_02.jpg

    找到无线局域网内分配到本机的ip,上图是192.168.0.4.具体各位自行找到,不要找错了,确定后才能有用.

    重点来了,掏出手机,打开手机的网络设置,把网络设置中的代理设置为192.168.0.4,端口号填8888.以IOS手机为例,"设置"->"Wi-Fi",看图,点那个"i":

    wechat_fiddler_03.jpg

    找到"HTTP代理",选择"手动",填上电脑的IP(192.168.0.4)和端口(8888),看图:(转载请注明出处:猿资猿味)

    wechat_fiddler_04.jpg

    好了,现在正常情况下用手机产生http请求的数据都会在电脑上的fiddler上显示出来了,如果不行请自行排查IP是否设错,或者是不是没有同处于一个局域网下,或者没有开启fiddler的允许远程用8888端口访问网络...这些个前提要确认好.


    如果对方是https的怎么办?没问题,装个扩展插件:CertMaker for iOS and Android 步骤如下:

    • 安装 CertMaker for iOS and Android 用来抓HTTPS的数据包;

    • 打开Fiddler,点击菜单栏上的 Tools - Fiddler Options - HTTPS,勾选上Decrypt HTTPS traffic ,然后重启Fiddler;

    • 打开手机,访问本机IP+8888,例如:192.168.0.4:8888, 点击 You can download the FiddlerRoot certificate 按照提示,在手机上安装证书,重启手机浏览器。


    好了,https照样能抓了.接下来教大家如何看源码.

    再装一个扩展:Syntax-Highlighting Add-Ons,下载地址都在上面那个地址里了,找一下就有了,安装上重启fiddler.


    实战操作演练

    https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6f3020ce6c245df0&redirect_uri=http%3A%2F%2Fw.k189.cn%2Findex.php%2FHuoDong%2FFlowhongbao%2Findex&response_type=code&scope=snsapi_base&state=123&connect_redirect=1#wechat_redirect 以这个活动为例,在电脑上是打不开的,但是在微信里面能打开,因为有oauth2.0嘛.

    在手机的微信中打开此链接,会在fiddler软件里显示全部http请求哦,看图:(转载请注明出处:猿资猿味)

    wechat_fiddler_05.jpg

    这个看到了吧,就是那么简单,js,html,图片都会显示出来的,看源码可以说是不费吹灰之力,仿佛是和用Chrome浏览器F12看源码一样,哦呵呵呵~

    双击上图圈出来的url,右侧会把详情显示出来,点"SyntaxView"且看下图:(转载请注明出处:猿资猿味)

    wechat_fiddler_06.jpg

    这时你可能要叫起来了,艹艹艹擦哦,怎么是乱码?骚年,Don't worry.没看到上面还有句英文写着吗?翻译过来大概意思也就是说:"响应可能需要解码才能看,点我格式下他"(不要吐槽我的英文,只可意会不可言传).就是让你点它呗,点了你会发现,amazing!

    wechat_fiddler_07.jpg

    好了,都是看得懂的东西了,我也就不废话了,其他的JS文件一样能看的,还帮你格式化过了.

    其实呢,我等用fiddler工具用来抄袭别人的源码,是侮辱了这个工具的强大性,因为fiddler还能替换掉请求的某个加载文件,达到调试方便的目的,具体使用方法大家自行查阅相关资料.


    话又说回来,中国的网民和用户,不管你的内容来自哪里,他们只管有没有得到我想要的东西。所以“原创”这个东西……此段摘自卢松松的感慨(转载请注明出处:猿资猿味)


    展开全文
  • 为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。 使用公众号网页调试,开发者可以调试...

    概览

    为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。

    使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK详情

    使用小程序调试,开发者可以完成小程序的API和页面的开发调试、代码查看和编辑、小程序预览和发布等功能

    为了更好的开发体验,我们从视觉、交互、性能等方面对开发者工具进行升级,推出了1.0.0版本
    1
    在原有功能的基础上,新增了两个开发辅助功能:

    使用腾讯云,快速搭建小程序后台运行环境

    申请测试报告,了解小程序在真实的移动设备上运行性能和运行效果。
    1
    1
    注意:因为申请测试会占用测试机器资源,所以一个 APPID 一天只能申请一次测试报告。

    界面

    启动页

    登陆页

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

    模式选择

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

    公众号网页调试。选择公众号网页调试,将直接进入公众号网页项目调试界面,在地址栏输入 URL,即可调试该网页的微信授权以及微信 JS-SDK 功能

    小程序调试。选择小程序调试,将进入小程序本地项目管理页,可以新建、删除本地的项目,或者选择进入已存在的本地项目。
    1

    新建项目

    当符合以下条件时,可以在本地创建一个小程序项目

    需要一个小程序的 AppID;如没有 AppID,可以选择申请使用测试号

    登录的微信号需要是该AppID 的开发者

    需要选择一个空目录,或者选择的非空目录下存在 app.json 或者 project.config.json。当选择空目录时,可以选择是否在该目录下生成一个简单的项目
    1

    多开项目

    工具支持同时打开多个项目,每次打开项目时会从新窗口打开,入口有以下几种:

    从项目选择页打开项目,处于项目窗口时可以从菜单栏的项目 -> 查看所有项目打开项目选择页

    从菜单栏的最近打开项目列表中打开的项目会从新窗口打开

    新建项目

    命令行或 HTTP 调用工具打开项目

    管理项目

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

    主界面

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

    菜单栏

    微信web开发者工具

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

    关于:关于开发者工具

    检查更新:检查版本更新

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

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

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

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

    退出:退出开发者工具

    项目

    新建项目:快速新建项目

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

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

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

    文件

    新建文件

    保存

    保存所有

    关闭文件

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

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

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

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

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

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

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

    设置

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

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

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

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

    工具栏

    点击用户头像可以打开个人中心,在这里可以便捷的切换用户和查看开发者工具收到的消息
    1
    用户头像右侧是控制主界面模块显示/隐藏的按钮。至少需要有一个模块显示
    1
    工具栏中间,可以选择普通编译,也可以新建并选择自定义条件进行编译和预览。

    通过切后台按钮,可以模拟小程序进入后台的情况
    1
    工具栏上提供了清缓存的快速入口。可以便捷的清除工具上的文件缓存、数据缓存、还有后台的授权数据,方便开发者调试。

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

    工具栏管理

    在工具栏上点击鼠标右键,可以打开工具栏管理
    1

    模拟器

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

    开发者可以选择不同的设备,也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。1
    在模拟器底部的状态栏,可以直观地看到当前运行小程序的场景值,页面路径及页面参数

    独立窗口

    点击 模拟器/调试器 右上角的按钮可以使用独立窗口显示 模拟器/调试器1
    1

    设置页

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

    外观设置

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

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

    编辑设置

    修改文件时自动保存 编译时自动保存所有文件 文件保存时自动编译小程序 自动折行 用空格代替Tab 代码缩略图 总是在新标签页打开文件 Git 比较文件内容时,忽略 Windows风格回车符

    Tab大小
    

    如果选中了 “总是在新标签页打开文件”,则在编辑器目录树点击文件时,总是会在一个新标签页中打开此文件,而非在临时标签页中打开。
    1

    代理设置

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

    通知设置

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

    项目页卡

    项目页卡主要有三大功能

    显示当前项目细节

    包括图标、AppID、第三方平台名(只有第三方平台的开发小程序才会显示)、目录信息、上次提交代码的时间以及代码包大小。

    基础库版本切换

    开发者可以在此选择任意基础库版本,用于开发和调试旧版本兼容问题。
    1

    项目设置

    微信小程序运行在三端:iOS、Android 和 用于调试的开发者工具;三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的:

    在 iOS 上,小程序 javascript代码是运行在JavaScriptCore中,是由WKWebView 来渲染的,环境有iOS8、iOS9、iOS10

    在 Android 上,小程序的javascript代码是通过X5 JSCore来解析,是由 X5 基于Mobile Chrome 53/57内核来渲染的

    在开发工具上,小程序的javascript代码是运行在nwjs中,是由Chrome Webview来渲染的

    尽管三端的环境是十分相似的,但是还是有些许区别:

    ES6 语法支持不一致

    wxss 渲染表现不一致。尽管可以通过开启样式补全来规避大部分的问题 ,还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。

    ES6 转 ES5

    在 0.10.101000 以及之后版本的开发工具中,会默认使用 babel 将开发者 ES6 语法代码转换为三端都能很好支持的 ES5 的代码,帮助开发者解决环境不同所带来的开发问题

    需要注意的是:为了提高代码质量,在开启 ES6 转换功能的情况下,默认启用 javasctipt 严格模式

    样式补全

    开启此选项,开发工具会自动检测并补全缺失样式,保证在低版本系统上的正常显示。尽管可以规避大部分的问题 ,还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。

    压缩代码

    开启此选项,开发工具在上传代码时候将会帮助开发者压缩 javascript 代码,减小代码包体积

    不校验请求域名及 TLS 版本

    正式发布的小程序的网络请求是需要校验合法域名以及域名的 TLS 版本,可以在 mp 管理后台进行配置。 在开发过程中可以开启此选项,开发工具将不会校验安全域名以及TLS 版本,帮助在开发过程中更方便的完成调试工作。
    1

    启用多核心编译

    在四核及以上的电脑上此选项可见。启用此选项,会充分利用 CPU 资源来编译项目的 JS 代码,提高编译的效率。可以选择关闭此选项

    域名信息

    将显示小程序的安全域名信息,合法域名可在mp管理后台进行设置。
    1

    腾讯云状态

    使用腾讯云功能,可以在这里看到腾讯云状态、开发环境信息和域名信息。1

    快捷键

    1
    1
    1

    代码编辑

    编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作

    文件格式

    因iOS下仅支持 UTF8 编码格式,最新版本的开发者工具会在上传代码时候对代码文件做一次编码格式校验。

    文件支持

    工具目前提供了 5 种文件的编辑:wxml、wxss、js、json、wxs 以及图片文件的预览。

    文件操作

    新建页面有两种方式

    在目录树上右键,选择新建 Page,将自动生成页面所需要的 wxml、wxss、js、json

    在 app.json 的 pages 字段,添加需要新建的页面的路径,将会自动生成该页面所需要的文件

    自动保存

    编辑代码后,工具会自动帮助用户保存当前的代码编辑状态,直接关闭工具或者切换到别的项目,并不会丢失已经编辑的文件状态,但需要注意的是,只有用户主动保存文件,修改内容才会真实的写到硬盘上。

    如果设置中开启了 “修改文件时自动保存”(设置-编辑设置-修改文件自动保存),工具在修改文件时会自动保存到硬盘中,无需手动保存的效果。

    设置中开启 “编译时自动保存所有文件”(设置-编译设置-编译时自动保存所有文件),在点击编译时自动保存所有文件的效果。

    实时预览

    如果设置中开启了 “文件保存时自动编译小程序”(设置-编辑设置-保存时自动编译小程序),那么当 wxml、wxss、js、json 文件修改时,可以通过模拟器实时预览编辑的情况:

    注意:如果同时开启了 ”修改文件时自动保存“ 的设置,编译动作会有一定的延迟,来避免频繁的编译,手动点击编译按钮将立即编译。

    自动补全

    同大部分编辑器一样,工具提供了较为完善的自动补全

    js 文件编辑会帮助开发补全所有的 API 及相关的注释解释,并提供代码模板支持

    wxml 文件编辑会帮助开发者直接写出相关的标签和标签中的属性

    json 文件编辑会帮助开发者补全相关的配置,并给出实时的提示

    js 补全1
    代码模板支持1
    json 补全1
    wxml 补全1

    Git 状态展示

    如果所在的小程序工程目录(project.config.json 所在目录)存在 Git 仓库,编辑器可以展示目前的 Git 状态。

    目录树

    如图所示,当某些文件存在变动时,目录树的文件右侧将展示相应的图标来表明这一状态。当某一处于收起状态的目录下存在有变动的文件时,此目录的右侧亦会展示一个圆点图标表明此情况。

    文件图标状态的含义如下:1

    图标 含义
    U 文件未追踪(Untracked)
    A 新文件(Added, Staged)
    M 文件有修改(Modified)
    +M 文件有修改(Modified, Staged)
    C 文件有冲突(Conflict)
    D 文件被删除(Deleted)

    文件夹目录图标状态的含义如下:

    图标 含义
    小红点 目录下至少存在一个删除状态的文件
    小橙点 目录下至少存在一个冲突状态的文件
    小蓝点 目录下至少存在一个未追踪状态的文件
    小绿点 目录下至少存在一个修改状态的文件

    如果某一文件存在修改(Modified),可以右键点击此文件,并选择 “与上一版本比较”,则可以查看当前工作区文件与 HEAD 版本的比较。11

    文件编辑

    存在Git仓库时,状态栏会展示此Git仓库目前的分支信息。例如,下图表明目前Git仓库处于v2分支。1
    同时,编辑文件内容时,将会在所编辑代码左侧实时显示相对于上一版本内容的比较1
    样式说明如下:

    文件夹目录图标状态的含义如下:

    样式 含义
    蓝色线条 此处的代码有变动
    绿色线条 此处的代码是新增的
    红色三角箭头 此处有代码被删除

    Windows 风格回车设置

    如需忽略 Windows 风格的回车符,可以前往 “设置” - “编辑”,并勾选 “Git 比较文件内容时,忽略 Windows 风格回车符”。勾选后,在编辑文件进行内容比较时,所有 Windows 风格的回车符将被当作 Unix 风格的回车符对待。

    项目配置文件

    可以在项目根目录使用 project.config.json 文件对项目进行配置。

    字段名 类型 说明
    miniprogramRoot Path String 指定小程序源码的目录(需为相对路径)
    qcloudRoot Path String 指定腾讯云项目的目录(需为相对路径)
    pluginRoot Path String 指定插件项目的目录(需为相对路径)
    compileType String 编译类型
    setting Object 项目设置
    libVersion String 基础库版本
    appid String 项目的 appid,只在新建项目时读取
    projectname String 项目名字,只在新建项目时读取
    packOptions Object 打包配置选项
    scripts Object 自定义预处理

    compileType 有效值

    名字 说明
    miniprogram 当前为普通小程序项目
    plugin 当前为小程序插件项目

    setting 中可以指定以下设置

    字段名 类型 说明
    es6 Boolean 是否启用 es6 转 es5
    postcss Boolean 上传代码时样式是否自动补全
    minified Boolean 上传代码时是否自动压缩
    urlCheck Boolean 是否检查安全域名和 TLS 版本

    scripts 中指定自定义预处理的命令

    名字 说明
    beforeCompile 编译前预处理命令
    beforePreview 预览前预处理命令
    beforeUpload 上传前预处理命令

    packOptions

    packOptions 用以配置项目在打包过程中的选项。打包是预览 、上传时对项目进行的必须步骤。

    目前可以指定 packOptions.ignore 字段,用以配置打包时对符合指定规则的文件或文件夹进行忽略,以跳过打包的过程,这些文件或文件夹将不会出现在预览或上传的结果内。

    packOptions.ignore 为一对象数组,对象元素类型如下:

    字段名 类型 说明
    value string 路径或取值
    type string 类型

    其中,type 可以取的值为 folder、file、suffix、prefix,分别对应文件夹、文件、后缀、前缀。示例配置如下。

    {
      "packOptions": {
        "ignore": [{
          "type": "file",
          "value": "test/test.js"
        }, {
          "type": "folder",
          "value": "test"
        }, {
          "type": "suffix",
          "value": ".webp"
        }, {
          "type": "prefix",
          "value": "test-"
        }]
      }
    }

    注: value 字段的值不支持通配符、正则表达式。若表示文件或文件夹路径,以小程序目录 (miniprogramRoot) 为根目录。

    项目配置示例:

    {
      "miniprogramRoot": "./src",
      "qcloudRoot": "./svr",
      "setting": {
        "postcss": true,
        "es6": true,
        "minified": true,
        "urlCheck": false
      },
      "packOptions": {}
    }

    小程序调试

    程序调试主要有三大功能区:模拟器、调试工具和小程序操作区

    模拟器

    模拟器模拟微信小程序在客户端真实的逻辑表现,对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。1

    自定义编译

    点击工具栏中的编译按钮或者使用快捷键 Ctrl(⌘) + B,可以编译当前代码,并自动刷新模拟器。

    同时为了帮助开发者调试从不同场景值进入具体的页面,开发者可以添加或选择已有的自定义编译条件进行编译和代码预览(如图)。

    注:编译条件跟项目相关,每个项目可以保存自己相关的编译条件1

    编译异常信息

    在预览或上传的过程中,可能会出现编译异常信息。1
    忽略上传的文件:在项目文件夹下,某些文件可能不是小程序运行所需的,例如 readme 文档、.gitignore 文件等。为了优化大小,在预览和上传的过程中,这些文件将不会被打包。

    体积过大的文件:如果勾选了 ES6 转 ES5 或代码压缩的选项,为了优化编译速度,对于某些体积很大的 JS 文件,工具会跳过对这些文件的处理。

    自定义预处理

    1
    在项目设置页卡,我们提供了以下几个默认的预处理,可以解决大部分的代码文件预处理的问题

    ES6 转 ES5(可以应用于编译、预览、上传),使用 "babel-core": "^6.26.0"

    上传代码时样式自动补全,使用 "postcss": "^6.0.1"

    上传代码时自动压缩,使用 "uglify-js": "3.0.27"

    对于高级开发者来说,完全可以自己编写自动化构建脚本对代码文件进行预处理,所以我们提供了 启用自定义处理命令 选项 开发者可以指定 编译前/预览前/上传前 需要预处理的命令 开发者工具使用 shell 的方式运行指定的命令,并在控制台中输出命令的执行日志

    预处理命令的执行顺序

    自定义预处理命令 --- 默认预处理命令 --- 编译/预览/上传

    注:编译前预处理命令,需要手动点击 "编译" 按钮,或者使用快捷键编译才能触发。文件修改无法触发该命令。

    Mac 版本的开发者工具无法复用 bash 中的 Path 环境变量。可能需要手动设置系统的 Path 环境变量,才能正常执行命令。

    前后台切换

    工具栏中前后台切换帮助开发者模拟一些客户端的环境操作。例如当用户从小程序中回到聊天窗口,会触发一个小程序被设置为后台的回调。1

    调试工具

    调试工具分为 7 大功能模块:Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace

    Wxml panel

    Wxml panel 用于帮助开发者开发 wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性,同时可以通过修改对应 wxss 属性,在模拟器中实时看到修改的情况(仅为实时预览,无法保存到文件)。通过调试模块左上角的选择器,还可以快速定位页面中组件对应的 wxml 代码。1

    Sources panel

    Sources panel 用于显示当前项目的脚本文件,同浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以在 Sources panel 中开发者看到的文件是经过处理之后的脚本文件,开发者的代码都会被包裹在 define 函数中,并且对于 Page 代码,在尾部会有 require 的主动调用。1
    注:当代码运行到断点的时候,整个小程序都停止了,所以模拟器会出现白屏或者无法操作的情况

    AppData panel

    AppData panel 用于显示当前项目运行时小程序 AppData 具体数据,实时地反映项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。1

    Storage panel

    Storage panel 用于显示当前项目使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。

    可以直接在 Storage panel 上对数据进行删除(按 delete 键)、新增、修改1

    Network panel

    Network Panel 用于观察和显示 request 和 socket 的请求情况1
    注:uploadFile 和 downloadFile 暂时不支持在 Network Panel 中查看

    Console panel

    Console panel 有两大功能:

    1.开发者可以在此输入和调试代码1
    2.小程序的错误输出,会显示在此处1
    在控制台中可以输入以下命令

    build: 编译小程序

    preview: 预览

    upload: 上传代码

    openVendor: 打开基础库所在目录

    openToolsLog: 打开工具日志目录

    checkProxy(url): 检查指定 url 的代理使用情况

    Sensor panel

    Sensor panel 有两大功能:

    1.开发者可以在这里选择模拟地理位置1
    2.开发可以在这里模拟移动设备表现,用于调试重力感应 API1

    自定义数据上报

    开发者工具上可以编辑和调试自定义分析的数据上报功能,点击菜单栏中的 “工具 - 自定义分析” 即可弹窗打开自定义分析:1
    在页面中可以新建、查看或修改事件,在修改事件的页面中编辑完毕后,点击底部的保存并测试按钮将保存当前配置,同时工具将在调试器上提示收到最新配置,并展示配置信息,展示的内容包括事件的 ID 和名称,以及每个动作的触发条件和上报数据:11
    接着可以在模拟器中操作和触发事件。在模拟器中刷新小程序也将获取该测试配置,除非窗口被关闭。窗口关闭后模拟器不会再收到配置。当事件被触发上报时,工具上会展示上报信息,包括事件 ID、触发页面、触发方式、触发时动作、以及上报的字段值和数据:1
    同时可以在窗口中点击 “同步结果” 会同步显示上报的数据:1
    关闭窗口后,配置将全部失效,模拟器不再收到配置并不再触发上报(小程序中使用 wx.reportAnalytics API 进行的数据上报仍会在工具中输出)。 测试成功后,可到小程序后台发布事件配置,即可正式生效收集所定义的事件数据。

    自动预览

    自动预览可以实现编写小程序时快速预览,免去了每次查看小程序效果时都要扫码或者使用小程序开发助手的麻烦。只需按下快捷键,保持前台运行的微信即可自动唤出或刷新小程序。要使用自动预览功能,需要配合 6.6.7 及以上的微信客户端版本。1
    要开始使用 “自动预览” 功能,可以在打开预览二维码的时候,点击 “自动预览” 标签以切换到自动预览模式。切换到自动预览模式后,只需按下预览快捷键,或者点击浮窗上的 “编译并预览” 按钮,即可触发自动预览。此时工具会上传代码,保持前台运行的微信客户端会自动刷新当前开发的小程序。

    当自动预览成功时,工具栏上的预览图标会显示为一个绿勾。如果预览出错,则会显示为一个红色惊叹号,可以点击查看详情。

    注意,自动预览功能仅限与登陆开发者工具的同账号微信使用。如需换回普通预览模式,只需要点击 “扫描二维码预览” 标签即可。

    用户可以在快捷键设置里自定义预览快捷键。1

    特殊场景调试

    小程序开发者工具是对微信客户端的模拟,受限于桌面设备同移动设备的差异,以及微信的一些特有数据,同时考虑到开发的便捷性,部分 API 在工具和微信中有所不同。

    扫码接口

    同手机端直接调用摄像头来扫码不同,在 PC 或者 Mac 上调用摄像头来扫码完成调试是一个低效的行为,所以在开发工具上调用二维码扫码 API 后,开发者可以选择一个本地的图片来进行后续的逻辑调试,而不是真正的启用摄像头来扫码,流程有所不同,但是接口的输入和输出是一致的。

    微信支付

    最新版本的开发者工具已经支持微信支付的调试,但是为了兼顾到安全,同手机上直接调用微信支付有所不同:

    新绑定的开发者需要 24 小时后才有权限进行微信支付的调试
    开发者在工具上调用微信支付的 API 后,开发工具会出现一个二维码,开发者必须使用当前开发所使用的微信号扫码后在手机上完成支付的流程;工具会同步移动端微信支付的回包到工具中,开发者自行进行后续的操作;使用的交互有所不同,但是接口的输入输出工具同客户端是保持一致的。

    启动使用自定义参数

    在日常使用中,用户可以通过扫码、分享打开一个小程序,这时候会依据设置的启动页面:path 跳转到对应的小程序页面(不一定是首页)并且可以携带参数:query。在开发者工具中,开发者同样可以通过自定义编译条件的方式来达到调试不同启动页面和启动参数的目的。

    例如下图是选择进入页面是 page/API/index,参数 是 name=can1

    进入场景值

    在微信客户端中,用户可能在各个场景下打开小程序 详情 ,然而在开发者工具中是没有真实的环境去模拟这些场景的。开发者可以通过条件编译的方式来达到调试不同场景的目的1

    普通的转发

    开发者工具上调用转发是一个模拟的行为,并不会真实的转发给用户,开发可以通过这个模拟行为判断是否正确的调用了转发 API。

    带 shareTicket 的转发
    带 shareTicket 的转发可以获取到更多的转发信息,例如群聊的名称以及群的标识 openGId。在小程序开发者工具上,开发者可以通过以下方式来调试带 shareTicket 的转发。

    调用 wx.showShareMenu 的参数 withShareTicket 为 true 时,点击模拟器右上角菜单后出现的转发按钮,会出现一个测试群列表,如图:1
    开发者点击选取任何一个群,可以通过接口的回包获取到 shareTicket ,通过调用 wx.getShareInfo 可以获取到相关转发的信息

    当开发者需要调试从某一个群点开,并且带有 shareTicket 的场景时,可以使用自定义编译中的 1044:群聊会话中的小程序消息卡片(带 shareTicket) 同时可以选择任一模拟测试群,如图1

    预览使用自定义编译条件

    同 启动使用自定义参数 相同,提交预览时,开发者可以通过自定义预览的方式来达到在移动设备上调试不同启动页面和启动参数 的目的。我们可以选择已经创建好的自定义编译条件进行预览。

    跳转小程序调试支持

    小程序跳转开发调试可以分为两个部分

    1.调试小程序是否能够正确的跳转

    出于小程序代码的安全考虑,在工具上调用 wx.navigateToMiniProgram 的时候,开发者工具不会真实的打开和跳转到另外的小程序,但是工具会判断当前小程序与需要跳转的小程序之间的绑定关系,输出相关信息给到开发者。开发者可以根据成功或者失败的回调函数来判断调用是否成功。

    2.调试被打开的小程序时候正确的接收参数

    选择 自定义编译 进入场景选择 1037 从小程序进入 可以调试小程序被打开时候是否接收到了正确的参数并做了相关处理。1
    选择 自定义编译 进入场景选择 1038 从小程序返回 可以调试小程序返回时候是否接收到了正确的参数并做了相关处理。1

    真机调试

    功能概述

    真机远程调试功能可以实现直接利用开发者工具,通过网络连接,对手机上运行的小程序进行调试,帮助开发者更好的定位和查找在手机上出现的问题。

    调试流程

    要发起一个真机远程调试流程,需要先点击开发者工具的工具栏上 “远程调试” 按钮。1
    此时,工具会将本地代码进行处理打包并上传,就绪之后,使用手机客户端扫描二维码即可弹出调试窗口,开始远程调试。

    远程调试窗口

    使用手机扫描此二维码,即可开始远程调试。

    要结束调试,直接关闭此调试窗口,或点击右下角 “结束调试” 按钮即可。1
    远程调试窗口分为两部分,分别是左侧的调试器视图、右侧的信息视图。开发者可以在调试器里直接进行代码的调试,并查看 Storage 情况;信息视图则可以查看目前与手机和服务器的连接情况,以及发生的错误信息等。

    调试器

    在远程调试的调试器里,开发者可以在 Console 面板里对代码进行调试,在 Sources 面板里查看小程序的源代码并进行断点单步调试,在 Storage 面板里查看小程序的 Storage 使用情况等。1
    注意,要在 Console 里对小程序进行调试,需要将调试的上下文切换到 VM Context 1,如图所示1
    在 Sources 面板查看源代码时,开发者所有的文件路径都是以 weapp:// 开头的1
    除了可以在调试器进行单步调试,开发者还能在代码中手动插入 debugger; 语句进行断点调试。因此,如果想要在小程序启动的尽早时刻断点,可以在进入远程调试之前,编辑代码手动在需要断点处的代码插入 debugger; 语句来实现。

    WXML、AppData、Storage 面板的操作和开发者工具调试模拟器时的操作一致。注意,如果在右侧信息视图取消勾选了 “使用工具端的 Storage”,则所有的 Storage 数据将被存储在手机上,将不再出现 Storage 面板。111

    信息视图

    1
    上面的信息视图展示了手机、网络连接的信息。手机信息展示手机的型号、系统、名称、微信版本等信息,以及通信延时。通信延时越小,与手机的通信越流畅。

    在 “连接信息” 里,展示了工具与服务器的连接信息,包括了连接状态、服务器状态等,当连接故障、服务器阻塞影响到调试的过程和流畅度时,此处将展示这一状态。当连接状态为 “已结束” 时,表明调试已被终止。

    “警告和错误” 展示了最近发生的错误和警告信息。如果网络连接断开,此处将会询问开发者是否需要重新连接。

    手机端展示

    调试过程中的手机端展示如下所示。

    当手机无网络或者进入了断点状态时,将会出现一个浮层提示并阻止进一步的操作。
    1

    命令行调试

    开发者工具提供了命令行与 HTTP 服务两种接口供外部调用,开发者可以通过命令行或 HTTP 请求指示工具进行登录、预览、上传等操作。

    命令行

    通过命令行调用安装完成的工具可执行文件,完成登录、预览、上传、自动化测试等操作。调用返回码为 0 时代表正常,为 -1 时错误。

    命令行工具所在位置:

    macOS: <安装路径>/Contents/Resources/app.nw/bin/cli

    Windows: <安装路径>/cli.bat

    1. 命令行启动工具

    -o, --open [projectpath]: 打开工具,如果不带 projectpath,只是打开工具。如果带 project path,则打开路径中的项目,每次执行都会自动编译刷新,并且自动打开模拟器和调试器。projectpath 不能是相对路径。项目路径中必须含正确格式的 project.config.json 且其中有 appid 和 projectname 字段。

    示例:

    cli -o //打开工具
    cli -o /Users/username/demo //打开路径 /Users/username/demo 下的项目
    1. 命令行登录

    命令行提供两种登录方式:一是将登录二维码转成 base64 给用户,让用户自己集成到自己系统中使用;二是将二维码打印在命令行中。

    -l, --login: 启动登录逻辑。

    --login-qr-output [format[@path]]: 指定二维码输出形式,format 可选值包括 terminal(命令行输出), base64, image。如果有填 path,表示结果输出到指定路径的文件中。如果没填 path,表示将结果输出到命令行。不使用此选项或使用了但没有填 format 的话则默认为命令行打印。

    示例:

    cli -l  //登录,在终端中打印登录二维码
    cli -l --login-qr-output base64  //登录,在终端中打印登录 base64 形式的二维码 
    cli -l --login-qr-output base64@/Users/username/code.txt  //# 登录,二维码转成 base64 并存到文件 /Users/username/code.txt
    1. 命令行提交预览

    预览时必须处于登录状态,如果没有登录,会提示需先登录。预览的二维码可命令行打印也可以转成 base64。ES6 等项目配置从 project.config.json 读。

    -p, --preview : 预览代码,project_root 指定项目根路径。

    --preview-qr-output [format[@path]]: 指定二维码输出形式,语义同登录用的选项 --login-qr-output。

    示例:

    cli -p /Users/username/demo  //预览,在终端中打印登录二维码
    cli -p /Users/username/demo --preview-qr-output base64@/Users/username/code.txt // 预览,二维码转成 base64 并存到文件 /Users/username/code.txt
    1. 命令行上传代码

    上传代码时必须处于登录状态,如果没有登录,会提示需先登录。

    上传代码需要的信息包括项目根目录、版本号、以及可选的版本备注。

    -u, --upload : 上传代码,version 指定版本号,project_root 指定项目根路径。

    --upload-desc : 上传代码时的备注。

    示例:

    cli -u 1.0.0@/Users/username/demo --upload-desc 'initial release' //上传路径 /Users/username/demo 下的项目,指定版本号为 1.0.0,版本备注为 initial release
    1. 支持自动化测试
      -t, --test : 提交自动化测试,project_root 指定项目根路径。

    示例:

    cli -t /Users/username/demo   //提交测试路径 /Users/username/demo 下的项目

    测试号

    为方便开发者开发和体验小程序、小游戏的各种能力,开发者可以申请小程序或小游戏的测试号,并使用此帐号在开发者工具创建项目进行开发测试,以及真机预览体验。

    申请测试号

    申请测试号的过程非常简单。只需访问 申请地址 ,并扫码登录后,即可查看到已为自己分配好的测试帐号信息。1

    创建测试号项目

    在得到了测试号的帐号信息之后,可以在开发者工具中使用此帐号信息创建项目进行开发。1
    如图所示,打开工具并新建一个小程序项目,填入测试帐号的 appid,即可创建测试项目。1
    如果需要跳过网络请求域名的校验,可勾选项目设置里的 “不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书” 选项。

    点击工具栏上的预览按钮即可在真机上预览体验。在真机上如需跳过网络请求域名的校验,需要点击右上角选项,选择 “打开调试” 即可。1

    http调用

    开发者工具提供了命令行与 HTTP 服务两种接口供外部调用,开发者可以通过命令行或 HTTP 请求指示工具进行登录、预览、上传等操作

    HTTP

    http 服务在工具启动后自动开启,HTTP 服务端口号在用户目录下记录,可通过检查用户目录、检查用户目录下是否有端口文件及尝试连接来判断工具是否安装/启动。

    端口号文件位置:

    macOS : ~/Library/Application Support/微信web开发者工具/Default/.ide

    Windows : ~/AppData/Local/微信web开发者工具/User Data/Default/.ide

    打开工具或指定项目

    接口定义:URL: /open HTTP 方法: GET

    URL参数 必填 说明
    projectpath 打开指定路径中的项目。如项目已打开,自动刷新项目。如项目未创建,自动创建并打开项目

    示例:

    http://127.0.0.1:端口号/open   //打开工具
    http://127.0.0.1:端口号/open?projectpath=项目全路径  //打开/刷新项目

    注意:

    项目路径中必须含正确格式的 project.config.json 且其中有 appid 和 projectname 字段

    项目路径需经 URL encode

    登录

    接口定义:URL:/login HTTP 方法:GET

    URL参数 必填 说明
    format 指定登录二维码返回格式,可选值有 image、base64、terminal,默认 image。图片格式为 png
    qroutput 指定文件路径,在文件写入二维码数据。如指定,二维码将被写入指定路径的文件内,如未指定,二维码将作为请求相应体返回

    示例:

    http://127.0.0.1:端口号/login   //登录,返回图片格式的二维码
    http://127.0.0.1:端口号/login?format=base64 //登录,取 base64 格式二维码
    http://127.0.0.1:端口号/login?format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt   //登录,取 base64 格式二维码,并写入 /Users/username/logincode.txt

    预览

    接口定义:URL:/preview HTTP 方法:GET

    URL参数 必填 说明
    projectpath 预览指定路径中的项目。如项目已打开,自动刷新项目。如项目未创建,自动创建并预览项目
    format 指定登录二维码返回格式,可选值有 image、base64、terminal,默认 image。图片格式为 png
    qroutput 指定文件路径,在文件写入二维码数据。如指定,二维码将被写入指定路径的文件内,如未指定,二维码将作为请求相应体返回

    示例:

    http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo     //预览路径为 /Users/username/demo 的项目,返回图片格式的二维码
    http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64     //预览路径为 /Users/username/demo 的项目,返回 base64 格式的二维码
    http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt     //预览路径为 /Users/username/demo 的项目,返回 base64 格式的二维码,并写入 /Users/username/logincode.txt

    上传

    接口定义:URL:/upload HTTP 方法:GET

    URL参数 必填 说明
    projectpath 上传指定路径中的项目
    version 版本号
    desc 本次上传的版本备注

    示例:

    http://127.0.0.1:端口号/upload?projectpath=%2FUsers%2Fusername%2Fdemo&version=v1.0.0     //上传路径为 /Users/username/demo 的项目,指定版本号为 v1.0.0
    http://127.0.0.1:端口号/upload?projectpath=%2FUsers%2Fusername%2Fdemo&version=v1.0.0&desc=test     //上传路径为 /Users/username/demo 的项目,指定版本号为 v1.0.0,并带上备注

    自动化测试

    接口定义:URL:/test HTTP 方法:GET

    URL参数 必填 说明
    projectpath 测试指定路径中的项目

    示例:

    http://127.0.0.1:端口号/test?projectpath=%2FUsers%2Fusername%2Fdemo   //提交路径为 /Users/username/demo 的项目进行测试

    请求响应:正常情况下 HTTP 相应状态码为 200,错误时 400,返回如下格式的 JSON 字符串:

    {
      "code": 40000,
      "error": "原因"
    }

    小程序开发助手

    功能概述

    “小程序开发助手” 是微信公众平台发布的官方小程序,帮助开发和运营人员在手机端更方便快捷地查看和预览小程序,扫描下面小程序码可立即体验1
    使用者可以在小程序开发助手查看和预览与自己关联的所有小程序。小程序将会按照其更新时间自动排序,显示在最上面的小程序是最近有提交的小程序,例如开发者预览了新的代码,或者体验版有更新1
    通过点击并展开小程序列表,使用者可以根据自己的身份,浏览到小程序的线上版本、体验版本或开发版本。如果使用者是小程序的管理者,可以浏览到全部三种版本;如果使用者身份是 “体验者”,则可以浏览到线上版本、体验版本,而不会浏览到任何开发版本;如果一个小程序有多个开发者,则开发版本的列表将会显示每一个开发者提交预览的最新版本。1
    如图,小程序的开发版和体验版会展示提交/发布者、更新时间,以及代码的编译前后大小。

    通过点击列表上的相应版本,使用者可以立即预览该版本对应的小程序。点击导航栏的返回,可以返回到小程序开发助手,预览其他版本的小程序

    代码片段

    代码片段是一种可分享的小项目,可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题等等。分享代码片段会得到一个链接,所有拥有此分享链接的人可以在工具中导入此代码片段。如果网页可点击的链接指向的是分享链接,那么点击链接也会自动打开工具进入代码片段导入页。使用最新版的开发者工具可以点此体验导入代码片段。

    创建代码片段

    在工具选择项目的界面中,右侧可以选择代码片段页卡,查看所有本地代码片段,在右下角可以点击创建代码片段。1
    创建代码片段需要填入代码片段名称、本地存放目录。AppID 不是必填项,如果需要演示依赖 AppID 的操作则需填写。如果存放目录是空目录,则可在下方选择小程序、小游戏等的快速启动模板1
    信息填写正确后,点击创建即可完成创建并打开代码片段。

    代码片段主界面

    代码片段的主界面与普通项目主要有以下几点区别:

    1.没有上传、腾讯云和申请测试报告等功能

    2.详情页中会展示上次分享的链接,并可以一键复制

    3.代码片段的快速启动模板与普通项目的快速启动模板不同,体积更小,功能更精简1

    分享代码片段

    在工具栏上点击分享按钮即可开启分享代码片段的流程,在分享信息中需要填写以下内容:

    1.项目描述:简要介绍此代码片段的功能和目的

    2.是否需要 AppID:如果是,开发者导入代码片段时会建议其填入 AppID 以完整运行代码片段

    3.最低库版本:开发者打开导入的代码片段时详情页的调试基础库不会低于指定的版本

    4.分享的小程序代码片段最大大小为 100KB,小游戏代码片段最大为 200KB。1
    分享成功后会展示分享链接,可复制分享给其他开发者,其他开发者在工具中选择导入代码片段并粘贴链接即可导入1
    分享的链接除了可以粘贴到导入页导入外,还可以设置为可点击的链接。如果 html 标签的 href 属性设置为分享的链接,如 代码片段示例,则用户点击此链接时会自动打开工具进入代码片段导入页,最后点击导入即可完成导入。在开发者社区发帖时,如果想要提供 demo 示例,如果想要提供 demo 示例,可以插入一个链接为代码片段分享链接的超链接1

    导入代码片段

    在选择代码片段的页面的右下角可以点击导入进入导入页,或者点击菜单栏上的项目选项卡下的导入代码片段来打开导入页。导入时需要填写分享链接或代码片段 ID。链接的最后一部分即是代码片段的 ID,如 wechatide://minicode/76b799966b6ead1837edac517cc02e02 的 ID 为 76b799966b6ead1837edac517cc02e02。1
    导入时可选择存放目录和 AppID。存放目录默认是在临时文件夹1

    第三方平台

    概述

    小程序运营者,可以一键授权给第三方平台,通过第三方平台来完成业务。第三方平台在小程序的前后端开发上同直接开发小程序有所区别,其所拥有的各项 API 以及详细说明请查看 代小程序实现业务 ,其余部分请阅读下文。

    开发第三方平台小程序具有一定的复杂性,首先需要确认三个概念:

    open3rd:第三方平台,是小程序官方认可的第三方开发商 详情

    3rdMiniProgramAppid:第三方平台申请的并绑定在该平台上的小程序,用于开发小程序模板

    extAppid:授权给第三方平台的小程序

    第三方平台相关的小程序开发需要做一些特殊的处理:

    小程序模板的开发

    小程序模板结合 extAppid 的开发调试

    使用 directCommit 直接提交至待审核列表 详情

    最新版本的开发工具支持第三方平台小程序的开发和预览。

    创建项目

    与开发普通小程序一致,第三方平台开发者填入相关的 3rdMiniProgramAppid ,设定项目名称和选择项目目录即可创建项目。

    对于第三方平台小程序,可以在项目页卡查看到相关的 open3rd 信息以及当前的第三方的 3rdMiniProgramAppid ,如若项目配置了相关的 extAppid ,那么项目页卡中也会有相关信息。1

    小程序模板开发

    与开发普通小程序一致,开发者在开发工具上开发好相关的业务逻辑之后,在项目页卡中提交预览既可以在微信中查看小程序的真实表现。

    有所不同的是,第三方平台小程序的提交上传是上传至该第三方平台的 open 帐号下的模板草稿箱中,该平台的管理员需要自行对该模板进行相应的设置,更多请参考 开放平台的文档 。

    extAppid 的开发调试

    为了方便第三方平台的开发者引入 extAppid 的开发调试工作,需要引入 ext.json 的概念。

    ext.json 是一个配置文件,放置在小程序项目的根目录下。

    以下是一个包含了所有配置选项的 ext.json :

    {
      "extEnable": true,
      "extAppid": "wxf9c4501a76931b33",
      "directCommit": false,
      "ext": {
        "name": "wechat",
        "attr": {
          "host": "open.weixin.qq.com",
          "users": [
            "user_1",
            "user_2"
          ]
        }
      },
      "extPages": {
        "pages/logs/logs": {
          "navigationBarTitleText": "logs"
        }
      },
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Demo",
        "navigationBarTextStyle":"black"
      },
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/logs",
          "text": "日志"
        }]
      },
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      }
    }

    ext.json中的配置字段分为两种

    特有的字段

    同 app.json 相同的字段

    属性 类型 必填 描述
    extEnable Boolean 配置 ext.json 是否生效
    extAppid String 配置 extAppid
    ext Object 开发自定义的数据字段
    extPages String Array 单独设置每个页面的 json
    directCommit Boolean 是否直接提交到待审核列表
    extEnable

    extEnable 是一个 Boolean 类型的字段,用于规定当前的 ext.json 文件是否生效,开发者可以通过修改这个字段来开启和关闭 extAppid 的结合开发。

    extAppid

    extAppid 是授权调试的 AppID ,例如开发者在此处填写的是 wxf9c4501a76931b33 那么在 extEnable 为真的情况下,后续的开发逻辑都会基于 wxf9c4501a76931b33 来运行。

    3 ext

    ext 字段是开发自定义的数据字段,在小程序中可以通过 wx.getExtConfigSync 或者 wx.getExtConfig 获取到这些配置信息。

    例如上面的例子中,通过 wx.getExtConfigSync 就可以获得 ext 字段的所有配置

    {
      "name": "wechat",
      "attr": {
        "host": "open.weixin.qq.com",
        "users": [
          "user_1",
          "user_2"
        ]
      }
    }
    extPages

    extPages 是一个对象,对象中的每个 key 应该是该小程序模板 app.json 中定义的页面,每个 key 对应的 value 是 page.json 中所规定的各项配置。

    当开发者设置这个配置以后,小程序框架会对应的修改相对应的 page 的配置信息。

    directCommit

    directCommit 是一个 Boolean 类型的字段,用于规定当前的上传操作是否是直接上传到 extAppid 的审核列表中。

    当 directCommit 为 true 真时,开发者在工具中的上传操作,会直接上传到对应的 extAppid 的审核列表,第三方平台只需要调用 https://api.weixin.qq.com/wxa/submit_audit?access_token=TOKEN 既可以提交审核。更多请参考 第三方平台文档

    当 directCommit 为 false 或者没有定义时,开发者在工具中的上传操作,会直接上传到对应的草稿箱中。

    tips: 可以使用工具的命令行接口 或者 http 接口来实现自动化的代码提交审核

    同 app.json 相同的字段

    当 ext.json 中的字段同 app.json 中一致时,ext.json 的字段会覆盖 app.json 中的对应字段,例如以下的 ext.json

    {
      ········
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "ext navigationBarTitleText",
        "navigationBarTextStyle":"black"
      }
    }

    那么该小程序最终的 navigationBarTitleText 应该是 ext navigationBarTitleText

    展开全文
  • 1.微信小程序开发者工具 下载:小程序开发者工具 使用: 小程序原生开发:直接使用小程序开发者工具打开项目即可 小程序框架开发:首选官方提供类vue.js开发框架 wepy.js ,备选 mpVue。我们选择的是 wepy PS:...
  • 三:运行打开微信开发者工具 四:打开game.js 将wxDownloader.REMOTE_SERVER_ROOT的地址配置成你的res文件夹服务器的地址 五: 调试下 点击详情将【不效验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书】...
  • 微信开发者工具

    2019-07-30 18:00:53
    如下图就是微信小程序的开发工作界面 红色框是工具栏 绿色框是模拟器 蓝色框是编辑区 黄色框是调试器 如果代码有修改,则需要点击编译按钮,则会在模拟器中自动刷新。 如果想要在真实的手机上运行小程序,...
  • 虽然微信开发者工具可以调试大多数情况,但有些问题开发者工具没法调试,只能在真机里调试 真机调试有多重方式 第一种就是手机连接电脑结合Chrome的inspect进行USB远程调试,这个日后补充 第二种是开启vConsole,...
  • 常规做法是把res目录(游戏资源)放到远程服务器,小游戏启动的时候自动去服务器下载资源。 如果要想正常发布你的小游戏,你必须把资源必须放在具有https域名的服务器里。。 所以你需要: 1、买个ECS服务器,供应商...
  • 为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。 二、界面: 1、启动页 【1】登录页 在...
  • 在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统下页面如何如何,某某系统浏览器下页面怎么怎么滴。看着满满的测试汇总文档,我们曾经在一个又...
  • 微信公众号调试

    2019-08-02 08:37:21
    远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybirdApp等)。支持HTTP/HTTPS,无需USB连接设备 windows npm install spy-debugger -g mac sudo npm install spy-debugger -g 第一步:手机和PC...
  • 安卓移动微信调试大法 在开发移动端页面时,一般都得保证在微信页面中能够正常访问,虽说微信内置浏览器统一了各个不同安卓机的WebView,但在不同的机子上,还是会出现不一样的兼容问题。调试页面,有几个维度...
  • 转载于:https://blog.fishlee.net/2016/07/07/double-request-from-wechat-client-with-ajax/ 背景 这是个大坑,耗费了我极多的时间。 事情呢,是这样的。...作为一个单页面操作,所有请求都是通过AJAX和服务器...
  • 微信小程序测试

    2019-08-09 00:11:51
    微信Web开发者工具安装、授权测试用的微信号可预览和调试小程序... 可参考此文: 微信Web开发者工具-下载、安装和使用图解 2.管理后台 配置内网测试服务器环境,通过PC端Web站点管理小程序前端的输出内容,可从...
  • 开发者可以通过两个音视频组件 和 实现实时地在线直播、视频通话、语音通话等功能。 上述功能需要用到两个小程序媒体组件中的两个: live-pusher 与 live-player 。下文简单介绍两这个组件的基础知识。仅可以带你...
  • 阿里妹导读:工欲善其事,必先利其器。从人工到自动化,从重复到创新,信息技术不断演进,开发者工具也在发展。开发效率低下往往是忽略了工具的使用,正确地使用开发者工具,可以让开发效率获得倍速提...
1 2 3 4 5 ... 20
收藏数 2,142
精华内容 856
关键字:

微信开发者工具 缓存 远程调试