数据渲染

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

Page({
  /**
   * 页面的初始数据
   */
  data: {
    message:"hello word",
  },

查看当前页面数据

如若数据没有更新，点击编译

事件绑定

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染产生行为，反馈到逻辑层进行业务的处理。

小程序中常用的事件

类型	绑定方式	事件描述
tap	bindtab 或 bind:tab	手指触摸后马上离开，类似click事件
input	bindinput 或 bind:input	文本框输入事件
change	bindchange 或 bind:change	改变状态时触发

事件对象属性列表

常用属性target、detail

属性	类型	说明
type	string	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

target和currentTarget的区别

点击内部按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。此时，对于外层view来说：

e.target指向的是触发事件的源头组件，因此，e.target的内部的按钮组件
e.currentTarget指的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件

bindtap语法格式小程序中，不存在HTML中onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。语法如下：

<button bindtap="btnTapHandler">按钮</button>

Page({
  btnTapHandler(e){
    console.log(e)
  },
})

data数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下

 <button bindtap="changeCount">{{count}}</button>

Page({
  data:{
    count:0,
  },
  changeCount(e){
    this.setData({count:this.data.count+1})
  },
})

事件传参

小程序的事件传参比较特殊，不能在绑定事件的同时为事件的处理函数传参。例如：

 <button type="primary" bindtap="btnHandler(123)">事件传参</button>

因为小程序会把bindTap的属性值，统一当做事件名称处理，相当于要调用一个名为btnHandler(123)的事件处理函数可以为组件提供data-自定义属性传参，其中代表的是参数名字，如：

 <button type="primary" bindtap="btnHandler" data-info="{{2}}">事件传参</button>

info：参数的名字
2：参数的值

参数获取

参数通过“event.target.dataset.参数名”获取参数值，如：

  btnHandler(event){
  //  dataset是一个对象，包含了所有通过data-*传过来的参数
   console.log(event.target.dataset.info) 
  },

bindinput语法格式

小程序中，通过input事件来响应文本框输入事件，语法格式如下：

通过bindinput，为文本框绑定输入事件

 <input type="text" bindinput="inputHandler"/>

在页面js文件中定义事件处理函数

  inputHandler(e){
   // e.detail.value 是变化后，文本框最新值
   console.log(e.detail.value)
  }

文本框和data之间数据同步

定义数据

Page({
  data:{
    msg:0,
  }
})

渲染结构

 <input value="{{msg}}" bindinput="inputHandler"/>

美化样式

input{
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #eee;
}

绑定input事件处理函数

  inputHandler(e){
   // e.target.value 是变化后，文本框最新值
   this.setData({msg:e.detail.value})
  },

条件渲染

如果一次性控制多个组件的展示与隐藏，可以使用一个标签将多个组件包裹起来，不是一个组件，只是一个包裹性质的容器，不会在页面中渲染

wx:if

      <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
      </block>
      <block wx:elif="{{!hasUserInfo}}">
      </block>
      <block wx:else>
      </block>

hidden

小程序中，直接使用hidden="{{condition}}" 也能控制小程序的显示与隐藏：

     <view hidden="{{condition}}">条件为true隐藏，为false显示</view>

wx:if 与 hidden 对比

运行方式不同

wx:if以动态创建或移除元素的方式，控制元素的展示与隐藏
hidden以样式切换的方式（display:none/block）,控制元素的显示与隐藏

使用建议

频繁切换时，使用hidden
控制条件复杂时，建议使用wx:if、wx:else进行展示与隐藏

列表渲染

wx:for

通过wx:for可以循环渲染重复的组件结构，如：

 <view wx:for="{{arr}}">索引是：{{index}},item是{{item}}</view>

默认情况下，当前循环项的索引用index表示；当前循环项用item表示。

指定索引和当前项变量名

使用wx:for-index可以指定当前循环项的索引的变量名
使用wx:for-item可以指定当前项变量名

 <view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="name">
  索引是：{{idx}},item是{{name}}
 </view>

wx:key

类似于Vue列表中:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下：

<view 
   wx:for="{{arr}}" 
   wx:for-index="idx" 
   wx:for-item="name" 
   wx:key="index">
  索引是：{{idx}},item是{{name}}
 </view>

WXSS模版样式

wxss和css的关系

wxss具有css大部分特性，同时wxss还对css进行扩充以及修改，以适应小程序开发。与css相比，wxss扩展的特性有：

rpx尺寸单位
@import样式导入

rpx尺寸单位

rpx(responsive pixel)是微信小程序独有的，用来解决屏幕适配的尺寸单位。

rpx的实现原理

鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕总宽度为750rpx）

在较小设备上，1rpx所代表的宽度较小
在较大设备上，1rpx所代表的宽度较大

小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成为对应的像素单位来渲染，从而实现屏幕适配。

rpx与px之间的单位换算

在iPhone6上，屏幕宽度375px，共有750个物理像素，等分为750rpx。则

750rpx=375px=750物理像素
1rpx=0.5px=1物理像素

官方建议：开发微信小程序时，设计师可以使用iPhone6作为视觉设计标准。

例如：在iPhone6上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为200rpx和40rpx

样式导入

wxss提供的@import语法，可以导入外联样式表。

@import "/common/common.wxss";

全局样式

定义在app.wxss中的样式为全局样式，作用于每一个页面

局部样式

在页面的wxss文件中定义的样式为局部样式，指作用于当前页面。

当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
当局部样式的权重大于或等于全局样式权重时，才会覆盖全局样式

初识小程序-基础语法