微信小程序开发系列7：微信小app页面跳转

微信小程序开发系列教程

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

首先开发第二个视图：

微信小程序开发系列7：微信小app页面跳转

<块wx:for=“｛｛logs｝｝”wx:for item=“log”>

＜text class＝“log item”＞｛｛index+1｝｝。｛｛日志｝｝

开发了Angular的朋友对上面的视图设计并不陌生。此视图的数据源由模型日志提供，是一个列表结果。列表中每个元素的数据源是模型日志中的一条记录，由日志表示。

为了使日志显示更加有序，每个日志的索引都显示在日志内容之前。因为日志的索引从0开始，所以使用｛｛index+1｝｝在索引之前添加一个，所以显示的索引更符合普通人的阅读习惯。

此视图的控制器：

//日志.js

const util=require（'../../utils/util.js'）

第页({

数据：{

日志：[]

},

onLoad:函数（）{

this.set数据({

日志：（wx.getStorageSync（'logs'）||[]）。映射（日志=>{

return实用程序。formatTime（新日期（日志））

})

})

}

})

控制器日志的实现。简体中文：

调用控制器中的Page构造函数，并将名为logs的数据模型分配给当前控制器。

此数据模型的值通过API wx填充。微信框架提供的getStorageSync。

wx的含义。getStorageSync在官方微信小程序网站上定义：从本地缓存中同步获取指定密钥对应的内容。

第二个视图的UI和控制器已经开发完成。唯一剩下的就是在第一个视图中定义一个触发点，以便它可以触发跳转到第二个视图。

在第一个视图中，我通过bindtap属性绑定了一个单击函数bindViewTap：

bindViewTap在第一个控制器index.js中的实现：

bindViewTap:函数（）{

wx.导航到({

url:“../logs/logs”

})

},

转到API wx。微信小程序提供的navigateTo：

保留当前页面，跳转到app中的一个页面，然后使用wx。navigateBack返回原始页面。