微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程
微信小程序开发系列一:微信小程序的申请和开发环境的搭建
微信小程序开发系列二:微信小程序的视图设计
微信小程序开发系列三:微信小程序的调试方法
微信小程序开发系列四:微信小程序之控制器的初始化逻辑
微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列六:微信框架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.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可以返回到原页面。
要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
微信小程序开发系列七:微信小程序的页面跳转相关推荐
- 微信公众号开发系列-获取微信OpenID
在微信开发时候在做消息接口交互的时候需要使用带微信加密ID(OpenId),下面讲讲述2中类型方式获取微信OpenID,接收事件推送方式和网页授权获取用户基本信息方式获取. 1.通过接收被动消息方式获 ...
- Jerry Wang的微信小程序开发系列文章
微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列教程三:微信小程序的调试方法 微信小程序开发系列四:微信小程序之控制器的初始化逻辑 ...
- 微信小程序开发系列六:微信框架API的调用
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列四:微信小程序之控制器的初始化逻辑
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...
- 微信小程序开发系列教程三:微信小程序的调试方法
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...
- .NET微信公众号开发系列 - 项目介绍
由于业务需要,需要开发微信公众号.不过没有查询到比较有用的信息,只能自己摸索前进. 写这个微信公众号开发系列,希望能提供一些帮助. 需要的功能有创建订单.查看订单.还有基本的用户管理. 由于团队人员有 ...
- 【微信小程序开发•系列文章一】入门
本系统文章主要有以下几篇: <[微信小程序开发•系列文章一]入门> <[微信小程序开发•系列文章二]视图层> <[微信小程序开发•系列文章三]数据层> <[微 ...
- 微信小程序开发系列一:微信小程序的申请和开发环境的搭建
我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...
最新文章
- 微软华人团队刷新COCO记录!全新目标检测机制达到SOTA|CVPR 2021
- nginx 配置详解
- 求斐波那契数列第n位的几种实现方式及性能对比
- html + css + js 实现简易计算器
- Servlet Cookie 处理
- 家庭安防监控设备搭建
- MyBatis3传递空值参数报异常的解决
- 地面控制点的定义与作用_彩色透水混凝土路面在海绵城市建设中能起多大作用?...
- 批处理添加允许弹出临时窗口站点
- h5点击按钮之后按钮消失_小程序webview跳转页面后没有返回按钮完美解决方案
- 【路径规划】基于matlab GUI改进的DWA算法机器人静态避障路径规划【含Matlab源码 678期】
- 线性代数 : 矩阵乘法和矩阵的逆
- linux系统VNC安装包下载,CentOS 7 安装VNC 和 KVM
- Googel knowledge graph API
- 调戏 ChatGPT
- 激活windows系列地址
- 6g运行和8g运行有什么差别
- PIL Image创建空白图片的bug
- C++模板template的使用
- DDR3测试1-差分信号和单端信号的电压阈值
热门文章
- 时间序列研(part1)--随机过程
- 图卷积神经网络(part1)--卷积概述
- Tableau研学小课堂(part3)--Tableau数据可视化
- 离散分布概率:几何分布、二项分布和泊松分布
- SAP UI5 应用开发教程之三十七 - 使用 Chrome 开发者工具 Console 面板进行元素审查试读版
- SAP Spartacus buildCmsStructure 构建逻辑
- 使用CSS属性处理前端开发中长文本造成的内容显示重叠问题
- SAP Leonardo Machine Learning处于deprecated状态的API和其替代者
- SAP C4C url mashup跳转原理 - C4C UI到Mashup的参数传递是如何进行的
- CRM User status optimization - heavy calculation logic of status filter