微信小程序踩坑日志(二)

文章目录

indexOf

在wxml文件中不能使用 Object.keys() toString() indexOf() ;
其中indexOf()方法在wxml中怎么样都返回undefined;

textarea

textarea在小程序中算是一个比较大的坑了;具体表现为

  1. textarea在swiper中使用的话安卓环境下无法使用;只会有样式出现,无法输入,不能聚焦不能唤起输入按键;
  2. textarea 的父级元素中有overflow属性的时候 textarea的类容在输入框移动时无法跟随输入框一起移动;
  3. 上面两种情况是我在项目中遇到的;网上说还有很多其他情况的BUG,本人没去测试

暂时能想到的办法就是同时生产一个样式一模一样的view,点击的时候显示textarea并聚焦,隐藏view;失去焦点的时候隐藏textarea,显示view;做好数据绑定就可以了

路由

小程序的路由切换主要有一下几种方式;理解其真正意义的前提是要理解小程序的路由这么设定目的;
下面这些跳转方法的目的就是为了保存页面的状态,类似Vue的keep-alive;当用户需要返回之前页面的时候能够保存原状;

可以理解为小程序运行时开启了一个路由缓冲空间,每次页面跳转的时候需要考虑该页面是否需要被缓存;缓存后的页面用户可以通过点击顶部后退按钮或者按返回键回到之前的页面;如果缓存空间中没有缓存页面的时候,顶部的返回按钮不会出现,并且用户再按返回键就会推出小程序界面

一. 微信提供的API路由跳转

  1. wx.navigateBack

    		wx.navigateBack({
    				delta: 2,  //接收Number类型,表示往回跳转的页面层数
    				success(){},		//	接口调用成功的回调函数	
    				fail(){},		//	接口调用失败的回调函数	
    				complete(){}  //	接口调用成功失败都会执行的回调函数	
    		})
    
  2. wx.navigateTo

     	该方法跳转后,原页面会保存到路由的缓存机制中;可以通过wx.navigateBack回到该页面,并且状态保存和离开时一致
     	wx.navigateTo({
     					url: url,  //跳转路径  不能是tabBar里面的路径
     					success(){},		//	接口调用成功的回调函数	
     					fail(){},		//	接口调用失败的回调函数	
     					complete(){}  //	接口调用成功失败都会执行的回调函数	
     	})
    
  3. wx.redirectTo

     	该方法跳转后,原页面直接销毁
     	wx.redirectTo({
     					url: url,  //跳转路径  不能是tabBar里面的路径
     					success(){},		//	接口调用成功的回调函数	
     					fail(){},		//	接口调用失败的回调函数	
     					complete(){}  //	接口调用成功失败都会执行的回调函数	
     	})
    
  4. wx.reLaunch

     	使用该方法跳转后,缓存的所有页面全部销毁
     	wx.redirectTo({
     					url: url,  //跳转路径  不能是tabBar里面的路径
     					success(){},		//	接口调用成功的回调函数	
     					fail(){},		//	接口调用失败的回调函数	
     					complete(){}  //	接口调用成功失败都会执行的回调函数	
     	})
    
  5. wx.switchTab

     	使用该方法跳转后,跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
     	wx.redirectTo({
     					url: url,  //跳转路径  只能是tabBar里面的路径,并且路径不能带有参数
     					success(){},		//	接口调用成功的回调函数	
     					fail(){},		//	接口调用失败的回调函数	
     					complete(){}  //	接口调用成功失败都会执行的回调函数	
     	})
    

二. 组件路由跳转

  1. navigator

     navigator组件包含了上面所有API的功能;并且能实现不同小程序之间的跳转
    
     1.  target  取值 self/miniProgram 
     		跳转的限制和效果 暂时还没有实验;后期会再回来更新
     
     		self 表示当前小程序
     		miniProgram 表示其他小程序
     	
     2. url 表示在当前小程序内部跳转的路径
    
     		该路径的设置要结合open-type参数一起遵循API跳转的原则,跳转方式决定url能填写tabBar上面的路径
     
     3. open-type 跳转方式
     		
     		除了上面提到的五种跳转方式,这里还多了一个功能
     		open-type=exit时退出当前小程序
    

猜你喜欢

转载自blog.csdn.net/qq_41114603/article/details/83657702