如何进行微信小程序的页面跳转
本篇文章为大家展示了如何进行微信小程序的页面跳转,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联建站"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销,产品发布一步更新,电脑网络+移动网络一网打尽,满足企业的营销需求!创新互联建站具备承接各种类型的网站制作、网站设计项目的能力。经过十多年的努力的开拓,为不同行业的企事业单位提供了优质的服务,并获得了客户的一致好评。
我们将创建第二个视图,然后实现从第一个视图到第二个视图的跳转。
首先开发第二个视图:
微信小程序开发系列七:微信小程序的页面跳转
{{index + 1}}. {{log}}
做过Angular开发的朋友们对上面的视图设计一定不会陌生。这个视图的数据源由模型logs提供,是一个列表结果,列表每个元素的数据源是模型logs里的一条记录,用log代表。
为了让log看起来显示更整齐,在log内容之前,显示每条log的索引。因为log的索引从0开始,所以用{{index + 1}}在索引前加一,这样显示的索引更符合普通人的阅读习惯。
这个视图的控制器:
//logs.jsconst 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.getStorageSync来获取。
wx.getStorageSync的含义在微信小程序官网上有定义:从本地缓存中同步获取指定 key 对应的内容。
https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxgetstoragesynckey
第二个视图的UI和控制器都开发完毕,剩下的事情就是在第一个视图里定义一个触发点,让它能触发到第二个视图的跳转。
我在第一个视图上通过属性bindtap绑定了一个点击函数bindViewTap:
bindViewTap在第一个控制器index.js里的实现:
bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) },
跳转还是通过微信小程序提供的API wx.navigateTo:
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
上述内容就是如何进行微信小程序的页面跳转,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
当前名称:如何进行微信小程序的页面跳转
网站路径:http://scyanting.com/article/jgojsd.html