微信开发者工具的使用（一）

注意事项

• 微信开发者工具缓存非常严重。
• 如果发现代码和预期不一样，先点击编译！
• 编译后还是没有达到预期的效果，就需要清除缓存！
• 甚至重启项目才可以！

配置文件介绍

JSON是一种轻量级的数据格式，常用于前后端数据的交互，但是在小程序中，JSON扮演的配置项的角色，用于配置项目或者页面属性和行为，每个页面或组件也都有一个对应的json文件。

1. app.json：小程序全局配置文件，用于配置小程序的一些全局属性和页面路由。
2. 页面.json：小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题等。
3. project.config.json：小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人设置。
4. sitemap.json：配置小程序及其页面是否允许被微信索引，提高小程序在搜索引擎搜索到的概率。

全局配置

pages配置

pages字段：用来指定小程序由哪些页面组成，用于让小程序知道由哪些页面组成以及页面定义在哪个目录，每一项都对应一个页面
的路径信息。
在配置pages字段时，有以下注意事项：

1. 页面路由不需要写文件后缀，框架会自动去寻找对应位置的四个文件进行处理
2. 小程序中新增/减少页面，都需要对pages数组进行修改
3. 未指定entryPagePath时，数组的第一项代表小程序的初始页面（首页)

window配置

window字段：用于设置小程序的状态栏、导航条、标题、窗口背景色。
官方文档：小程序配置

tabbar配置

tabBar字段：定义小程序顶部、底部tab栏，用以实现页面之间的快速切换，
可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。
注意事项：
tab按数组的顺序排序，list配置最少2个、最多5个tab
官方文档：tobbar配置

页面配置

小程序的页面配置，也称局部配置，每一个小程序页面也可以使用自己的.json文件来对本页面的窗口表现进行配置
需要注意的是：页面配置文件的属性和全局配置文件中的window属性几乎一致，只不过这里不需要额外指定window字段，因此如果出现相同的配置项，页面中配置项会覆盖全局配置文件中相同的配置项
官方文档：页面配置

项目配置文件和配置sass

在创建项目的时候，每个项目的根目录生成两个config.json文件，用于保存开发者在工具上做的个性化配置，例如和编译有关的配置。
当重新安装微信开发者工具或换电脑工作时，只要载入同一个项目的代码包，开发者工具就会自动恢复到当时开发项目时的个性化配置。

1. project.config.json：项目配置文件，常用来进行配置公共的配置
2. project.private.config.json：项目私有的配置，常用来配置个人的配置

sitemap.json文件

sitemap.json文件：配置小程序及其页面是否允许被微信索引，提高小程序在微信内部被用户搜索到的概率

微信现已开放小程序内搜索，开发者可以通过
sitemap.json配置来设置小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中
注意事项：

1. 注：没有sitemap.json则默认所有页面都能被索引
2. {“action”：“allow”，“page”：”*"}是优先级最低的默认规则，未显式指明"disallow”的都默认被索引

小程序的样式和组件介绍

在开发Web网站的时候：页面的结构由HTML进行编写，例如：经常会用到div、p、span、img、a等标签
页面的样式由CSS进行编写，例如：经常会采用.class、#id、element等选择器
但在小程序中不能使用HTML标签，也就没有DOM和BOM，CSS也仅仅支持部分选择器
小程序提供了WXML进行页面结构编写，同时提供了WXSS进行页面的样式编写
WXML提供了view、text、image、navigator等标签来构建页面结构，只不过在小程序中将标签称为
组件
WXSS对CSS扩充和修改，新增了尺寸单位rpx、提供了全局的样式和局部样式，另外需要注意的是WXSS仅支持部分CSS选择器

样式-尺寸单位rpx

随着智能手机的发展，手机设备的宽度也逐渐多元化，这就需要开发者在开发的时候，需要适配不同屏幕宽度的手机。为了解决屏幕适配的问题，微信小程序推出了rpx单位
rpx:
是小程序新增的自适应单位，它可以根据不同设备的屏幕宽度进行自适应缩放
小程序规定任何型号手机：屏幕宽都为750rpx
开发建议：

1. 开发微信小程序时设计师可以用iPhone6作为视觉稿的标准，iPhone6的设计稿一般是750px
2. 如果用iPhone6作为视觉稿的标准量取多少px，直接写多少rpx即可，开发起来更方便，也能够适配屏幕的宽度
   设计稿宽度是750px，而iPhone6的手机设备宽度是375px，设计稿想完整展示到手机中，就需要缩小一倍，在iPhone6下，px和rpx的换算关系是：1rpx=0.5px，750rpx=375px，刚好能够填充满整个屏幕的宽度

样式-全局样式和局部样式

在进行网页开发时，我们经常创建global.css、base.css或者reset.css作为全局样式文件进行重置样式或者样式统一，然后在每个页面或组件中写当前页面或组件的局部样式，小程序中也存在全局样式和局部样式
全局样式：
指在app.wxSS中定义的样式规则，作用于每一个页面，例如：设置字号、背景色、宽高等全局样式

局部样式：指在page.wxss中定义的样式规则，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。

组件-组件案例演示

小程序常用的组件：

1. view组件
2. swiper 和 swiper-item 组件
3. image组件
4. text组件
5. navigator 组件
6. scroll-view组件
7. 字体图标
   使用小程序常用的组件实现项目首页的效果

组件案例-轮播图区域绘制

在进行网页开发的时候，实现轮播图的时候，我们通常先使用HTML、CSS实现轮播图的结构样式，然后使用JS控制轮播图的效果，或者直接使用插件实现轮播图的功能，而在小程序中实现小程序功能则相对简单很多。
在小程序中，提供了swiper和swiper-item组件实现轮播图：
swiper:滑块视图容器，其中只能放置swiper-item组件
swiper-item：只可放置在swiper组件中，宽高自动设置为100%，代表swiper中的每一项

在小程序中，如果需要渲染图片，需要使用image组件，常用的属性有4个：

1. src属性：图片资源地址
2. mode：图片裁剪、缩放的模式
3. show-menu-by-longpress：长按图片显示菜单
4. lazy-load：图片懒加载

注意事项：

1. image默认具有宽度和高度，宽是320px高度是240px
2. image组件不给src属性设置图片地址，也占据宽和高

组件案例-绘制公司信息区域

在小程序中，如果需要渲染文本，需要使用text组件，常用的属性有2个：

1. user-select：文本是否可选，用于长按选择文本
2. space：显示连续空格

注意事项

1. 除了文本节点以外的其他节点都无法长按选中
2. text组件内只支持text嵌套

组件案例-商品导航区域

1. view：视图容器
2. image：图片组件
3. text:文本组件