微信小程序--基础内容（详解）（一）

一、常用标签

1、view 标签

view 标签是一个块级元素，类似于 div（小程序里面没有div标签），里面可以放任何内容或者插值表达式，如下所示：

<view>这是view标签<view>
<view>{{num}}</view>

2、text 标签

text 标签是一个文本标签，行内标签，类似于 span 标签（小程序没有span标签），Tips：可以添加selectable 属性，长按选中，仅 text 标签支持，如下：

<text selectable>这是一段优美的文字</text>

3、scroll-view 标签

scroll-view 标签表示滚动，scroll-x 是水平方向滚动，scroll-y 是垂直方向滚动。
水平方向滚动：

<scroll-view scroll-x class="scroll">你是小可爱你是小可爱你是小可爱你是小可爱
你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱
你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱</scroll-view>

垂直方向滚动：

<scroll-view scroll-y class="scroll">你是小可爱你是小可爱你是小可爱你是小可爱
你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱
你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱</scroll-view>

Tips：wxss 样式书写：

.scroll{
  width: 200rpx;
  height: 200rpx;
  /* 水平方向滚动时，需加上以下一行代码 */
  /* white-space: nowrap; */
}

4、swiper 标签

swiper 标签是轮播图效果，swiper 标签包裹 swiper-item 标签，该标签身上的属性有以下几种：
indicator-dots 小圆点
indicator-color=“black” 未激活小圆点的颜色
indicator-active-color=“white” 已激活小圆点的颜色
autoplay 自动切换
interval=“3000” 切换时间（3000毫秒）
circular 衔接滑动

5、button 标签

button 标签是按钮标签，button 身上有以下几种属性：
type 属性修改按钮类型，有 primary、warn、default
size 属性可以设置按钮的大小，有 mini
plain 镂空效果，无背景色，有边框
实例：

<button type="default">default按钮</button>
<button type="primary">primary按钮</button>
<button type="warn">warn按钮</button>
<button size="mini">小按钮</button>
<button plain>镂空按钮</button>

6、image 标签

image 标签用来引入图片，可添加 mode 属性，可选值：aspectFit（保持纵横比）
aspectFill（填充，等比例放大）
widthFix（宽不变，高度自适应）
heightFix（高不变，宽度自适应）

<image src="/images/01.png" mode="aspectFill"></image>

7、rich-text 标签

rich-text 标签内部可以嵌套 html 标签，如下所示：

<rich-text nodes="<h1>一级标题</h1>"></rich-text>

其余可参考官方文档：微信官方文档

二、数据绑定

Mustache 语法 {{ }}，又叫插值表达式，用来动态绑定数据。

1、简单绑定

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello!'
  }
})

2、事件绑定

（1）bindtap

手指触摸后离开触发事件，类似于 click 点击事件。

<view>点击按钮数字 + 1：{{num}}</view>
<!-- 点击事件绑定 -->
<button type="default" bindtap="addNum" data-val="{{10}}">+1</button>

Page({
  data: {
  num:0,
  },
  addNum(){
    this.setData({
      num: this.data.num += 1
    })
  }
})

Tips: 微信小程序的 js 文件中，获取数据使用 this.data.xxx
修改数据，给数据赋新值必须在 this.setData({ }) 内部书写

bindtap 可传递参数，
传参：data-名称= {{}}
接收参数：event.currentTarget.dataset.名称

<button type="default" bindtap="getNum" data-val="{{10}}">+1</button>

可以打印出 10

 getNum(e){
    console.log(e.currentTarget.dataset.val),
  },

（2）bindinput

文本框输入时触发事件，可以实现数据双向绑定，在小程序内部，没有 v-model 语法糖，可以使用 value 属性和 input 事件实现双向绑定。

<input type="text" value="{{txtVal}}" bindinput="addTxt"/>
<view>{{txtVal}}</view>

Page({
  data: {
  txtVal: '默认值'
  },
  addTxt(e){
    this.setData({
      txtVal: e.detail.value
    })
  }
})

三、条件渲染

条件渲染相当于 html 里面的 if 语句，在小程序里是这样：
wx:if 还有与之配套的wx:elif 和 wx:else

1、单条件渲染

wx:if 和 wx:else 可以实现显示与隐藏效果：

<button type="primary" wx:if="{{!isCollect}}" bindtap="changeIsCollect">收藏</button>
<button type="warn" wx:else bindtap="changeIsCollect">取消收藏</button>

Page({
  data: {
  isCollect: false
  },
  changeIsCollect(){
    this.setData({
      isCollect: !this.data.isCollect
    })
  }
})  

默认显示收藏按钮

点击之后，显示取消收藏按钮

hidden 可实现相同效果，具体如下：

<button type="primary" bindtap="hidden">显示与隐藏</button>
<button hidden="{{hiddenName}}">测试hidden隐藏效果</button>

Page({
  data: {
  hiddenName:false,
  },
  hidden(){
  this.setData({
    hiddenName: !this.data.hiddenName
  })
 }
})

2、多条件渲染

<view wx:if="{{myValue==='a'}}">张三</view>
<view wx:elif="{{myValue==='b'}}">李四</view>
<view wx:elif="{{myValue==='c'}}">王二</view>
<view wx:else>麻子</view>

Page({
  data: {
  myValue: 'b',
  },

因为当前设置的 myvalue 值是 ‘b’ ，所以显示的是李四

四、列表循环

语法：wx:for 一般搭配 wx:key ， key 值一般设置为 id ，如果没有 id ，可设置 index 索引，key 值不设置会有警告 。item 项就是内容，数组和 item 项一般都用Mustache语法{{ }}包裹，可以动态渲染。

1、简单遍历数组

<!-- 列表循环，循环数组 -->
<view wx:for="{{arr1}}" wx:key="index">内容是：{{item}}</view>

Page({
  data: {
  arr1: [10,20,30]
  }
})

2、遍历二维数组

<!-- 二维数组 -->
<view wx:for="{{arr2}}" wx:key="id">{{item.name}}今年{{item.age}}岁了</view>

Page({
  data: {
    arr2: [
    {id: 1, name: '欧阳', age: 21},
    {id: 2, name: '上官', age: 22},
    {id: 3, name: '司徒', age: 23}
  ],
  }
})

3、多维数组遍历方式

多维数组渲染的时候，给内部数组加了一个 wx:for-item=“student” , 只是为了增强可读性，加不加都可以，如果不加，可以直接渲染 {{ item }} 即可。

<view wx:for="{{arr3}}" wx:key="id">
{{item.className}}班的学生有：
<text wx:for="{{item.students}}" wx:key="index" wx:for-item="student">{{student}}</text>
</view>

Page({
  data: {
    arr3: [
    {id: 1,
    className: '一班',
    students: ['小花，小草，小林']
    },
    {id: 2,
    className: '二班',
    students: ['叶子，木子，虎子']
    },
    {id: 3,
    className: '三班',
    students: ['洋洋，姗姗，盈盈']
    }
  ]
  }
})

4、修改数据

修改对象或者数组中的属性：
修改对象数据 [ ’ 对象名 .键名 ’ ]
修改数组数据 [ ’ 数组名[索引] . 键名 ']

<!-- 修改数据 -->
<view>{{obj1.name}}已经{{obj1.age}}岁了，工作是: {{obj1.job}}</view>
<button bindtap="changeData">点击修改数据</button>

Page({
  data: {
    arr2: [
    {id: 1, name: '欧阳', age: 21},
    {id: 2, name: '上官', age: 22}
  ],
   obj1: {
    name: '张三',
    age: 20,
    job: 'web开发'
  }
 },
   changeData(){
   this.setData({
      // 每点击一次，让张三的年龄 + 1
      ['obj1.age']: this.data.obj1.age + 1,
      // 把数组2中欧阳的姓名改成南宫
      ['arr2[0].name']: '南宫'
    })
  },
})

点击按钮之前：

点击按钮之后：

时间有限，这些是微信小程序基础入门，后期还会继续更新~~