前言

看到很多同学留言，继续更新的系列文章
《微信小程序开发快速入门-小程序之开发前准备（1/5）》
《微信小程序开发快速入门-第一个页面编写（2/5）》上次是编写了一个简单的静态页面，今天升级下难度讲解下跳转页面以及列表页面编写。

如何从启动页去列表页？

上章完成了备忘录启动页面，下一个页面就是列表页面。

我们先新建一个页面叫做list，新建完成之后list页面会自动配置到app.json。

这个时候我们小程序加载默认还是index页面，那么如何让它去list页面呢？在这里就需要用到小程序的「路由」。我们看到下面有很多路由到方法，那么到底该用哪个呢？

路由

简单介绍一下：

1. wx.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
2. wx.reLaunch：关闭所有页面，打开到应用内的某个页面
3. wx.redirectTo：关闭当前页面，跳转到应用内的某个页面。
4. wx.navigateTo：保留当前页面，跳转到应用内的某个页面。（最常用）
5. wx.navigateBack：关闭当前页面，返回上一页面或多级页面。

基于业务来看，我们需要跳转到列表页面，但是我们不需要再回来了。所以我们要使用的是 redirectTo 这个函数来。

然后我们是需要通过点击首页的按钮一下启动按钮进行跳转，所以只是找到路由API还是不能完成跳转的，这个时候就需要在这个按钮上面绑定上一个「事件」。

事件

我们了解了路由和事件之后，接下来就需要在image组件上面添加一个 bindtap（点击事件）绑定index.js 里面的 toList（跳转页面的函数），然后在这个函数里面调用路由API。

index.wxml

<view class="container">
  <image src="/images/home_logo.png" class="logo" ></image>
  <image bindtap="toList" src="/images/home_btn.png" class="btn"></image>
</view>

index.js

Page({
  /**
   * 只贴了使用到的方法，其他方法省略
   */
  // 跳转到列表页面
  toList() {
  // 只需要将你需要跳转的页面设置到url参数上即可
    wx.navigateTo({
      url: '../list/list',
    })
  },
})

导航

除此之外还有一种写法，不需要绑定事件，在wxml使用「导航」组件即可。

<view class="container">
  <image src="/images/home_logo.png" class="logo"></image>
  <navigator url="/pages/list/list"  open-type="redirect">
    <image src="/images/home_btn.png" class="btn"></image>
  </navigator>
</view>

这样写的话，我们会发现默认有个点击效果，有点影响美观程度。通常遇到这种情况我们可以查下相关文件可以如何去除掉。

在这里再分享一个小技巧，鼠标悬浮到组件上面会会显示一个文档地址提示，直接点击就可以到指定文档了。

查阅navigator文档，我们可以看到hover-class属性设置为“none”就可以去除掉点击效果。
通常这些常用的属性官方组件都会有解决方案，所以遇到问题先详细看看文档大部分的问题都可以得到答案。

<view class="container">
  <image src="/images/home_logo.png" class="logo"></image>
  <navigator url="/pages/list/list" hover-class="none" open-type="redirect">
    <image src="/images/home_btn.png" class="btn"></image>
  </navigator>
</view>

加上这个属性完美解决！
如果是简单的跳转我建议使用导航组件来实现。通常绑定事件都是需要处理复杂处理业务逻辑或者处理数据处理，不是单纯的跳转逻辑。写代码要注重能简单体现就简单点，这样代码可读性更强一些。

到这里我们就做到了从启动页去到了列表页面。在这个小节学习到路由、事件、导航，简单总结下：

• 路由：用于页面之间的跳转、传参
• 事件：⽤于让⻚⾯组件监听⽤户交互
• 导航：组件版本的简单路由

备忘录列表页

我们好不容易来到了列表页，于是开始了我们的列表页的布局编写。在开始布局之前我们先做一件事情，这个事情可以让我们在编写布局过程中提升效率，这件事情是什么事情了？

将列表页面添加编译模式。因为在布局的过程中肯定涉及到反复编译当前页面样式，要不断写样式来看效果，如果不添加编译模式那么每次都需要从启动页点击跳转到列表页，这样就会很低效，并且这个是重复无效率的时间浪费。

添加完成之后，小程序开发工具会自动选中这个页面模式，我们现在就可以开启我们的高效编码了。写布局的第一步，先分析布局结构。

列表页面布局从上往下看，一共分成两个大块：一是头部欢迎语，二是内容部分：有备忘录数据提示。
在继续向下分析头部：一个气泡然后里面有个头像和欢迎语，内容：没有数据的时候显示空布局提示还有新建按钮。然后把大概的布局结构写出来，我们得到这样的布局代码

<view>
  <!-- 头部 -->
  <view>
    <view>
      <!-- 头像 -->
      <image></image>
      <!-- 问候语 -->
      <text>,你来了？</text>
    </view>
  </view>
  <!-- 内容部分 -->
  <view>
    <!-- 提示图 -->
    <image src="../../images/empty.png"></image>
    <!-- 提示语 -->
    <text>这里空空</text>
    <!-- 新建按钮 -->
    <view>+ 新建</view>
  </view>
</view>

然后看下页面效果：

是不是有点看不下去？不过这个没关系，我们把大概的结构写好之后就让它一步一步的变得美丽起来。首先从头部开始，先设置一个背景图填充下头部。

.head_bg{
  width: 750rpx;
  height: 540rpx;
  background-image: url(../../images/head_bg.png);
}

在页面使用这个样式的时候小程序会报错。

解决方案可见《微信小程序如何设置背景图片？》

解决后效果如下：

接下来写一下问候语部分布局的样式，先看设计图：

先看下布局代码，从结构上有一点变化。

<view>
  <!-- 头部 -->
  <view class="head-bg">
    <view class="head-bubble">
      <!-- 头像 -->
      <image class="user-avatar" src="头像地址">
      </image>
      <!-- 问候语 -->
      <text>，你来了？</text>
    </view>
  </view>
  <!-- 省略部分无关代码 -->
</view>

再看看样式部分，气泡背景和头部背景布局原理一样。气泡布局用定位属性（position）定到了码仔的右边，气泡内的布局采用的是flex布局，然后里面做了下头像和欢迎语的外边距微调。

.head-bg {
  width: 750rpx;
  height: 540rpx;
  background-image: url('https://6465-demo-3gf9i3wu06a03ab1-1306451997.tcb.qcloud.la/head_bg.png');
  background-size: 100% 100%;
}

.head-bubble {
  width: 286rpx;
  height: 127rpx;
  background-image: url('https://6465-demo-3gf9i3wu06a03ab1-1306451997.tcb.qcloud.la/bubble.png');
  background-size: 100% 100%;
  position: absolute;
  left: 38rpx;
  top: 230rpx;
  display: flex;
  flex-direction: row;
}

.user-avatar {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 35rpx;
  margin-top: 23rpx;
}

.head-bubble text {
  margin-left: 10rpx;
  margin-top: 30rpx;
  color: #6A5100;
  font-size: 28rpx;
}

头部布局已完成，接下来搞定内容部分。相对头部布局，内容部分就简单多了，先看设计图：

这个布局相对简单。

<view>
  <!-- 头部 -->
  <view class="head-bg">
    <view class="head-bubble">
      <!-- 头像 -->
      <image class="user-avatar" src="头像地址">
      </image>
      <!-- 问候语 -->
      <text>，你来了？</text>
    </view>
  </view>
  <!-- 内容部分 -->
  <view class="content">
    <!-- 提示图 -->
    <image src="../../images/empty.png"></image>
    <!-- 提示语 -->
    <text class="content-tip">这里空空如也</text>
    <!-- 新建按钮 -->
    <view class="content-btn">+ 新建</view>
  </view>
</view>

/* 头部样式 */
.head-bg {
  width: 750rpx;
  height: 540rpx;
  background-image: url('https://6465-demo-3gf9i3wu06a03ab1-1306451997.tcb.qcloud.la/head_bg.png');
  background-size: 100% 100%;
}

.head-bubble {
  width: 286rpx;
  height: 127rpx;
  background-image: url('https://6465-demo-3gf9i3wu06a03ab1-1306451997.tcb.qcloud.la/bubble.png');
  background-size: 100% 100%;
  position: absolute;
  left: 38rpx;
  top: 230rpx;
  display: flex;
  flex-direction: row;
}

.user-avatar {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 35rpx;
  margin-top: 23rpx;
}

.head-bubble text {
  margin-left: 10rpx;
  margin-top: 30rpx;
  color: #6A5100;
  font-size: 28rpx;
}
/* 内容样式 */
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content image {
  width: 380rpx;
  height: 313rpx;
  margin-top: 100rpx;
}

.content-tip {
  width: 162rpx;
  height: 25rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #CCCCCC;
  margin-top: 30rpx;
  margin-bottom: 40rpx;
}

.content-btn {
  width: 340rpx;
  height: 90rpx;
  background: #F8D300;
  border-radius: 20rpx;
  color: #FFFEFE;
  text-align: center;
  line-height: 90rpx;
}

在这里再告诉大家一个小技巧，在微调样式的时候可以使用调试器的Wxml功能进行样式上的数值调整。举个例子，假如我们要调整这个界面上的“我来了”这个布局外边距的值可以用小鼠标选中这个组件后然后双击点击Styles下面的属性值进行修改，支持用键盘的上下键进行1rpx的微调。

这里要注意的是在这里修改的值不会影响wxss文件里面的样式值，重新编译一下值就恢复成原来的值了，在这里只是便于让你调试看效果，调试好你需要的位置后，还是需要复制调整好的值再次去修改wxss里面的值才行。

从无到有

无数据状态的列表页已经完成，但是这个页面看起来有点小寂寞。为了让这个页面不那么寂寞，我们先写一些假数据把有数据状态的列表页做一下，后续等把添加功能做完直接替换数据源即可。

老规矩，先分析页面布局：头部一样，无需关注。内容部分成为多条备忘录内容，然后添加页面变成了一个悬浮按钮在右下角。

先把wxml的布局结构写出来，分成两块一个是单条内容布局，一个是添加图标。
注：这里我写的是单条内容的布局，同样的布局都是通过数据循环遍历出来的，后续会讲解如何循环。

<!-- 内容部分 -->
  <view class="content">
    <view>
      <view>
        <text>我的第一款小程序的诞生</text>
        <text>2018-07-28</text>
      </view>
      <view>在这里我将毫无保留的与你分享自己这一路上的血与泪，抛 开技术，来谈谈与技术同样重要的成长方法论，让你……</view>
    </view>
  </view>
  <!-- 添加icon -->
  <image src="../../images/write.png" ></image>

目前布局效果，同样无法直视！不过没关系，开始编写具体样式。

对比下已完成的效果图

<view>
  <!-- 省略无关代码 -->
  
  <!-- 内容部分 -->
  <view class="content">
    <!-- 提示图 -->
    <!-- <image src="../../images/empty.png"></image> -->
    <!-- 提示语 -->
    <!-- <text class="content-tip">这里空空如也</text> -->
    <!-- 新建按钮 -->
    <!-- <view class="content-btn">+ 新建</view> -->
    <!-- 内容列表 -->
    <view class="list" >
      <view>
        <text class="list-title">我的第一款小程序的诞生</text>
        <text class="list-date">2018-07-28 \n 00:00</text>
      </view>
      <view class="list-content">在这里我将毫无保留的与你分享自己这一路上的血与泪，抛开技术，来谈谈与技术同样重要的成长方法论，让你……</view>
    </view>
  </view>
  <!-- 添加icon -->
  <image class="write" src="../../images/write.png" ></image>
</view>

/* 省略无关代码 */

/* 内容列表样式 */
.list {
  padding: 30rpx;
}

.list-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #2C2C2C;
}

.list-date {
  font-size: 24rpx;
  font-weight: 400;
  color: #CCCCCC;
  position: absolute;
  right: 30rpx;
  text-align: right;
}

.list-content {
  margin-top: 50rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #CCCCCC;
}

.write {
  width: 108rpx;
  height: 108rpx;
  position: fixed;
  right: 20rpx;
  bottom: 150rpx;
}

基础布局已经完成，接下来需要用到 WXML 语法之列表渲染，把单条内容变成多条内容。上效果

<view class="list" wx:for="12" >
      <view>
        <text class="list-title">我的第一款小程序的诞生</text>
        <text class="list-date">2018-07-28 \n 00:00</text>
      </view>
      <view class="list-content">在这里我将毫无保留的与你分享自己这一路上的血与泪，抛 开技术，来谈谈与技术同样重要的成长方法论，让你……</view>
    </view>

主要运用到了wx:for控制属性，我写了两位数的字符串就遍历了两条。

数据绑定

在实际业务中数据肯定不是固定，所以还需用运用到 WXML 语法之数据绑定。数据绑定的数据来源自于js文件data对象，页面上数据绑定使用 Mustache 语法（双大括号）将变量包起来。

list.js
小程序data的数据格式为 json。这里是在list.js的data里面添加以下数据。

/**
   * 页面的初始数据
   */
  data: {
    list: [{
      title: '我的第1款小程序',
      date: '2021-09-01',
      time: '10:10',
      content: '在这里我将毫无保留的与你分享自己这一路上的血与泪，抛 开技术……'
    }, {
      title: '我的第2款小程序',
      date: '2021-09-01',
      time: '10:10',
      content: '在这里我将毫无保留的与你分享自己这一路上的血与泪，抛 开技术，来谈谈与技术同样重要的成长方法论，让你……'
    }]
  },

使用wx:for，数组当前项的变量名默认为 item.

<view class="list" wx:for="{{list}}" >
      <view>
        <text class="list-title">{{item.title}}</text>
        <text class="list-date">{{item.date}} \n {{item.time}}</text>
      </view>
      <view class="list-content">{{item.content}}</view>
    </view>

显示效果：

数据绑定除了可以应用到for数组对象遍历，还可以应用到单个文本。举个例子把“你来了？”这个问候语改成动态的“你好吗？”。

 data: {
    message:'你好吗？'
  },

 <!-- 问候语 -->
      <text>，{{message}}</text>

数据动态从js里面获取了，接下来还有个功能就是通过数据是否为空来控制不同的布局展示。在这里我们要应用到 WXML 语法之条件渲染。

Wxml
通过判断 isEmpty 这个变量来控制显示的布局，我们来看下 isEmpty 是在 js 里面如何定义的。

<!-- 无数据提示 -->
  <view wx:if="{{isEmpty}}" class="content">
    <!-- 提示图 -->
    <image src="../../images/empty.png"></image>
    <!-- 提示语 -->
    <text class="content-tip">这里空空如也</text>
    <!-- 新建按钮 -->
    <view class="content-btn">+ 新建</view>
    <!-- 内容列表 -->

  </view>
    <!-- 有数据列表 -->
  <block wx:else>
    <view class="list" wx:for="{{list}}">
      <view>
        <text class="list-title">{{item.title}}</text>
        <text class="list-date">{{item.date}} \n {{item.time}}</text>
      </view>
      <view class="list-content">{{item.content}}</view>
    </view>
  </block>

isEmpty根据判断list数组的长度来控制显示，如果数组长度大于0就是false，否则就是true。这里用到了setData函数，这个函数用于设置data数据，因为很多数据并不是一开始就已经定义好了，大部分数据都是通过数据逻辑处理或者从其他数据源才能获得的，所以setData使用频率非常高。绑定isEmpty变量后就直接可以直接影响页面的显示结果了。

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message:'你好吗？',
    list: [{
      title: '我的第1款小程序',
      date: '2021-09-01',
      time: '10:10',
      content: '在这里我将毫无保留的与你分享自己这一路上的血与泪，抛 开技术……'
    }, {
      title: '我的第2款小程序',
      date: '2021-09-01',
      time: '10:10',
      content: '在这里我将毫无保留的与你分享自己这一路上的血与泪，抛 开技术，来谈谈与技术同样重要的成长方法论，让你……'
    }]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      isEmpty:!this.data.list.length>0
    })
  },

})

只要我们动态的改变data中的list内容就可以控制显示列表还是空布局了。
有数据状态：

无数据状态：

在这里有人肯定会说，为了看个效果还需要删除数据改变代码再编译，好麻烦，能不能简单点？可以！在这里我们需要用到调试器之AppData。

在AppData数据区域可以随意修改数据，修改过程中页面实时渲染界面上的数据显示。这里修改的数据不影响实际数据，只用于调试看效果。这句话是不是有点似曾相识？没错就是和之前说过的调试器的Wxml调试样式一样一样的。一个样式调试神器一个数据调试神器，这两个调试工具也是小程序开发过程中最常用的。

到这里，数据列表页面也就完成了90%，还有10%就是替换成动态数据源。

上面4个也没按，我们已经完成3个了，接下来还剩下一个添加备忘录页面了。今天 的教程就到此结束了。

最后

这一章节带大家完成了备忘录列表页面，学习了：

1. 路由：用于页面/小程序之间的跳转
2. 导航：可以理解成组件版本的路由
3. 事件：用于组件与用户之间的交互
4. 云存储使用：存储图片获取在线地址
5. 调试器之Wxml样式调试与AppData数据调试
6. WXML语法：数据绑定、列表渲染、条件渲染

以上都是小程序开发常用技术，大家一定要自己实践多次加深印象。