“我正在参加「掘金·启航计划」”

接上一篇文章，今天继续来学习微信小程序吧

一、表单组件

1、input 输入框

placeholder ----- 提示文本

password=true --- 密码框

type	弹出不同键盘
text	文本输入键盘
number	数字输入键盘
digit	带小数点的数字键盘
idcard	身份证输入键盘
safe-password	密码安全输入键盘

2、button按钮

type	颜色类型
primary	绿色
default	白色
warn	红色

3、switch 开关选择器

color --- 颜色

type =“checkbox” --- 选择框

二、容器组件

1、scroll-view可滚动视图区域

scroll-x 水平，允许横向滚动

scroll-y 垂直，允许纵向滚动

    <scroll-view class="s1" scroll-y="true">
        <view class="item" style="background-color: rgb(255, 242, 126);">1</view>
        <view class="item" style="background-color: rgb(126, 195, 255);">2</view>
    </scroll-view>

2、swipe滑块视图容器

其中只可放置swiper-item组件

indicator-dots="true" --- 是否显示提示点

autoplay="true" --- 自动播放

circular="true" --- 衔接滑动

<swiper class="swiper" autoplay="true" circular="true" indicator-dots="true">
    <swiper-item>
        <view style="background-color: rgb(255, 242, 126);">1</view>
    </swiper-item>
    <swiper-item>
        <view style="background-color: rgb(126, 195, 255);">2</view>
    </swiper-item>
</swiper>

三、条件渲染

所谓的条件渲染就是判断是否需要把代码渲染到展示页面上。使用以下三种方式可以实现条件渲染，各自有不同的应用场景，只有熟练掌握其用法，在使用时才能得心应手。

1、wx:if实现条件渲染

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}">True<view>

如果condition的值为true，就会在页面上渲染出view组件，否则将不会显示该组件。同时还可以结合wx:elif和wx:else来使用，此时可以进行多条件的判断是否渲染该代码。

2、block结合wx:if使用

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

3、hiden实现条件渲染

在框架中，使用 hidden="" 来控制组件的显示与隐藏。与前面不同的是，hidden组件始终会被渲染，只是简单的控制显示与隐藏。

<view hidden="{{false}}">当条件为true时则会隐藏该元素</view>

4、 wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

四、事件绑定

1、微信小程序的事件类别

tap：点击事件

input：输入事件

longtap：长按事件；

touchstart：触摸开始；

touchend：触摸结束；

touchcansce：取消触摸；

注1：小程序中请求处理方法是不能传递参数，正确方式：通过data-xxx属性传递参数，再通过事件源获得参数

注2：小程序中默认绑定为单向绑定

2、微信小程序的事件绑定

bind绑定；

catch绑定；（能阻止事件冒泡）

3、微信小程序接收参数的示例

//接收参数
        Page({
          onLoad: function(options) {
            //小程序Data的赋值必须使用setData方法，错误：this.Data.title='xxx'; 
            this.setData({
              title: options.title
            })
          }
        })

前端小白&微信小程序二