微信小程序开发教程系列

微信小程序开发系列一：微信小程序应用开发环境搭建

微信小程序开发系列二：微信小程序视图设计

微信小程序开发系列三：微信小程序调试方法

微信小程序开发系列四：微信小程序控制器初始化逻辑

微信小程序开发系列五：微信小程序如何响应用户输入事件

微信小程序开发系列六：调用微信框架API

在本教程系列的前六篇文章中，我们研究了一个视图。现在让我们创建第二个视图，然后实现从第一个视图到第二个视图的跳转。

先发展第二种观点：

<view class="container log-list"> <block wx:for="{{logs}}" wx:for-item="log"> <text class="log-item">{{index + 1}}. {{log}}text> block> view>

做过开发的朋友一定对上面的视图设计很熟悉。该视图的数据源由模型日志提供，为列表结果。列表中每个元素的数据源是模型日志中的一条记录，用log表示。

为了让日志看起来更整洁，每条日志的索引显示在日志内容之前。由于log的索引是从0开始的，所以在索引前加上一个{{+1}}，这样显示的索引更符合普通人的阅读习惯。

此视图的控制器：

//logs.js const util = require('../../utils/util.js') Page({ data: { logs: [] }, onLoad: function () { this.setData({ logs: (wx.getStorageSync('logs') || []).map(log => { return util.formatTime(new Date(log)) }) }) } })

控制器logs.js的实现：

我们可以回忆一下本系列的第四篇文章介绍了控制器的实现逻辑：

微信小程序开发系列四：微信小程序控制器初始化逻辑

调用控制器中的 Page 构造函数微信小程序开发如何跳转页面，为当前控制器指定一个名为 logs 的数据模型。

这个数据模型的值填充是通过API wx. 由微信框架提供。

wx的含义。微信小程序官网定义：同步从本地缓存中获取指定key对应的内容。

#

第二个视图的UI和控制器已经开发好了，剩下的就是在第一个视图中定义一个触发点，这样就可以触发跳转到第二个视图。

我通过第一个视图上的属性绑定点击功能：

第一个.js中的实现：

bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) },

跳转还是通过微信小程序提供的API wx：

保持当前页面，跳转到app中的某个页面，使用wx. 返回原始页面。