微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程
这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图,然后实现从第一个视图到第二个视图的跳转。
首先开发第二个视图:
<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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
相关文章
- 【愚公系列】2022年08月 微信小程序-view生成分享图片
- 【愚公系列】2022年08月 微信小程序-view生成分享图片
- 【愚公系列】2022年08月 微信小程序-左划删除效果实现
- 【愚公系列】2022年08月 微信小程序-slider滑动选择器详解
- 【愚公系列】2022年08月 微信小程序-纵向和横向选项卡功能实现
- 【愚公系列】2022年09月 微信小程序-电商项目-UI框架的选型
- 微信小程序官方组件展示之表单组件button源码
- 云开发超多功能工具箱组合微信小程序源码-星泽V社
- 微信小程序引入weui
- 微信小程序外部如何使用卡槽改变组件内容
- 怎么才能把微信小程序迁移到自有app呢?
- 【愚公系列】2022年11月 微信小程序-Vant实现自定义tabBar
- 【愚公系列】2022年11月 微信小程序-本地生活项目-商家列表
- 【说站】多接口带头像挂件制作短视频去水印微信小程序源码
- 【愚公系列】2022年09月 微信小程序-FFmpeg的安装与使用
- 【愚公系列】2022年09月 微信小程序-three.js绘制正方体
- 【愚公系列】2022年09月 微信小程序-three.js加载3D模型
- 【愚公系列】2022年09月 微信小程序-WebGL纹理材质的使用
- 【愚公系列】2022年09月 微信小程序-WebGL动画的使用
- 【愚公系列】2022年09月 微信小程序-webview内嵌网页的授权认证
- 【愚公系列】2022年09月 微信小程序-小程序登录面板功能实现
- 微信小程序官方组件展示之媒体组件live-player源码
- 微信小程序官方组件展示之媒体组件voip-room源码
- 【愚公系列】2022年10月 微信小程序-电商项目-微信支付功能实现
- 【愚公系列】2022年10月 微信小程序-电商项目-小微商户支付后端功能实现(node版)
- 【愚公系列】2022年10月 微信小程序-电商项目-小微商户支付后端功能实现(node版)
- 【愚公系列】2022年11月 微信小程序-优购电商项目-授权页面
- 【愚公系列】2022年11月 微信小程序-优购电商项目-首页设计
- 【愚公系列】2022年10月 微信小程序-优购电商项目-商品分类
- 微信小程序跳转页面携带参数
- 微信小程序如何发布上线①
- 【前端探索】微信小程序跳转的探索——开放标签为什么存在?
- 微信小程序的想象力与不可想象域
- 微信小程序实现Redis连接新技术的开启(微信小程序连接redis)
- 使用Nodejs开发微信公众号后台服务实例