你的位置:网站首页 > 手机网站开发工具推荐 > 微信小程序专用开发工具【微信web开发者工具】

微信小程序专用开发工具【微信web开发者工具】

1421 0 2017-01-11

概述


为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的 开发者工具 ,集成了开发调试、代码编辑及程序发布等功能。

devtools

扫码登录

启动工具时,开发者需要使用已在后台绑定成功的微信号扫描二维码登录,后续所有的操作都会基于这个微信帐号

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

模拟器

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

emulat

调试工具

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

Wxml panel

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

wxml

Sources panel

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

sources

Network panel

Netwrok Pannle 用于观察和显示 request 和 socket 的请求情况

network

Appdata panel

Appdata panel 用于显示当前项目当前时刻 appdata 具体数据,实时地反馈项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。

appdata

Storage panel

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

storage

Console panel

Console panel 有两大功能:

  • 开发者可以在此输入和调试代码

    console

  • 小程序的错误输出,会显示在此处

    4

小程序操作区

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

5

当小程序使用到多窗口的时候,可以在顶部操作区进行页面切换,需要注意的是这个操作只是为了方便开发者才存在的,在真实的微信客户端中是不会有的。

7



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

文件支持

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

实时预览

可以通过编辑区左边的模拟器,实时预览编辑的情况:

  • 修改 wxss、wxml 文件,会刷新当前 page
  • 修改 js 文件或者 json 文件,会重新编译小程序

edit

自动保存

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

自动补全

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

  • js 文件编辑会帮助开发补全所有的 API ,并给出相关的注释解释
  • wxml 文件编辑会帮助开发者直接写出相关的标签
  • json 文件编辑会帮助开发者补全相关的配置,并给出实时的提示

    3

    3

    3

常用快捷键

格式调整

  • Ctrl+S:保存文件
  • Ctrl+[, Ctrl+]:代码行缩进
  • Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块
  • Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行
  • Shift+Alt+F:代码格式化
  • Alt+Up,Alt+Down:上下移动一行
  • Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行
  • Ctrl+Shift+Enter:在当前行上方插入一行
  • Ctrl+Shift+F:全局搜索

光标相关

  • Ctrl+End:移动到文件结尾
  • Ctrl+Home:移动到文件开头
  • Ctrl+i:选中当前行
  • Shift+End:选择从光标到行尾
  • Shift+Home:选择从行首到光标处
  • Ctrl+Shift+L:选中所有匹配
  • Ctrl+D:选中匹配
  • Ctrl+U:光标回退

界面相关

  • Ctrl + :隐藏侧边栏
  • Ctrl + m: 打开或者隐藏模拟器

项目页卡主要有三大功能

显示当前项目细节

包括图标、AppID、目录信息,以及上次提交代码的时间以及代码包大小。

提交预览和提交上传

  • 点击预览功能,工具会上传源代码到微信服务器,成功后将会显示一个二维码,开发者用新版微信扫描二维码即可在手机上看到相应项目的真实表现.
  • 点击上传,工具会上传源代码到微信服务器,开发者可以在 mp 管理后台看到本次提交的情况. 需要注意的是,代码上传 功能仅管理员微信号可操作

项目配置

ES6 转 ES5

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

需要注意的是:

  • 这种转换只会帮助开发处理语法上问题,新的 ES6 的 API 例如 Promise 等需要开发者自行引入 Polyfill 或者别的类库。
  • 为了提高代码质量,在开启 ES6 转换功能的情况下,默认启用 javasctipt 严格模式,请参考 "use strict"

监听文件变化,自动刷新开发者工具

开启此选项,和当前项目相关的文件发生改变时候,会自动帮助开发者刷新调试模拟器,从而提高开发效率。

压缩代码

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

样式补全

开启此选项,开发工具会自动检测并补全缺失样式,保证在 iOS8 上的正常显示。

不校验请求域名及 TLS 版本

开启此选项,开发工具将不会校验安全域名,以及 TLS 版本,帮助在开发过程中更好的完成调试工作。

edit



下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715

发表评论

收缩

QQ在线客服

  • 使用咨询
  • 客服001
  • 客服001
  • 客服001
  • PCWAP系统交流群