微信小程序开发服务-微信小程序如何封装路由?

--------

微信小程序开发服务

-------

路由器方式有五个,常见的有三个switchTab、navigateTo、navigateBack 简易详细介绍一下这五个方式及应用场景


封裝路由器方式

路由器方式有五个,常见的有三个switchTab、navigateTo、navigateBack 简易详细介绍一下这五个方式及应用场景

switchTab,跳转tabBar网页页面专用,别的网页页面出栈,新网页页面入栈

navigateTo最常见的路由器跳转,会添加到网页页面栈,容许回到,也就是新网页页面不断入栈

navigateBack回到,只能回到到网页页面栈中存在的网页页面,网页页面不断出栈,直到抵达总体目标页

redirectTo关掉当今网页页面,跳转某个网页页面,当今网页页面不会添加到网页页面栈,也就是说当今网页页面不可以根据回到抵达,例如支付网页页面,支付进行后,最好不要再让客户回到到支付页,再例如一些没法改动的实际操作,例如删掉产品,产品删掉后再根据navigateBack回到再删掉一次产品,体验毫无疑问不太好,主要表现为当今网页页面出栈,新网页页面入栈

reLaunch关掉全部网页页面,开启某个网页页面,能够开启随意网页页面包含tabBar,合适强制性进行某个实际操作的网页页面,例如登陆页,当已登陆的客户点一下撤出后,进到登陆页,那末就不可以根据回到再回去了,就务必留下来登陆或申请注册,合适用这个,主要表现为全部网页页面出栈,新网页页面入栈

封裝

// 封裝路由器方式
export default {
 /** 
 * function
 * @param {string} url 总体目标网页页面的路由器
 * @param {Object} param 传送给总体目标网页页面的主要参数
 * @description 解决总体目标网页页面的主要参数,转成json标识符串传送给param字段,在总体目标网页页面根据JSON.parse(options.param)接受
 navigateTo(url,param={}){
 if(param){
 url+=`?param=${JSON.stringify(param)}`
 wx.navigateTo({
 url:url,
 fail(err) {
 console.log('navigateTo跳转错误',err) 

* @param {string} url 总体目标网页页面的路由器 * @param {Object} param 传送给总体目标网页页面的主要参数,仅有网页页面栈无总体目标网页页面启用navigateTo时,主要参数才会起效,单是回到不可以设定主要参数 * @description 先取出网页页面栈,网页页面栈数最多十层,分辨总体目标网页页面是不是在网页页面栈中,假如在,则根据总体目标页的部位,回到到总体目标网页页面,不然启用navigateTo方式跳转到总体目标页 navigateBack(url,param={}){ const pagesList = getCurrentPages() let index = pagesList.findIndex(e= { return url.indexOf(e.route) =0 if(index == -1){ // 沒有在网页页面栈中,能够启用navigateTo方式 this.navigateTo(url,param) }else{ wx.navigateBack({ delta: pagesList.length-1-index, fail(err){ console.log('navigateBack回到错误',err)
if(param){ url+=`?param=${JSON.stringify(param)}`要依据实际业务流程来,该回到就回到,该跳转就用跳转,不可以一直跳转! wx.reLaunch({ url:url, fail(err) { console.log('reLaunch跳转错误',err) }
---------

微信小程序开发服务

------------