cover_image

微信小程序登录界面和tabBar跳转问题

GZF先生 学习参考备忘录
2018年07月08日 02:49

微信小程序发布已经有段时间了,虽然不能完全取代原生App开发

但越来越多的公司再用小程序开发产品,有些公司可能已经不开发原生App了

用小程序开发新产品

但是做为开发者还是要主动的去接受和学习新知识

不过未来如何变化都不会被淘汰

微信小程序简易教程:

https://developers.weixin.qq.com/miniprogram/dev/


言归正传来说说今天的主题

项目的需求:先判断是否登录,如果没登录跳登录界面,已登录显示底部的tabBar


简单流程图:

图片


接下来先了解一下小程序的相关知识

1、tabBar 

配置

app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

以下是一个包含了所有配置选项的 app.json :

图片


app.json 配置项列表

图片


小程序界面会显示pages中第一个界面

这个会先显示tabBar界面

如果定义login界面,并把login界面放pages第一个则只会显示login界面


2、关于界面跳转的几个方面

有四种方式: 
1.wx.navigateTo(OBJECT); 
2.wx.redirectTo(OBJECT); 
3.wx.switchTab(OBJECT); 
4.wx.navigateBack(OBJECT)


直接来看如何解决上面的问题

注意看下面的截图

图片

app.json 里 pages登录界面放首位,tabBar/list 正常顺序写


在上面的截图中,点击“点击”按钮,会让tabBar切换到第三个界面,就上面的个人中心界面


图片

wx.switchTab 4种跳转方法中的一种,具体的原理可以去官方文档查看


最后显示tabBar 界面

图片


如果判断已经登录了,直接在login中onLoad中调用 wx.switchTab

OK! 问题已解决


PS:  这样看来这个问题很简单了,但这个问题已经耗费了我大概2、3天的时间,为了改善公司现有小程序的结构和性能优化,之前尝试了很多方法都没成功,也想放弃不去优化,毕竟这个项目不是我做的而且已经处于发布测试阶段了产品经理也默认了,但为了更好的展示产品和以后的功能扩展

现在只想说:还好没放弃!😆



继续滑动看下一个
学习参考备忘录
向上滑动看下一个