小程序入门第一天
1.创建小程序
2.各种文件作用
一个完整的小程序项目分为两个部分：主体文件、页面文件
主体文件又称全局文件，能够作用于整个小程序，影响到小程序的每个页面，主体文件必须放到项目的根目录下主体文件由三部分组成：
- 1.app.js：小程序入口文件
- 2.app.json：小程序的全局配置文件
- 3.app.wxss：小程序的全局样式
页面文件是每个页面所需的文件，小程序页面文件都存放在 pages 目录下，一个页面一个文件夹
每个页面通常由四个文件组成，每个文件只对当前页面有效
- .js：页面逻辑
- .wxml：页面结构
- .WXSS：页面样式
- .json：小页面配置
3.新建页面与配置
- 新建页面
- 配置
app.json
{ "entryPagePath": "pages/index/index", "pages": [ "pages/index/index", "pages/user/user" ], "window": { "navigationBarTitleText": "app", "navigationBarBackgroundColor": "#f3514f", "enablePullDownRefresh": true }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "text", "iconPath": "", "selectedIconPath": "" }, { "pagePath": "pages/user/user", "text": "text", "iconPath": "", "selectedIconPath": "" } ] }, "style": "v2", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }
project.config.json 在setting下添加
"useCompilerPlugins": [
"sass"
]
4.rpx
rpx：是小程序新增的自适应单位，它可以根据不同设备的屏幕宽度进行自适应缩放
小程序规定任何型号手机：屏幕宽都为750rpx
5.组件
- view 视图容器 类似 div
- swiper 轮播图组件 里面只能是 swiper-item
- swiper-item 写在 wiper 内
- text 文本
- icon 图标
- image 图片
- navigator 跳转
- ......
6.事件
第一种方式：bind:事件名，bind 后面需要跟上冒号，冒号后面跟上事件
第二种方式：bind事件名，bind 后面直接跟上事件名
bind会导致冒泡
当不需要用到事件冒泡时可以用catch
事件传参
事件传参：在触发事件时，将一些数据作为参数传递给事件处理函数的过程，就是事件传参
在组件上通过data-的方式定义需要传递的数据，其中是自定义的属性，例如：<viewdata-id="100"bindtap="handler"/> 然后通过事件对象进行获取自定义数据
注意1：urrentTarget事件绑定者，也就是指：哪个组件绑定了当前事件处理函数，arget 事件触发者，也就是指：哪个组件触发了当前事件处理函数
注意2：传递数据时，用-来连接多个词，接受数据时是小驼峰写法，例如传递参数时 data-person-id="1"，那么接受参数为 e.target.dataset.personId。传递数据时是小驼峰写法，接收数据全为小写，例如 data-personId="1"， 那么接受参数为 e.target.dataset.personid
小程序进行事件传参的时候，除了使用data-*属性传递参数外，还可以使用mark标记传递参数
mark是一种自定义属性，可以在组件上添加，用于来识别具体触发事件的target节点。同时mark还可以用于承载一些自定义数据
在组件上使用mark:自定义属性的方式将数据传递给事件处理函数，例如：<view mark:id="100"bindtap="handler"/> 然后通过事件对象进行获取自定义数据
- mark 和 data-* 的区别
mark 和 data-* 很相似，主要区别在于：mark 包含从触发事件的节点到根节点上所有的 mark: 属性值currentTarget.dataset 或者 target.dataset 只包含事件绑定者或者事件触发者那一个节点的 data-* 值
