【微信小程序】一文读懂小程序的生命周期和路由跳转

举报
国服第二切图仔 发表于 2022/07/05 15:41:19 2022/07/05
【摘要】 ​目录前言一、简单谈谈微信小程序1、在结构和样式方面2、在调用微信生态系统功能时二、小程序生命周期 三、小程序路由跳转1. 通过组件navigator跳转2.通过api跳转wx.navigateTo() , wx.navigateBack(), wx.redirectTo() , wx.switchTab(), wx.reLanch()总结前言        微信小程序是一种不需要下载安装即...

目录

前言

一、简单谈谈微信小程序

1、在结构和样式方面

2、在调用微信生态系统功能时

二、小程序生命周期 

三、小程序路由跳转

1. 通过组件navigator跳转

2.通过api跳转wx.navigateTo() , wx.navigateBack(), wx.redirectTo() , wx.switchTab(), wx.reLanch()

总结



前言

        微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。对于开发者而言,微信小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换。微信小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中,通过公众号关联,用户可以实现公众号与微信小程序之间相互跳转。



一、微信小程序与vue对比

编辑


1、在结构和样式方面

        小程序提供了一些常用的标签与控件,比如: view,小程序主要的布局元素,类似于html标签的div,你也完全可以像控制div那样去控制view。 scroll-view,你要滚动内容的话,没必要用view去做overflowscroll-view提供了更为强大的功能,通过参 数的调整,你可以控制滚动方向,触发的事件等等

        配置文件app.json平级的还有一个app.js文件,是小程序的脚本代码。我们可以在这个文件中监听并处理 小程序的生命周期函数、声明全局变量,在每个page目录里的js做当前页面的业务操作。但是小程序的 页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用 window,也无法在脚本中操作组件,所以我们常用的zepto/jquery 等类库也是无法使用的。

        另一个app.wxss文件,这个是全局的样式,所有的页面都会调用到,每个项目目录下面的wxss是局部样 式文件,不会和其他目录产生污染,可以放心使用样式名。
他提供的WXSS(WeiXin Style Sheets)是一套样式语言,具有 CSS 大部分特性,可以看作一套简化版的css。 同时为了更适合开发微信小程序,还对 CSS 进行了扩充以及修改,直接帮我们把适配的一部分工作都做 了,比如他的rpx(responsive pixel),可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1 物理像素。
编辑



2、在调用微信生态系统功能时

微信小程序提供了相应的api,比如你要修改一个头像,可以使用 wx.chooseImage、
获取地理位置信息 wx.getLocation、

文件保存 wx.FileSystemManager.saveFile等等

二、小程序生命周期 

编辑


  • onReady 生命周期函数--监听页面初次渲染完成
  • onShow 生命周期函数--监听页面显示
  • onHide 生命周期函数--监听页面隐藏
  • onUnload 生命周期函数--监听页面卸载
  • onPullDownRefresh 页面相关事件处理函数--监听用户下拉动作
  • onReachBottom 页面上拉触底事件的处理函数
  • onShareAppMessage 用户点击右上角转发
  • onPageScroll 页面滚动触发事件的处理函数
  • onTabItemTap 当前是 tab 页时,点击 tab 时触发

三、小程序路由跳转


1. 通过组件navigator跳转

设置url属性指定跳转的路径,设置open-type属性指定跳转的类型(可
选),open-type的属性有 redirect, switchTab, navigateBack

代码如下(示例):

// redirect 对应 API 中的 wx.redirect 方法
<navigator url="/page/redirect/redirect?title=redirect" open-type="redirect">在当
前页打开</navigator>
// navigator 组件默认的 open-type 为 navigate
<navigator url="/page/navigate/navigate?title=navigate">跳转到新页面</navigator>
// switchTab 对应 API 中的 wx.switchTab 方法
<navigator url="/page/index/index" open-type="switchTab">切换 Tab</navigator>
// reLanch 对应 API 中的 wx.reLanch 方法
<navigator url="/page/redirect/redirect?title=redirect" open-type="redirect">//关
闭所有页面,打开到应用内的某个页面
// navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="/page/index/index" open-type="navigateBack">关闭当前页面,返回上一级
页面或多级页面</navigator>

2.通过api跳转
wx.navigateTo() , wx.navigateBack(), wx.redirectTo() , wx.switchTab(), wx.reLanch()

代码如下(示例):


wx.navigateTo({
url: 'page/home/home?user_id=1' // 页面 A
})
wx.navigateTo({
url: 'page/detail/detail?product_id=2' // 页面 B
})
// 跳转到页面 A
wx.navigateBack({
delta: 2 //返回指定页面
})
// 关闭当前页面,跳转到应用内的某个页面。
wx.redirectTo({
url: 'page/home/home?user_id=111'
})
// 跳转到tabBar页面(在app.json中注册过的tabBar页面),同时关闭其他非tabBar页面。
wx.switchTab({
url: 'page/index/index'
})
// 关闭所有页面,打开到应用内的某个页面。
wx.reLanch({
url: 'page/home/home?user_id=111'
})
该处使用的url网络请求的数据。



总结


        以上就是今天要讲的内容,本文仅仅简单介绍了微信小程序的生命周期和路由跳转方法,以及和vue项目的对比,希望对大家有所帮助

编辑


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。