微信小程序开发系列教程

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

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

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

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

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

微信小程序开发系列六:微信框架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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

微信小程序开发系列七:微信小程序的页面跳转的更多相关文章

  1. 微信公众号开发系列-获取微信OpenID

    在微信开发时候在做消息接口交互的时候须要使用带微信加密ID(OpenId),下面讲讲述2中类型方式获取微信OpenID.接收事件推送方式和网页授权获取用户基本信息方式获取. 1.通过接收被动消息方式获 ...

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

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

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

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

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

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...

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

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...

  6. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  7. WordPress版微信小程序开发系列(二):安装使用问答

    自WordPress版微信小程序发布开源以来,受关注的程度超过我原来的想象.这套程序主要面对的用户是wordpress网站的站长,如果wordpress站想在微信的生态圈得到推广,小程序成为一种重要的 ...

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

    大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...

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

    我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...

随机推荐

  1. Linux下使用pip安装keras

    Keras是一个底层使用Theano或TensorFlow的深度学习框架,它的设计参考了Torch,用Python语言编写,也很方便使用Python调用,是一个高度模块化的神经网络库,支持使用GPU和 ...

  2. win7Setx修改环境变量

    SETX.exe (Resource Kit, Windows 7) Set environment variables permanently, SETX can be used to set En ...

  3. 替换一个文件中的内容BAT

    @echo off setlocal enabledelayedexpansion set file=%1set "file=%file:"=%" for %%i in ...

  4. Sublime Text3 python代码去除白色框框

    之所以会出现白色框框,是因为代码不符合PEP8规范!!! 可以装一个 AUTOPEP8 插件,然后按 Ctrl + Alt + r 就会自动帮你PEP8格式化,白色框框就会消失了... 这是原来的博文 ...

  5. 算法练习--LeetCode--29. Divide Two Integers

    Divide Two Integers Given two integers dividend and divisor, divide two integers without using multi ...

  6. Hibernate3--快速入门--第一天

    1. Hibernate概述 Hibernate是轻量级JavaEE应用的持久层解决方案,是一个关系数据库ORM框架. a. 轻量级: 使用方便 (比Apache DbUtils 复杂很多倍 )这个概 ...

  7. E20170417-sl

    recursive adj.递归的 strategy n.战略

  8. XTU1267:Highway(LCA+树的直径)

    传送门 题意 有n个小镇,Bobo想要建造n-1条边,并且如果在u到v建边,那么花费是u到v的最短路长度(原图),问你最大的花费. 分析 比赛的时候没做出来,QAQ 我们首先要找到树的直径起点和终点, ...

  9. hdu2476【区间DP,未完待续】

    好难搞得东西.... 题意都懒得写了,看题解的巨巨莫怪啊,未完待续未完待续,回去睡觉.

  10. 你真的懂了redis的数据结构吗?redis内部数据结构和外部数据结构揭秘

    原文链接:https://mp.weixin.qq.com/s/hKpAxPE-9HJgV6GEdV4WoA Redis有哪些数据结构? 字符串String.字典Hash.列表List.集合Set.有 ...