微信小程序学习笔记
一、文件和目录结构介绍
小程序包括：主体文件、页面文件
主体文件：
- app.js：小程序入口文件
- app.json：小程序的全局配置文件
- app.wxss：小程序的全局样式
页面文件：是每个页面所需的文件，小程序页面文件都存放在pages目录下，一个页面一个文件夹
页面文件：
- .js：页面逻辑（必须存在）
- .wxml：页面结构（必须存在）
- .wxss：页面样式
- .json：小页面配置
二、配置文件介绍
1、JSON
JSON是一种轻量级的数据格式，常用于前后端数据的交互，但是小程序中，JSON扮演配置项的角色，用于配置项目或者页面属性和行为
- app.json：小程序全局配置文件，用于配置小程序的一些全局属性和页面路由
- 页面.json：小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题等
- project.config.json：小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人设置
- sitemap.json：配置小程序及其页面是否允许被微信索引，提高小程序在搜索引擎搜索到的概率
2、pages
pages用来指定小程序由哪些页面组成，用于让小程序知道由哪些页面组成以及页面定义在哪个目录，每一项都对应一个页面的路径信息
主义事项：
- 页面路由不需要写文件后缀，框架会自动去寻找对应位置的四个文件进行处理
- 小程序中新增/减少页面，都需要对pages数组进行修改
- 未指定entryPagePath（直接指示小程序首页）时，数组的第一项代表小程序的初始页面（首页）
3、window
用于设置小程序的状态栏、导航条、标题、窗口背景色
配置项查询链接：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
4、tabBar
定义小程序顶部底部tab栏，用以实现页面之间的快速切换，可以通过tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面
tabbar配置项：
- selectedColor：选中时文字的颜色
- color：文字的默认颜色
- backgroundColor：当前tab栏的背景色
- borderStyle：tab栏上方border是否需要，可选项"white"和"black"
- position：tab栏的位置，可选项"top"（tab栏在顶部，此时icon不会显示）
- list：tab栏的内容
tabbar配置list的要求：
5、页面配置
小程序的页面配置也称局部配置，每一个小程序页面也可以使用自己的.json文件对本页面的窗口表现进行配置。
页面配置文件的属性和全局配置文件中的window属性几乎一致，只不过这里不需要额外指定window字段，因此如果出现相同的配置项，页面中的配置项会覆盖全局配置文件中相同的配置项。
6、项目配置文件-config.json和配置sass
（1）项目配置文件
在创建项目的时候，每个项目的根目录生成两个config.json文件，用于保存开发者在工具上做的个性化配置，例如和编译有关的配置。当重新安装微信开发者工具或换电脑工作时，只要载入同一个项目的代码包，开发者工具就会自动恢复到当时开发项目时的个性化配置。
- project.config.json：项目配置文件，常用来进行配置公共的配置（与最终编译结果有关的设置必须设置到这里）
- project.private.config.json：项目私有的配置，常用来配置个人的配置
（2）配置sass
与编译结果有关，所以在project.config.json中进行配置
7、配置文件-sitemap.json
配置小程序及其页面是否允许被微信索引，提高小程序在微信内部被用户搜索到的概率。
微信现已开放小程序内搜索，开发者可以通过sitemap.json配置来设置小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发改索引时，小程序的页面将可能展示在搜索结果中。
注：
- 没有sitemap.json则默认所有页面都能被索引
- {“action”:“allow”,“page”:“*”}是优先级最低的默认规则，未显式指明"disallow"的都默认被索引
二、小程序的样式和组件
1、组件
在小程序中不能使用HTML标签，也就没有DOM和BOM，CSS也仅仅支持部分选择器。
小程序提供了WXML进行页面结构编写，同时提供了WXSS进行页面的样式编写
- WXML提供了view、text、image、navigator等标签来构建页面结构，只不过在小程序中将标签称为组件
- WXSS对CSS扩充和修改，新增了尺寸单位rpx，提供了全局的样式和局部样式，另外需要注意的是WXSS仅支持部分CSS选择器
2、尺寸单位rpx
为了解决屏幕适配的问题，微信小程序推出了rpx单位
rpx：时下程序新增的自适应单位，他可以根据不同设备的屏幕宽度进行自适应缩放
开发建议：
- 开发微信小程序时设计师可以用iphone6作为视觉稿的标准，iphone6的设计稿一般是750px
- 如果iphone6作为视觉稿的标准量取多少px，直接写多少rpx即可，开发起来更方便，也能够适配屏幕的宽度
3、全局样式和局部样式
全局样式：指在app.wxss中定义的样式规则，作用域每一个页面，例如：设置字号、背景色、宽高等全局样式
局部样式：指在page.wxss中定义的样式规则，只作用在对应的页面，并会覆盖app.wxss中相同的选择器
4、划分页面结构
小程序常用的组件：
- view组件
- swiper和swiper-item组件
- image组件
- text组件
- navigator组件
- scroll-view组件
- 字体图标
设置整体页面背景色（设置高优先级）
5、轮播图区域绘制
在小程序中，提供了swiper和swiper-item组件实现轮播图
- swiper：滑块视图容器，其中只能放置swiper-item组件
- swiper-item：只可放置在swiper组件中，宽高自动设置为100%，代表swiper中的每一项
在小程序中，如果需要渲染图片，需要使用image组件，常用的属性有4个：
- src属性：图片资源地址
- mode：图片裁剪、缩放的模式
- show-menu-by-longpress：长按图片显示菜单
- lazy-load：图片懒加载（滑动到一定区域才会加载图片）
注意事项：
- image默认具有宽度和高度，宽度是320px高度是240px
- image组件不给src属性设置图片地址，也占据宽和高
6、绘制公司信息区域
在小程序中，如果需要渲染文本，需要使用text组件，常用的属性有2个：
- user-select：文本是否可选，用于长按选择文本
- space：显示连续空格
- ensp：显示空格时会按照中文字符空格一半大小显示
- emsp：显示空格时会按照中文字符空格大小显示空格
- nbsp：按照字符大小进行展示
注意事项：
3. 除了文本节点以外的其他节点都无法长按选中
4. text组件内只支持text嵌套
7、商品导航区域
结合view、image、text的综合案例
8、点击商品导航跳转到商品列表
在小程序中，如果需要进行跳转，需要使用navigator组件，常用的属性有2个：
- url：当前小程序内的跳转链接
- open-type：跳转方式
- navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar页面
- redirect：关闭当前页面，没有返回上一页的箭头，跳转到应用内的某个页面。但不能跳转到tabbar页面
- switchTab：跳转到tabBar页面，并关闭其他所有非tabBar页面
- reLaunch：关闭所有页面，打开到应用内的某个页面
- navigateBack：关闭当前页面，返回上一页面或前几个页面（搭配delta属性，默认是1，如果想返回几级，就写几）
注意事项：
- 路径后可以带参数。参数与路径之间使用
?分隔，参数键与参数值用=相连，不同参数用&分隔。
例如：list/?id=10&name=hua，在onLoad(options)生命周期函数中获取传递的参数 - open-type="switchTab"时不支持传参
9、推荐商品区域-滚动效果
在小程序中，如果想实现内容滚动，需要使用scroll-view组件
scroll-view：可滚动视图区域，适用于需要滚动展示内容的场景，用于在小程序中实现类似于网页中的滚动条效果，用户可以直接通过手指滑动或者点击滚动条来滚动内容。2个属性：
- scroll-x：允许横向滚动
- scroll-y：允许纵向滚动
水平方向的滚动：
垂直方向的滚动：
