?
目录
前言
一、简单谈谈微信小程序
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 去做 overflow ， scroll-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项目的对比，希望对大家有所帮助
?
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |