​

 ​编辑

目录

前言

一、简单谈谈微信小程序

1、在结构和样式方面

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

二、小程序生命周期 

三、小程序路由跳转

1. 通过组件navigator跳转

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

总结

前言

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

一、微信小程序与vue对比

​编辑

1、在结构和样式方面

​编辑

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

文件保存 wx.FileSystemManager.saveFile等等

二、小程序生命周期 

​编辑

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

三、小程序路由跳转

1. 通过组件navigator跳转

代码如下（示例）：

// 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项目的对比，希望对大家有所帮助

​编辑

​