小程序官方开发文档学习（四）-- 工具

程序调试
代码编辑
项目预览
细节点

程序调试

• 程序调试主要有三大功能区：模拟器、调试工具和小程序操作区
• 模拟器 -- 模拟器模拟微信小程序在客户端真实的逻辑表现，对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。

模拟器.png

• 编译代码 -- 点击工具左下角的编译按钮，可以编译当前代码，并自动刷新模拟器，同时为了帮助开发者调试具体页面，可以选择自定义编译模式。

编译代码.png

• 调试工具 -- 调试工具分为 7 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage、Sensor panel

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

Wxml panel.gif

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

Sources panel.png

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

Netwrok Pannle .png

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

appdata.gif

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

storage.gif

• Console panel 有两大功能：（1）开发者可以在此输入和调试代码 （2）小程序的错误输出，会显示在此处

console1.gif 错误输出.png

• Sensor panel 有两大功能：（1）开发者可以在这里选择模拟地理位置（2）开发可以在这里模拟移动设备表现，用于调试重力感应 API

location.gif accelerometerchange.gif

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

小程序操作区.png

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

多窗口切换.png

代码编辑

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

• 文件支持 -- 工具目前提供了4种文件的编辑：wxml、wxss、js、json以及图片文件的预览。
• 实时预览 -- 可以通过编辑区左边的模拟器，实时预览编辑的情况：
  （1）修改 wxss、wxml 文件，会刷新当前 page
  （2）修改 js 文件或者 json 文件，会重新编译小程序

实时预览.png

• 自动保存 -- 书写代码后，工具会自动帮助用户保存当前的代码编辑状态，直接关闭工具或者切换到别的项目，并不会丢失已经编辑的文件状态，但需要注意的是，只有 保存文件，修改内容才会真实的写到硬盘上，并触发实时预览。
• 自动补全 -- 同大部分编辑器一样，工具提供了较为完善的自动补全
  （1） js 文件编辑会帮助开发补全所有的 API ,并给出相关的注释解释
  （2）wxml 文件编辑会帮助开发者直接写出相关的标签
  （3） json 文件编辑会帮助开发者补全相关的配置，并给出实时的提示

自动补全.gif 自动补全2.gif 自动补全3.gif

• 常用快捷键

格式调整

    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、目录信息，以及上次提交代码的时间以及代码包大小。
• 提交预览和提交上传
  (1)点击预览功能，工具会上传源代码到微信服务器，成功后将会显示一个二维码，开发者用新版微信扫描二维码即可在手机上看到相应项目的真实表现.
  (2)点击上传，工具会上传源代码到微信服务器，开发者可以在 mp 管理后台看到本次提交的情况. 需要注意的是，代码上传 功能仅管理员微信号可操作
• 项目配置

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

2.需要注意的是：
    这种转换只会帮助开发处理语法上问题，新的 ES6 的 API 例如 Promise 等需要开发者自行引入 Polyfill 或者别的类库。
    为了提高代码质量，在开启 ES6 转换功能的情况下，默认启用 javasctipt 严格模式，请参考 "use strict"(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)。

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

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

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

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

项目预览.png

细节点

• javascript && wxss
  微信小程序运行在三端：iOS、Android 和 用于调试的开发者工具。三端的脚本执行环境聚以及用于渲染非原生组件的环境是各不相同的：
  在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS8、iOS9、iOS10
  在 Android 上，小程序的 javascript 代码是通过 X5 JSCore来解析，是由 X5 基于 Mobile Chrome 37 内核来渲染的
  在 开发工具上， 小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的
  尽管三端的环境是十分相似的，但是还是有些许区别：
  ES6 语法支持不一致 语法上开发者可以通过开启 ES6 转 ES5 的功能来规避。
  ES6 API 支持不一致 考虑到代码包大小的限制，API 上目前需要开发者自行引入相关的类库来进行处理，可以通过 caniuse 或者 X5兼容 查询到相关 API 的支持情况
  wxss 渲染表现不一致 尽管可以通过开启样式补全来规避大部分的问题 详情，还是建议开发者需要在 iOS 和 Android 上检查小程序的真实表现。

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

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

    1.新绑定的开发者需要 24 小时后才有权限进行微信支付的调试
    2.开发者在工具上调用微信支付的 API 后，开发工具会出现一个二维码，开发者必须使用当前开发所使用的微信号扫码后在手机上完成支付的流程
    3.工具会同步移动端微信支付的回包到工具中，开发者自行进行后续的操作

• 分享的调试

    1.开发者工具上调用分享是一个模拟的行为，并不会真实的分享给用户，开发可以通过这个模拟行为判断是否正确的调用了分享 API
   2. 在工具上编译小程序之前开发者可以设置启动的页面和参数，用于帮助调试被分享者打开小程序并定位到相关页面的场景
    3.在提交预览的时候，开发者也可以设置启动页面和参数，用于帮助调试移动端的真实表现

• 客户端可信域名校验
  开发者使用手机扫码调试的场景下，打开调试模式之后，最新版的客户端将不检查可信域名。
• 代码文件必须 UTF8 编码
  iOS下仅支持 UTF8 编码格式，最新版本的开发者工具会在上传代码时候对代码文件做一次编码格式校验。