小程序 Tip | 文档、环境、开发工具界面与特性

文档与环境相关

• 微信开发文档
• 小程序平台
• 开放平台的 设置-- 帐号信息中 可以获取微信小程序AppID

新建项目

• 主要文件 app.js 脚本文件 app.json 配置文件 app.wxss 样式表文件 微信小程序会读取这些文件，并生成小程序实例；

开发工具界面面板

• Console面板 显示错误信息； 输出信息的调试代码：console.log('onLoad') Console面板中 输入Js代码 也可以 立即执行；
• Sources面板 用于显示当前项目的脚本文件， 左侧是源文件目录， 中间显示的是选中文件的源代码， 右侧显示的是调试相关按钮及变量的值等信息：

• 微信小程序框架 会对 脚本文件 进行编译的工作， 所以在 Sources面板中开发者看到的文件 是经过处理之后的 脚本文件， 开发者的代码 被包裹在 define函数中；
• NetWork面板 用于观察和显示网路请求request和socket的情况； 通过这个面板可以调试网络请求（如请求格式、响应数据的格式、请求状态、用时等信息）；

单击某一个请求的item，可以看到请求的详细信息：

• AppData面板 用于显示当前项目中的具体数据，实时反馈项目数据情况；

可以在AppData面板中编辑数据， 编辑后数据会及时反馈到界面上：

• Storage面板 用于显示当前项目使用本地存储的情况， 在小程序中可以用wx.setStorage或者wx.setStorageSync将数据保存到手机本地存储中； 如创建的初始项目中， logs页面会将操作日志写到本地存储的logs变量中：

• Wxml面板 用于帮助开发者查看Wxml转化后的界面。 可以看到 真实的页面结构 以及 结构对应的wxss属性； 同时可以修改wxss属性，在模拟器中实时看到修改的情况；

通过调试模块左上角的选择器， 还可以快速找到页面中组件对应的wxml代码：

代码编辑

• 方便快捷的文件管理

• 微信小程序主要有js、json、wxml和wxss这4中格式的文件， 开发工具提供了针对这4种格式文件的编辑器；
• 对于js文件，有完备的代码补全、提示功能：

• 编辑器快捷键

参考自《从零开始学微信小程序开发》