一.微信开发者工具主要功能介绍

1.新版本的微信开发者工具会自动将修改后的页面显示出来，不需要我们执行编译，只需要ctrl+s保存即可。

2.控制台Sources下面的js文件中，带sm的是原始的js文件，不带sm的是执行编译过后的文件，所以我们在调试的时候应该在带有sm的js文件下调试。

3.控制台点击三个点那个按钮，有个open file，可以帮助我们快速找到所需文件。

4.小技巧，在代码界面输入ctrl+f可以帮助我们通过关键字快速查找代码。

5.AppData显示的是一些数据绑定的情况。小程序相比于web,他具有本地保存数据的功能，在Storage我们可以看到保存的数据。

Wxml是小程序进行ui界面联调的地方。

6.详情按钮下面是一些上传小程序，还有开发者信息，以及一些设置的地方。

7.切后台这个按钮的功能是模拟手机要切换一些任务这些场景。

8.清缓存按钮中的清除数据缓存是为了主动的清除storage中的一些数据缓存，因为我们不主动去清除的话它会一直存在。

9.微信开发者工具按钮下的开发者文档按钮可以很快的帮助我们进入微信小程序的文档教程页面。

二.开发第一个页面。

1.点击用户头像，发现跳转到另一个页面，如下图所示，而查看我们pages目录下发现刚好也是两个子目录，logs,index

2.json其实就是一些配置文件。

3.pages目录之外有app.js  ,  app.json  ,  app.wxss，这三项式对小程序的全局进行配置，而像index目录下的这些文件只是对当前目录进行配置而已。但是当配置冲突是，以离页面最近的配置为准。

4.pages目录下的index是一级页面，logs是index的子页面，所以他是二级页面。小程序规定最多只能有5级页面。规定：比如logs目录下的文件名必须相同，logs.wxml   logs.wxss   logs.js   logs.json，但是logs这个目录名没有硬性要求。

5.在json配置文件中不能加注释。

6.如果我们不喜欢用微信开发者工具开发，也可以用sublime进行编辑，然后用微信开发者工具进行预览和调试 。

7.<view></view>组件其实就相当于<div>，起到一个容器和分隔文档的作用。

8.<image></image>标签用于添加图片。

9.<text></text>是文本标签，我们也可以不用它包围文本，但是不用他包围的文本不好设置样式，而且手机长按的时候不能选中,text标签会把\n转义为换行，不会输出\n。

10.根目录用/表示。

11.小程序会给没有指定尺寸的图片设置默认的尺寸，默认宽度300px、高度225px。

 12.微信小程序中为了适应不同机型，能够响应式的显示，一般不用px做单位，而用rpx做单位。

13.小程序也能在标签中写行内样式。

14.如果某个样式用的比较多，我们可以把他放在全局样式文件下，也就是app.wxss中。

15.不能给view设置高度100%;在小程序中设为100%;他还是以完全包裹内部元素为止。注意：小程序页面最外层不是view，用wxml查看发现它有一个隐藏的最外部的标签<page></page>

三.移动端设备的分辨率和rpx

1.为什么模拟器下面iphone6的分辨率是375，而设计图一般给750？

pt指的是逻辑分辨率，我们现在只简单的理解为它和屏幕的物理尺寸有有关系，他是一个长度的单位。

px在移动设备中称为物理分辨率，他和设备的屏幕尺寸没有关系，可以简单理解为是一个像素点。我们看到的图片是由很多个像素点构成的。

从上图可以发现苹果3和苹果4尺寸一样，但是物理分辨率却没有它好，而且是两倍的关系。render就是表示每一个pt下面有多少个px。索然render越大显示效果越好，但是人眼视觉有个极限，Render最大为2，再大就分辨不出来了，所以6plus的清晰程度并不比6s的好。

ppI表示每一寸包含多少个物理像素点，注意屏幕尺寸3.5寸指的是对角线的距离，以苹果3为例，ppI = 根号下320平方+480平方，除以3.5。

设计师给的图是根据物理分辨率做的，而我们开发者需要使用的是逻辑分辨率。

注意：不是所有的单位都适合用rpx，像小程序里面字体有时候就不适合，它需要在各个设备上都能看清楚字体，所以一般字体用px。

出现错误：

解决办法：

因为小程序开发文档的老版本是支持一开始写简单的一个页面可以不去配置js，但是新版本会报错。