小程序介绍微信小程序工具使用简介

汽车新闻 2020-02-1485未知admin

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

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

  为了更好的体验,我们从视觉、交互、性能等方面对者工具进行升级,推出了1.0.0版本

  注意:因为申请测试会占用测试机器资源,所以一个 APPID 一天只能申请一次测试报告。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  wxss 渲染表现不一致。尽管可以通过样式补全来规避大部分的问题 ,还是者需要在 iOS 和 Android 上分别检查小程序的线 以及之后版本的工具中,会默认使用 babel 将者 ES6 语法代码转换为三端都能很好支持的 ES5 的代码,帮助者解决不同所带来的问题

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

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

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

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

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

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

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

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

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

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

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

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

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

  存在Git仓库时,状态栏会展示此Git仓库目前的分支信息。例如,下图表明目前Git仓库处于v2分支。

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

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

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

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

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

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

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

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

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

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

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

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

  Sources panel 用于显示当前项目的脚本文件,同浏览器不同,微信小程序框架会对脚本文件进行编译的工作,所以在 Sources panel 中者看到的文件是经过处理之后的脚本文件,者的代码都会被包裹在 define 函数中,并且对于 Page 代码,在尾部会有 require 的主动调用。

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

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

  Network Panel 用于观察和显示 request 和 socket 的请求情况

  者工具上可以编辑和调试自定义的数据功能,点击菜单栏中的 “工具 - 自定义” 即可弹窗打开自定义:

  接着可以在模拟器中操作和触发事件。在模拟器中刷新小程序也将获取该测试配置,除非窗口被关闭。窗口关闭后模拟器不会再收到配置。当事件被触发时,工具上会展示信息,包括事件 ID、触发页面、触发方式、触发时动作、以及的字段值和数据:

  关闭窗口后,配置将全部失效,模拟器不再收到配置并不再触发(小程序中使用 wx.reportAnalytics API 进行的数据仍会在工具中输出)。 测试成功后,可到小程序后台发布事件配置,即可正式生效收集所定义的事件数据。

  自动预览可以实现编写小程序时快速预览,免去了每次查看小程序效果时都要扫码或者使用小程序助手的麻烦。只需按下快捷键,保持前台运行的微信即可自动唤出或刷新小程序。要使用自动预览功能,需要配合 6.6.7 及以上的微信客户端版本。

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

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

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

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

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

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

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

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

  者点击选取任何一个群,可以通过接口的回包获取到 shareTicket ,通过调用 wx.getShareInfo 可以获取到相关转发的信息

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

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

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

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

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

  要发起一个真机远程调试流程,需要先点击者工具的工具栏上 “远程调试” 按钮。

  远程调试窗口分为两部分,分别是左侧的调试器视图、右侧的信息视图。者可以在调试器里直接进行代码的调试,并查看 Storage 情况;信息视图则可以查看目前与手机和服务器的连接情况,以及发生的错误信息等。

  在远程调试的调试器里,者可以在 Console 面板里对代码进行调试,在 Sources 面板里查看小程序的源代码并进行断点单步调试,在 Storage 面板里查看小程序的 Storage 使用情况等。

  在 Sources 面板查看源代码时,者所有的文件径都是以 weapp:// 开头的

  除了可以在调试器进行单步调试,者还能在代码中手动插入 debugger; 语句进行断点调试。因此,如果想要在小程序启动的尽早时刻断点,可以在进入远程调试之前,编辑代码手动在需要断点处的代码插入 debugger; 语句来实现。

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

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

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

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

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

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

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

  在得到了测试的帐信息之后,可以在者工具中使用此帐信息创建项目进行。

  如果需要跳过网络请求域名的校验,可勾选项目设置里的 “不校验域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书” 选项。

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

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

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

  “小程序助手” 是微信平台发布的小程序,帮助和运营人员在手机端更方便快捷地查看和预览小程序,扫描下面小程序码可立即体验

  使用者可以在小程序助手查看和预览与自己关联的所有小程序。小程序将会按照其更新时间自动排序,显示在最的小程序是最近有提交的小程序,例如者预览了新的代码,或者体验版有更新

  通过点击并展开小程序列表,使用者可以根据自己的身份,浏览到小程序的线上版本、体验版本或版本。如果使用者是小程序的管理者,可以浏览到全部三种版本;如果使用者身份是 “体验者”,则可以浏览到线上版本、体验版本,而不会浏览到任何版本;如果一个小程序有多个者,则版本的列表将会显示每一个者提交预览的最新版本。

  如图,小程序的版和体验版会展示提交/发布者、更新时间,以及代码的编译前后大小。

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

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

  在工具选择项目的界面中,右侧可以选择代码片段页卡,查看所有本地代码片段,在右下角可以点击创建代码片段。

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

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

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

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

  4.分享的小程序代码片段最大大小为 100KB,小游戏代码片段最大为 200KB。

  分享成功后会展示分享链接,可分享给者,者在工具中选择导入代码片段并粘贴链接即可导入

  分享的链接除了可以粘贴到导入页导入外,还可以设置为可点击的链接。如果 html标签的 href 属性设置为分享的链接,如代码片段示例,则用户点击此链接时会自动打开工具进入代码片段导入页,最后点击导入即可完成导入。在者社区发帖时,如果想要提供 demo 示例,如果想要提供 demo 示例,可以插入一个链接为代码片段分享链接的超链接

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

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

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

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

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

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

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

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

原文标题:小程序介绍微信小程序工具使用简介 网址:http://www.anxietymagicpill.com/qichexinwen/2020/0214/12654.html

Copyright © 2002-2020 轰轰烈烈新闻网 www.anxietymagicpill.com 版权所有  

联系QQ:1352848661