微信小程序入门（3.常见组件）

一.创建新的页面

在utils文件下的json进行创建
那里的pages就是同页面设定的地方
我们只需要复制自带的文件，然后将index更改为一个新的名字就好了
这里我改成了test1
然后使用快捷键Ctrl+s就可以再次编译
这样子，我们的任务管理器里就多了一个test1 的目录

注意：这里的pages第一个是什么，那开始的页面就是什么

二.view主键

wxml:
主要是用来装别的组件

view里面包裹了需要显示的东西
自带换行功能
view主键一定要对称

<view>我是view主键</view>
<view>我是view主键2</view>
<!--text组件-->
<text>我是text组件1 </text>
<text>我是text组件2</text>

三.text主键

主要用来显示文字的
并不会自动换行，一定是横向发展
一般情况下，我们是竖向填写text组件
wxml:

.fu{
   background:  red;
  
}
.zi{
  background:  yellow;

}

四.view与text对比

wxss;

.fu{
   background:  red;
   padding:10rpx;
}
.zi{
  background:  yellow;
  margin:10rpx;
}

wxml:

<view>我是view主键</view>
<view>我是view主键2</view>
<!--text组件-->
<text>我是text组件1 </text>
<text>我是text组件2</text>
<view class="fu">
   <text class="zi">我是view里的text组件</text>
</view>

看到上图，我们将view组件设为fu类，将text的设置为zi类，然后设定大小，可以看到view组件布满全屏，text组件只有一部分，（view会布满全部，text组件只占满自己的部分）

五.input组件

1.占位符

占位符：placehodder 输入框为空时的占位符

<input placeholder="我是输入框"></input>

隐隐约约能看到一个输入的竖杠，输入新的字符就会把灰色消失
设定占位符颜色

placeholder-style=“color：#74260”

2.value

是一个默认输入，将默认删除以后就是会出现占位符

<input placeholder="我是输入框" value="我是默认输入内容"></input>，

3.type

类型：输入的初始类型

值	说明
text	文本输入键盘
number	数字输入键盘
digit	带小数点的数字键盘
idcard	身份证输入键盘

<input placeholder="我是输入框" value="我是默认输入内容" type="number"></input>，

这里设定默认是数字键盘，在调试里无法看到，我们可以去点击预览，微信扫一扫，就可以看到如下

出现的就是数字键盘

其他

disabled:就是不允许输入的地方
maxlength：最多输入数

六.button组件

是按钮组件

<button> 我是按钮</button>

1.type

增加样式

2.size

变化大小

3.plain

镂空设定

4.其他

disable：禁用按钮