微信小程序学习（一）（import和include、页面路由、文件格式、条件渲染、列表渲染）

微信小程序 WXML提供了import和include引用方式

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

import 
import是用来导入模板。

include 
includes用来导入除模板以外的内容。

 

import

import可以在该文件中使用目标文件定义的template，如：

在item.wxml中定义了一个叫item的template：

1.  <!--item.wxml -->

2.  <templatename="item">

3.  <text>{{text}}</text>

4.  </template>

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

1.  <importsrc="item.wxml"/>

2.  <templateis="item"data="{{text: 'forbar'}}"/>

import的作用域

---

import有作用域的概念，即只会import目标文件中定义的template，而不会import目标文件import的template。

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

1.  <!--A.wxml -->

2.  <template name="A">

3.  <text> A template </text>

4.  </template>

1.  <!--B.wxml -->

2.  <import src="a.wxml"/>

3.  <templatename="B">

4.  <text> B template </text>

5.  </template>

1.  <!--C.wxml -->

2.  <import src="b.wxml"/>

3.  <template is="A"/><!-- Error! Can not use tempalte when not import A. -->

4.  <template is="B"/>

include

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

1.  <!--index.wxml -->

2.  <include src="header.wxml"/>

3.  <view> body </view>

4.  <include src="footer.wxml"/>

1.  <!--header.wxml -->

2.  <view> header </view>

1.  <!--footer.wxml -->

2.  <view> footer </view>

 

页面路由

微信小程序页面跳转按照官方文档可以有很多种方法，比如给button绑定方法，navigator标签直接填写url，还可以在tabbar给一个快捷按钮。

重点说明：

***1. tabbar list只能是2-5个，注意格式，最后一个模块不要加逗号“,”。 
2. tabbar不能和页面路由（navigator和bindtap事件）同时设置，同时设置的结果就是，tabbar可以跳转，navigator不能跳转，去掉tabbar的设置，页面路由正常。*

以下是几种方法示意。 
button绑定方法

/* "pages/index/index.wxml" */

<button type="primary" plain bindtap="tomypage"> Go to My Page</button>

/* "pages/index/index.js */

tomypage: function() {
    wx.navigateTo({
    url:'../mypage/mypage'
    })
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

第二种方法是navigator标签，可直接在wxml书写配置

<navigator url="../mypage/mypage"> Go to my Page </navigator>

• 1

第三种方法是在tabbar中添加

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "Home"
      },
      {
        "pagePath": "pages/mypage/mypage",
        "text": "logs"
      }
    ]
  }

 

小程序的文件格式介绍

在项目中我们可以看到四种文件类型： 
- .js后缀的文件是脚本文件，页面的交互等代码在这里实现； 
- .json后缀的文件是配置文件，主要是json数据格式存放，用于设置程序 的配置效果； 
- .wxss后缀的是样式表文件，类似于前端中的css,用于对界面进行美化； 
- .wxml后缀的文件是页面结构文件，用于构建页面，在页面上增加控件。

1.2 pages目录介绍

pages:主要存放小程序的页面文件，其中每个文件夹为一个页面，每个页面包含四个文件，.wxml文件是界面文件，.js是事件交互文件，用于处理界面的点击事件等功能；.wxss为界面美化文件，让界面显示的更加美观；.json为配置文件，用于修改导航栏显示样式等，小程序每个页面必须有.wxml和.js文件，其他两种类型的文件可以不需要。 
注意：文件名称必须与页面的文件夹名称相同，如index文件夹，文件只能是index.wxml、index.wxss、index.js和index.json.

1.3 utils

该文件件主要用于存放全局的一些.js文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用。

module.exports = {  
  formatTime: formatTime  
} 

• 1
• 2
• 3

对于允许外部调用的方法，用module.exports进行声明，才能在其他js文件中用以下代码引入

var util = require('../../utils/util.js')  

• 1

然后就可以调用该方法。

1.4 app.js、app.json、app.wxss

app.js : 系统的方法处理文件，主要处理程序的声明周期的一些方法；例如：程序刚开始运行时事件处理等 
app.json : 系统全局配置文件，设置导航头的颜色，字体大小，下面有没有tabbar等功能，具体页面的配置在页面的json文件中单独修改； 
app.wxss : 全局的界面美化代码

 条件渲染

<!--wxml-->
<view wx:if="{{length > 5}}"> 大于5 </view>
<view wx:elif="{{length > 2}}"> 大于2小于5 </view>
<view wx:else> 小于2 </view>
// page.js
Page({
 data: {
length: '11'
 }
})

wx:if
在MINA中，我们用wx:if="{{condition}}"来判断是否需要渲染该代码块：
<view wx:if="{{condition}}"> True </view>

也可以用wx:elif和wx:else来添加一个else块：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if
因为wx:if 是一个控制属性，需要将它添加到一个标签上。
但是如果我们想一次性判断多个组件标签，我们可以使用一个<block/>标签将多个组件包装起来，并在上边使用wx:if控制属性。
<block wx:if="{{true}}">
 <view> view1 </view>
 <view> view2 </view>
</block>
注意： <block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

wx:if vs hidden
因为wx:if之中的模板也可能包含数据绑定，所有当wx:if的条件值切换时，MINA有一个局部渲染的过程，
因为它会确保条件块在切换时销毁或重新渲染。
同时wx:if也是惰性的，如果在初始渲染条件为false，MINA什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，
用hidden更好，如果在运行时条件不大可能改变则wx:if较好。

列表渲染

1，简单实现列表
<!--wxml-->
<view wx:for-items="{{array}}"> {{item}} </view>
// page.js
Page({
 data: {
array: [1, 2, 3, 4, 5]
 }
})
2，在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
wx:for也可以嵌套，下边是一个九九乘法表
<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>