微信小程序开发(3)---小程序语法篇

微信小程序开发(3)—小程序语法篇

一.新建页面

新建小程序页面有两种方式
官方推荐文件夹名称和页面的名称一致，方便后期的维护
新建页面组件的时候，不需要输入后缀名

注意:对 pages 目录下页面的删除或者新增都需要在 app.json 文件的 pages 数组中进行新增或删除

方式1:

1. 在pages文件夹中右击选择新建文件夹,命名为xxx
2. 右击新建的xxx文件夹 ,选择新建page,命名为跟文件夹名相同

方式2:

1. 在项目中点击app.json文件进入到编辑界面,
2. 对pages配置添加字段 "pages/test/test"
3. 保存配置,自动生成test页面文件夹及内容

效果:

二.设置首页

小程序会把app.json文件中pages数组中排在第一位的页面，当作项目首页进行渲染
但是最终小程序项目的首页，以 entryPagePath 节点设置的为准

方式1:

调整 app.json --> pages 数组中页面路径的前后顺序，即可修改项目的首页

方式2:

1.在 app.json中 pages 同级，配置一个新的节点 entryPagePath节点
2. 传入需要设置为首页的路径即可
效果:

三.wxml语法

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
WXML 中的动态数据均来自对应 Page 的 data。

3.1.数据绑定

具体参考官网 : wxml语法参考

3.1.1) 简单绑定:

数据绑定使用mustache语法(双大括号)将变量包裹起来

使用场景:

//index.wxml
<view>{{msg}}</view>

//index.js
Page({
	data:{
		msg: 'hello MINA'
	}
})

3.1.2) 组件属性:

需要在双括号之内

使用场景:

//index.wxml
<view id="{{id}}"></view>

//index.js
Page({
	data:{
		id: 0
	}
})

3.1.3) 控制属性:

需要在双括号之内

使用场景:

//index.wxml
<view wx:if='show'>展示</view>

//index.js
Page({
	data:{
		show: true
	}
})

3.1.4) 关键字:

需要在双括号之内
true : boolean的值为true表示为真
false : boolean的值为false 表示为假

使用场景:

//index.wxml
<radio checked="{{false}}"><radio>

注意事项: 不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值

3.1.5) 运算:

可以在{{}}内进行简单的运算，支持的有如下几种方式

1. 三元运算
2. 算数运算
3. 逻辑判断
4. 字符串运算
5. 数据路径运算
6. …

3.2.列表渲染 wx:for

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为 item

1. wx:for-item可以指定数组当前元素的变量名，
2. wx:for-index 可以指定数组当前下标的变量名：
3. wx:for也可以嵌套
4. wx:key来指定列表中项目的唯一的标识符

演示:

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

注意:

1. 当wx:for 的值为字符串时，会将字符串解析成字符串数组
2. 花括号{{}}和引号""之间如果有空格，将最终被解析成为字符串
3. wx:key的值以两种形式提供:
   1. 字符串
   2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

3.3.条件渲染 wx:if

1. 在框架中，使用 wx:if=""来判断是否需要渲染该代码块
2. 也可以用 wx:elif 和 wx:else 来添加一个 else 块
3. 因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

演示:

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意: <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

3.4.模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
使用步骤:

1. 定义模板
2. 使用模板

模板的作用域

3.4.1) 定义模板:

使用 name 属性，作为模板的名字。然后在内定义代码片段

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

3.4.2) 使用模板:

• 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

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


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

• is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

3.4.3) 模板的作用域:

模板拥有自己的作用域，只能使用data 传入的数据以及模板定义文件中定义的<wxs /> 模块

3.5 引用

WXML 提供两种文件引用方式import和include

3.5.1) import

import可以在该文件中使用目标文件定义的template
例:在 item.wxml中定义了一个叫item的template

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

在 index.wxml中引用了 item.wxml，就可以使用item模板

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

3.5.2) import 的作用域

import有作用域的概念，即只会import目标文件中定义的template，而不会import 目标文件import的 template。
如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>

<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>

<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

3.5.3) include

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

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>