小程序中常用的组件

1.text文本

1.1 selectable 默认值为false，表示文本长按是否为可选值。

1.2 space 默认值为false，表示是否显示连续的空格，可选值：ensp 表示英文空格 emsp 表示中文空格 nbsp 表示直接显示，不进行解析

1.3 decode 表示将特殊字符进行解码，可解析， &nbsp,&lt,&gt,&amp,&apos,&ensp,&emsp

2.view视图容器

2.1 hover-class 表示手指按下去的样式类，默认为none，没有任何效果

2.2 hover-start-time 表示手指按下去多久，显示样式类，默认为50ms

2.3 hover-stay-time 表示手指松开，类名样式显示时间 ，默认400ms

2.4 hover-stop-propagation 默认为false，表示是否阻止此节点的祖先节点也就是上一级节点出现相同样式类的状态

3.button 按钮

size 表示按钮大小，默认值为default

type 表示按钮的样式

plain 表示按钮是否为镂空，处于透明状态

disabled 表示按钮是否为禁用状态

loading 表示点击按钮前面是否有一个转圈圈的等待按钮

4.input输入框

value 表示输入框的初始内容

type 表示文本框的input类型

password 表示文本框是否为一个密码类型的输入框

placeholder 输入框为空时的占位符

disabled 表示此文本输入框是否被禁用，禁用之后就不能输入内容

5.image

在使用图片属性中，和html中的不同

在小程序中，使用的是image表示图片标签

常见属性：src 支持本地图片和网络图片的上传

mode 表示指定图片的裁剪和缩放模式

注：image组件默认的宽度为300px，宽度为225px，

6. 什么是wxss

wxss 是一套样式语言，用来决定wxml的组件应该该怎么显示

wxss具有css大部分特性，但是对css进行了扩充和修改，以适应小程序的开发

扩展特性：尺寸单位，样式导入

wxss支持css中选择器，但是在属性的选择器之前要加上data，才能进行使用。

7.rpx尺寸单位

rpx：是微信小程序独有的，解决屏幕上自适应的尺寸单位。

可以根据屏幕宽度进行自适应，不论屏幕大小，规定屏幕为750rpx

通过rpx设置元素和字体大小，小程序在不同尺寸的屏幕上，可以实现自动适配

8.rpx和px之间的换算

1rpx====0.5px====1物理像素

9.@import 样式导入

1.使用@import语句可以导入外联样式表

2.语法格式：@import ‘wxss样式表的相对路径’

10.全局样式和局部样式

1.全局样式：定义在app.wxss中的样式表为全局样式表，作用于每一个样式表

2.局部样式表：在page的wxss文件中定义的样式为局部样式，只作用于对应的页面，并会覆盖app.wxss中的相同选择器

注：当局部样式表的权重大于或等于全局样式的权重时。才覆盖全局样式效果。

11.app.json配置文件的作用

小程序根目录下的app.json文件用来对微信小程序进行全局配置，它决定了页面的路径，窗口表现，设置网络超时时间，设置多tab等

在app.json配置文件中，最主要的配置节点

1.pages数组中，配置页面路径

window对象：用于设置小程序的状态栏，导航条，标题，窗口背景色

tabBar对象：配置小程序的tab栏效果

12 pages--配置小程序的页面路径

1.pages用于指定小程序由哪些页面组成，每一项都对应一个页面路径+文件名信息

2.文件名不需要写后缀，框架会自动寻找对应位置的json，js，wxml，wxss四个文件进行处理

3.自动创建页面路径

3.1.之前创建页面，需要新建页面目录--新建文件---修改pages数组

3.2 现在推荐的方式：在app.json --pages节点---新增页面路径并保存--自动创建页面路径对应的页面

4.设置默认首页

4.1打开app.json--pages节点

4.2 按需调整数组中的路径顺序，即可修改默认首页

注：数组中的第一项代表小程序的首页，小程序页面的增加/减少页面，都需要对pages数据进行修改、

小程序的内容还有很多，还在努力学习当中，希望你也努力加油，