目录
1.组件
常见的配置文件
pages字段
配置tabBar
"color": 指的是底部栏的背景颜色
"borderStyle": 指的是底部栏上面的一条分割线,默认是"black",设置为"white"看不见
"position": 指的是底部栏放置的位置,可以放在上面但是不显示图标
项目配置文件
project.config.json 配置公共的设置
project.private.config.json 配置个人的设置
与最终编译结果有关的设置必须设置到project.config.json中
在project.config.json文件的setting方法中添加"useCompilerPlugins",这个属性值是一个列表,添加sass属性,并修改页面文件的wxss后缀名为scss;
sitemap.json
没有该属性就默认所有页面都能被索引
所有页面都能被索引,pages值是"*";不想被索引,action值为"disallow",再去设置不想被索引的页面;如果action值为allow,pages值不是*,而是某一个具体的页面,表示只有这一个页面能够被索引
image组件
mode属性 可以显示出图片的某一角,如top left或者top right等;aspectFill该属性值会保持图片的纵横比,即按短边来显示,另一边会进行截取,水平或者垂直方向仅有一处能显示完全;aspectFit该属性值能完全使图片显示出来
show-menu-by-longpress 长按图片显示菜单,如:下载、保存图片、分享给朋友等
lazy-load 图片懒加载,在滑动到一定距离后显示图片
text属性
user-select 长按选中文本,默认是true;只有text标签中才会生效,其它标签中不会生效
space 空格大小,属性值ensp是以中文字符空格一半大小来进行展示(大),属性值emsp是以中文字符空格大小进行展示的(中),属性值nbsp以字符大小来进行展示(小)
页面跳转
页面跳转需要用到navigation组件
url 放置要跳转到的页面的链接 前面要多加一个/
open-type 跳转方式,
- navigate 保留当前页面(有返回箭头),跳转到应用内的某个页面,但是不能跳转到tabBar页面
- redirect 关闭当前页面(没有返回箭头),跳转到应用内的某个页面,但是不能跳转到tabBar页面
- switchTab 跳转到tabBar页面,并关闭其他所有非tabBar页面
- reLaunch 关闭所有页面,打开应用内的某个页面
- navigateBack 关闭当前页面,返回上一页面或者多级页面
在实现页面跳转的过程中可携带参数,路径和参数之间用?分隔,参数名和参数值之间用=连结,多个参数之间用&分隔
但是open-type="switchTab"时不支持传参
open-type="navigateBack" detal="1" 返回页面时,可以自定义一次想要返回的页面数值,默认是1
背景图片的使用
background-image:url()
图片不支持本地地址,可使用网络图片的网址(http开头),或者使用工具将图片转换成base64形式(代码冗长,不建议使用),再或者使用<image/>组件
2.事件系统
事件绑定和事件对象
bind:事件名
bind事件名
事件处理函数需要写到.js文件中,调用事件名来获得事件对象的值
其中搜索框的样式是需要自己来定义的,通过event.detail.value来获取搜索框的值
事件分类以及阻止事件冒泡
冒泡事件:当一个组件的事件被触发后,该事件会向父节点传递
使用bind绑定的事件会触发事件冒泡,想阻止事件冒泡,将bind换为catch
事件传参
data-数据名 自定义数据
使用data-方法传参的时候,多个单词由-连接,连字符写法会转换成驼峰写法;传参的时候,大写字符会转换成小写字符
返回的参数中,currentTarget指的是事件绑定者,而target是触发事件者,在获取参数的时候要注意对象
mark:数据名 自定义数据
使用mark:来传递参数,点击按钮会得到包括view的数据