小程序基本语法

小程序的基本语法

小程序的基本语法与Vue、React相似，建议先学它们，在入手小程序，将会轻松不少

WXML

相当于html，用于构建页面的结构

数据绑定

与Vue基本一致，不同的是属性节点内还需要使用双阔号包裹

简单绑定

<!--wxml-->
<view> {{msg}} </view>

// page.js
Page({
  data: {
    msg: '你好世界'
  }
})

属性绑定

双引号内需要加双括号

不加双括号是字符串

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

列表渲染

wx:for

类似v-for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:key

用来指定列表中项目的唯一的标识符。

有两种形式

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

<!--item内存在一个id属性-->
<view wx:for="{{array}}" wx:key="id">
  {{index}}: {{item.message}}
</view>

条件渲染

wx:if与hidden

可以通过wx:if与hidden控制标签元素的出现隐藏

wx:if：是否渲染该标签

hidden：是否显现该标签

与Vue中的v-if、v-show类似

<view wx:if="{{flag}}"> </view>
<view hidden="{{isShow}}"> </view>

block wx:if

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

与vue中的template标签类似，仅仅是一个包装元素，不会在页面中做任何渲染

模板

与vue中的组件类似

可以在模板中定义代码片段，然后在不同的地方调用

定义模板

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用模板

<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

引用

import

配合模板使用

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

include

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

<include src="header.wxml"/>

WXSS

与css基本一致

rpx

可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

js

更改状态使用this.setData({})，与React类似