微信小程序开发系列教程:从视图设计到跳转的全面指南

2024-11-05
来源:网络整理

微信小程序开发教程系列

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

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

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

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

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

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

本系列教程的前六篇文章均针对单一视图。现在让我们创建第二个视图并实现从第一个视图到第二个视图的跳转。

首先发展第二种观点:

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

跳转发小页面微信程序开不了_微信开发小程序页面跳转_微信网页跳转小程序

为了使日志显得更加整齐,每条日志的索引都显示在日志内容之前。由于log的索引是从0开始的,所以使用{{ + 1}}在索引前加一,这样显示的索引更符合普通人的阅读习惯。

该视图的控制器:

控制器logs.js的实现:

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

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

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

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

跳转发小页面微信程序开不了_微信开发小程序页面跳转_微信网页跳转小程序

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

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

我通过第一个视图上的属性绑定了单击函数:

第一个.js中的实现:

跳转仍然是通过API wx.微信小程序提供:

保留当前页面,跳转到应用程序中的某个页面,使用wx.返回原始页面。

分享