小程序基础语法

1. 数据绑定

1.1 普通写法

// WXML中
<view> {{ message}} </view>

// js中
Page({
  data: {
    message: 'Hello word!'
 }
})

花括号和引号之间如果有空格，将最终被解析成为字符串

1.2 组件属性

// WXML中
<view id="item-{{index}}"> </view>

// js中
Page({
  data: {
    index: 0
 }
})

1.3 boolean类型

<checkbox checked="{{false}}"> </checkbox>

直接写 checked= false ，其计算结果是⼀个字符串

2. 运算

2.1 三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

2.2 算数运算

// wxml文件中
<view> {{a + b}} + {{c}} </view>

// js文件中
Page({
  data: {
    a: 2,
    b: 5,
    c: 1
 }
})

2.3 逻辑判断

<view wx:if="{{length > 8}}"></view>

2.4 字符串运算

// wxml文件中
<view>{{"张" + name}}</view>

// js文件中
Page({
  data:{
    name: '三'
 }
})

3. 列表渲染

3.1 wx:for
循环项的变量名默认为 item
wx:for-item 可以指定数组当前元素的变量名
wx:for-index 可以指定数组当前下标的变量名
wx:key ⽤来提⾼数组渲染的性能

wx:key 绑定的值 有如下选择

// 1. string 类型，表⽰ 循环项中的唯⼀属性 如

list:[{id:0, name:"张三"},{id:1, name:"李四"}]
wx:key="id"

// 2. 保留字 *this ，它的意思是 item 本⾝ ，*this 代表的必须是 唯⼀的字符串和数组。
list:[1,2,3,4,5,6,7,8]
wx:key="*this"

3.1.1 完整的循环代码

// wxml文件中的内容
<view wx:for="{{array}}" wx:for-item="data" wx:key="id">
 {{index}}: {{data.message}}
</view>

// js文件内容
Page({
  data: {
    array: [{
      id:0,
      message: 'zhangsan',
    }, {
      id:1,
      message: 'lisi'
    }]
 }
})

3.2 block
渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[4, 8, 12]}}" wx:key="*this" >
  <view> {{item}}: -- </view>
  <view> {{index}} </view>
</block>

4. 条件渲染

4.1 wx:if
使⽤ wx:if="{{ 条件 }}" 根据条件来判断是否需要渲染该代码块

有 wx:if / wx:elif / wx:else 写法

  <view wx:if="{{false}}">1</view> 
  <view wx:elif="{{true}}">2</view>
  <view wx:else>3</view>

4.2 hidden

<view hidden="{{flag}}"> True </view> // flag为true则隐藏，否则展示

频繁切换 ⽤ hidden， 不常使⽤ ⽤ wx:if

5. 事件的绑定

⼩程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等 不同的组件⽀持不同的事件。

// wxml文件中，给input绑定了输入事件
<input bindinput="handleInput" />   

// js文件中
Page({
  // 绑定input事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改变了");
  }
})

5.1 事件传递参数
由于绑定事件时不能带括号， 以下为错误写法

<input bindinput="handleInput(200)" />

事件需要传递参数时，我们可以通过给标签⾃定义属性的⽅式 和 value来给方法传递参数

<input bindinput="handleInput" data-item="200" />

事件触发时获取数据

 handleInput: function(e) {
    // {item:200}
   console.log(e.currentTarget.dataset)
      
    // 输入框的值
   console.log(e.detail.value);
 }

6. 样式 WXSS

WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。 与 CSS 相⽐，WXSS 扩展的特性有：

• 响应式⻓度单位
• rpx 样式导⼊

6.1 尺⼨单位
rpx （responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在iPhone6 上，屏幕宽度为 375px ，共有750个物理像素
则 750rpx = 375px = 750物理像 750rpx = 375px = 750物理像素 ， 1rpx = 0.5px = 1物理像素 1rpx = 0.5px = 1物理像素 。

使⽤步骤：

1. 确定设计稿宽度 pageWidth
2. 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。
3. 在less⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

6.2 样式导⼊
wxss中直接就⽀持，样式导⼊功能。
也可以和 less中的导⼊混⽤。
使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径

示例代码

/** common.wxss **/
.small {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle {
   padding:15px;
}

6.3 选择器
⼩程序 不⽀持通配符 * 因此以下代码⽆效！
⽬前⽀持的选择器有：