微信小程序开发入门（组件）

基础布局容器

view

• hover-class 指定按下去的样式类
• hover-start-time 按住后多久出现点击态，单位毫秒
• hover-stay-time 手指松开后点击态保留时间，单位毫秒

eg：点击“首页”字样，背景颜色变绿

<view hover-class="box">
  首页
</view>

.box{background-color: aquamarine;}

text （行级标签）

1. user-select 文本是否可选，该属性会使文本节点显示为 inline-block
2. space 是否显示空格

nbsp 根据字体设置空格大小
ensp 中文字符空格一半大小
emsp 中文字符空格大小

3. decode 是否解码

block（包装标签）

将block里的东西打包成一个整体

<block wx:if="{{false}}">   
  <view>春眠不觉晓</view>
  <view>处处闻啼鸟</view>
</block>

<block wx:else>
  <view>夜来风雨声</view>    //只显示这一句，改为true只显示前两句
</block>

图像媒体组件

image

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

• show-menu-by-longpress 长按图片显示一些功能
• src 图标路径
• mode 图片裁剪、缩放的模式

heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

audio

• id 唯一标识
• src 路径
• loop 是否循环播放

超链接导航组件

navigator（块元素）

页面链接

• url 跳转链接
  注意： image可以链接外网图像，这个navigator不可以。
• open-type 跳转方式
  navigate 保留当前界面，跳转到应用内的某个界面
  redirect 关闭当前界面，自己独立一个界面（新窗口打开）
  switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
  （navigator默认不能跳到 tabbar 页面，但是用加上这个就可以）
  reLaunch 关闭所有页面，打开到应用内的某个页面

视图容器

scroll-view滚动视图的使用

• scroll-x 允许横向滚动
• scroll-y 允许纵向滚动
• scroll-left 横向滚动条位置
• scroll-top 竖向滚动条位置

<scroll-view scroll-x="ture" scroll-left="20">
    <view class="scrOut">
        <view class="scrBox">首页</view>
        <view class="scrBox">iPhone</view>
        <view class="scrBox">mac</view>
        <view class="scrBox">watch</view>
        <view class="scrBox">ipad</view>
    </view>
</scroll-view>

样式

.scrOut{
  background-color: aquamarine;
  border: 1px solid;
  display: flex;
  flex-wrap: nowrap;
  width: 640px;
}
.scrBox{
  width: 160px;
  margin-right: 20px;
}

#### swiper 滑块视图容器 eg：图片轮滑

<swiper>
	<swiper-item><image src="/pages/img/1.jpg" mode="widthFix"></image></swiper-item>
	<swiper-item><image src="/pages/img/2.jpg" mode="widthFix"></image></swiper-item>
	<swiper-item><image src="/pages/img/3.jpg" mode="widthFix"></image></swiper-item>
</swiper>

常用的表单组件

button 按钮

具体属性看文档

• open-type 微信开放能力
• type 按钮样式类型
• size 按钮大小
• plain 按钮是否镂空
• disabled 是否禁用
• loading 名称前是否带loading图标

checkbox 多选项目

input 输入框

• value 输入框的初始内容（一般用户填写）
• type input类型
• password 是否密码类型
• placeholder 输入框为空时的提示文字
• placeholder-class 指定placeholder样式
• maxlength 最大输入长度，设置为 -1 的时候不限制最大长度
• cursor-spacing 指定光标和键盘的距离

input里的光标设置距离记得加 box-sizing 不然会超出去

<input class="ipt" placeholder="请输入用户名："></input>

.ipt{padding: 0 20rpx;box-sizing: border-box;}

radio 单选按钮

switch 开关选择器

• checked 是否选中

textarea 多行输入框

其他类型的组件

icon 图标

• type icon类型
• color 颜色
• size 大小

<view style="padding: 50px; text-align: center;">
	  <icon type="success" size="60"></icon>
	  <view>提交成功，感谢您的配合！</view>
</view>

progress 进度条

单标签，记得加斜杠/