微信小程序[黑马笔记]

简介

常用组件

视图组件

<!--pages/list/list.wxml-->

<scroll-view class="container1" scroll-y>

  <view>A</view>

  <view>B</view>

  <view>A</view>

</scroll-view>

<!--pages/list2/list.wxml-->

<swiper class="swiper_container" indicator-dots="true" indicator-color="white">

  <swiper-item class="item">

    A

  </swiper-item>

  <swiper-item class="item">

    B

  </swiper-item>

  <swiper-item class="item">

    C

  </swiper-item>

</swiper>

文本组件text/rich-text

<view>

长按选中效果

<text selectable>18580236389</text>

</view>

<view>

解析html字符串

<rich-text nodes="<h1 style='color:red;'>成功</h2>"/>

</view>

button组件

<view>-----通过type指定按钮类型----</view>

<button>默认按钮</button>

<button type="primary">主色调按钮</button>

<button type="warn">警告按钮</button>

  

<view>-----size='mini'小尺寸按钮----</view>

<button size="mini">默认按钮</button>

<button type="primary" size="mini">主色调按钮</button>

<button type="warn" size="mini">警告按钮</button>

  

<view>-----plain镂空按钮----</view>

<button plain>默认按钮</button>

<button type="primary" plain>主色调按钮</button>

<button type="warn" plain>警告按钮</button>

image组件

  

<view>------不保持纵横比，直至填满整个img元素</view>

<image src="/images/1.jpg" mode=""/>

<image src="/images/1.jpg" mode="scaleToFill"/>

  

<view>---------保持纵横比缩放,完整显示</view>

<image src="/images/1.jpg" mode="aspectFit"/>

  

<view>--------保持纵横比,保证一个方向上完整显示</view>

<image src="/images/1.jpg" mode="aspectFill"/>

  

<view>--------固定宽度不变，保持原本宽高比</view>

<image src="/images/1.jpg" mode="widthFix"/>

  

<view>--------固定高度不变，保持原本的宽高比</view>

<image src="/images/1.jpg" mode="heightFix"/>****

小程序API

事件监听API

同步API

异步API

动态操作

数据绑定

  

Page(

  {
   

    // 页面的初始数据

    data:{
   

      //绑定数据

      info:'hello world',

      //绑定属性

      imgSrc:'https://www.itheima.com/images/logo.png',

      //三元运算

      randomNum: Math.random()*10//生成10以内的随机数

    }

  }

)

<!-- //动态绑定数据 -->

<view>

{
   {
   info}}

</view>

  

<view>

<!-- //动态绑定属性 -->

<image src="{
   {imgSrc}} " mode="widthFix"/>

</view>

<!-- 三元运算 -->

<view>

{
   {
   randomNum>=5 ? "success" : "faile"}}

</view>

事件绑定

事件
事件是渲染层（webview）到逻辑层(js)的通讯方式
通过事件将用户在渲染层产生的行为反馈到逻辑层进行业务的处理

常用事件

1. tap----bindtap/bind:tap----click
2. input----bindinput/bind:input
3. change–bindchange/bind:change

事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event,详细属性如下表所示：

定义事件

通过事件给数据赋新值

  

Page(

  {
   

    data:{
   

      count: 0

    },

    //给data中的数据赋新值

    btnTest(){
   

     this.setData(

      {
   

        count: this.data.count+1

      }

     )

    }

  }

)

事件传参

Page(

  {
   

    data:{
   

      count: 0

    },

    //事件传参（data-*,其中*代表的是参数的名字）

    btnTest(e){
   

    this.setData(

      {
   

        count:this.data.count+e.target.dataset.info

      }

    )

    }

  }

)

  

<view>事件传参</view>

<view>

{
   {
   count}}

</view>

<button type="primary" bindtap="btnTest" data-info="{
   {2}}">