小程序 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文件，有完备的代码补全、提示功能：
  
  

• 编辑器快捷键
  
  

---

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