微信小程序页面跳转、弹出框

一、页面跳转

页面跳转是微信小程序中使用较为频繁并且很重要的功能之一，页面跳转一般是通过点击按钮或者文本区域后需要进行的操作。

页面跳转中需要注意的点很多，我在这就介绍一些我在写项目过程中所遇到的一些情况里的跳转方式。

1，一般情况

一般情况下，在点击了按钮或文本之后，跳转到另一个页面。

.wxml

setting

hello    

很简单，在wxml中只需添加 bindtap 属性，然后在 js 中增加相对应的函数。

.js

te(event){
   wx.navigateTo({
       url:'',
   })
},

bu(event){
   wx.navigateTo({
       url:'',
   })
},

在函数中只需使用自带的 navigateTo 方法即可跳转到指定页面。url 中填写目标页面的路径。

2，switchTab

在写项目的过程中，我发现 navigateTo 并不能跳转到属于 tabBar 的目标页面。tabBar 又只能唯一存在在 app.json 中。这时就该 switchTab 上场了。

switchTab 是专门为 tabBar 服务的页面跳转方法。

.js

bu(event){
  wx.switchTab({
    url:''
  })
},

只需把 navigateTo 更改为 switchTab 即可。

3，bindtap 和 catchtap

写项目时经常会遇到多级点击事件，这时就需要明确区分 bindtap 和 catchtap 。

进行页面跳转的按钮或文本有时也会遇到上级布局中也存在着点击事件的情况。

.wxml


    hello
    setting

这种情况常有发生，这时点击按钮就会发现 sum 函数又执行了一遍。而本意是只执行 bu 函数。
这就是因为 bindtap 它会触发父级点击事件，catchtap 与 bindtap 完全不同。

catchtap 不会触发父级点击事件，只触发当前的点击事件。

.wxml 
   hello
   setting

将内部的 bindtap 改为 catchtap ，则不会触发父级 sum 点击事件。

4，传值跳转

页面跳转时，有时需要进行数据的传递，掌握这个技巧就非常重要了。

传递
.js
wx.navigateTo({
  url:'pages/my?name='+it+'&pass='+pa;
})

url 中拼接上要传递的 id 以及对应的值

接收时，在 onLoad 函数中直接接收

接收
onLoad: function (options) {  
    var name = options.name; 
    var pass = options.pass; 
 }

这样就完成了 数据 在页面中的 传递。

二、弹出框

1，showToast

安卓中有 toast 弹出框，微信小程序中也有相对应的 showToast 方法。

showToast 在项目实践中也是使用非常频繁的方法。

.js

wx.showToast({
   title: '成功', 
   icon: 'success',   
   image：''
   duration: 2000   //持续时间
   mask：true //是否使用蒙层
})

icon 目前只支持 success 和 loading 两种。

但也可以添加图片来实现其它弹出内容。

2，showLoading

showLoading 方法专门用于显示 正在加载 的消息提示框。

只有两个参数

.js

wx.showLoading({
   title:'加载中',
   mask:true
})

showLoading() 的关闭必须要使用 hideLoading() 方法。

3，Vant Weapp

微信只提供以上两种弹出框，这很难满足很多小程序的需要，这里推荐一个UI组件库，里面有美观且功能强大的组件。有很多种美丽的弹出框，操作简单，适合小白，有需要的可以去看看。
https://youzan.github.io/vant-weapp/#/intro