美美的小程序开发之路--20190518

IDE

• IDE是指集成开发环境（IDE，Integrated Development Environment ）。

• 小程序的默认IDE是微信官方推出的“微信开发者工具”；页面分为工具栏、模拟器、编辑器和调试器4个区。

• 如图上的几个红框圈起来的地方，其中C和D都属于编辑器，C是导航栏，D是文本编辑区，也就是最常用的写代码的地方。

• 在工具栏有三个框框表示另外三个区，选中和选非可以调整整个IDE的显示格局。

• 在调试区也有一行工具栏用于切换调试区的功能，开发中使用最多的是Console控制台，这里会输出程序运行的日志，多数时候，需要根据日志信息去判断程序的健康状况。

• Console模式下的top左边的按钮可以用来清除日志信息，常用。

  微信开发者工具.png

Debug with logs

• 如上图的控制台显示一条Warning信息,翻译一下，大致是说你在使用"wx:for"加上"wx:key"的属性可以提升性能。

  warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance

  按他说的做，把代码改成下面这样，Warning消失。

  <!--logs.wxml-->
  <view class="container log-list">
    <block wx:for="{{logs}}" wx:key="logs" wx:for-item="log">
      <text class="log-item">{{index + 1}}. {{log}}</text>
    </block>
  </view>
  

• Warning是不影响程序运行的，下面看一个Error的信息。
  

  Error.png

  报错信息里会有相应出错的程序堆栈信息，顺着报错信息去改程序就可以了，这里的报错是我使用了一个未声明的变量htc，修改代码，使用正确的js语法编程，解决问题。