专栏首页Jerry的SAP技术分享微信小程序开发系列七:微信小程序的页面跳转
原创

微信小程序开发系列七:微信小程序的页面跳转

微信小程序开发系列教程

微信小程序开发系列一:微信小程序的申请和开发环境的搭建

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

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

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

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

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

这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图,然后实现从第一个视图到第二个视图的跳转。

首先开发第二个视图:

微信小程序开发系列七:微信小程序的页面跳转
<view class="container log-list">

<block wx:for="{{logs}}" wx:for-item="log">

<text class="log-item">{{index + 1}}. {{log}}</text>

</block>

</view>

做过Angular开发的朋友们对上面的视图设计一定不会陌生。这个视图的数据源由模型logs提供,是一个列表结果,列表每个元素的数据源是模型logs里的一条记录,用log代表。

为了让log看起来显示更整齐,在log内容之前,显示每条log的索引。因为log的索引从0开始,所以用{{index + 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.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可以返回到原页面。

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序开发系列七:微信小程序的页面跳转

    这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图,然后实现从第一个视图到第二个视图的跳转。

    Jerry Wang
  • Angular和SAP C4C的事件处理队列

    核心代码位于一个for循环里,循环体是一个存储异步处理任务的队列asyncQueuePosition:

    Jerry Wang
  • C4C里产品主数据和销售组织数据维护的相互作用和相互影响

    然后点击“添加”按钮,试图找到刚才提到的产品1042419:发现找不到。原因是因为产品主数据上分配的销售组织和销售订单的销售组织不匹配。

    Jerry Wang
  • 微信小程序开发系列七:微信小程序的页面跳转

    这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图,然后实现从第一个视图到第二个视图的跳转。

    Jerry Wang
  • 新手学HighCharts(二)----对比柱状图的动态加载

    上一篇文章 新手学HighCharts(一)—-基本使用 中介绍了highCharts的基本使用,今天给大家介绍对比柱状图的使用,贴张图先:

    令仔很忙
  • 基于 dbms_redefinition 在线重定义表

          Oracle 支持在线重定义表,也就是说我们可以在修改表结构(DDL)的同时进行相关的DQL、DML操作,使得前端的DML根本感觉不到表结构实际上已...

    Leshami
  • Shield:支撑美团点评品类最丰富业务的移动端模块化框架开源了

    引言 一直以来,如何能更高效地开发与维护页面是Android与iOS开发同学最主要的工作和最关心的问题。随着业务的不断发展,根据特定业务场景产生的定制化需求变得...

    美团技术团队
  • 联想ThinkSystem DM系列存储安装配置文档

    DM系列存储OEM netapp 的FAS系列,而netapp 的FAS系列采用的ONTAP包括来自Berkeley Net/2 BSD Unix,Spinna...

    Mr.Mao Notes
  • 响铃:救市之作三星S6 edge+能否完成使命?

    大概没有谁比三星更需要一些好消息来振奋市场了。 智能手机市场经过几年的疯狂发展之后现在仿佛进入了一个瓶颈时期。一方面是竞争激烈加剧,另一方面是营销同质化。201...

    曾响铃
  • pthread_rwlock_rdlock和“No such file or directory”

    pthread_rwlock_rdlock和“No such file or directory” 调用pthread_rwlock_rdlock时,如果失...

    一见

扫码关注云+社区

领取腾讯云代金券