我们接下来要实现的是:点击“按钮”,跳转到另一个页面
如下图,当我们点击“开启小程序之旅”的时候,就会跳转到news页面
首先我们将启动页放回pages配置项的第一项,这样我们点击编译就可以看到index页面
//app.json
{
"pages": [
"pages/index/index",
"pages/news/news"
],
"window": {
"navigationBarBackgroundColor": "#f5f4a7"
}
}
要实现点击“开启小程序之旅”进行页面跳转,在WEB编程中使用onclickDOM事件实现的,如下:
但是小程序并不支持DOM事件,有没有类似鼠标点击事件的方法呢?在wxml中,有一个tap事件,手指触摸后马上离开,这与鼠标点击相似,
事件绑定的写法同组件的属性,以 key、value 的形式。
在事件前面加bind或catch表示事件绑定,catch和bind有何区别呢?
bind
事件绑定不会阻止冒泡事件向上冒泡,catch
事件绑定可以阻止冒泡事件向上冒泡。
我们通过一个例子来说明这种区别:
我们为<text>“开启小程序之旅”绑定subTap事件,为其父容器组件<view>绑定onTap事件
//index.wxml
<view class='container'>
<image src='/images/tx.jpg' class='user_avatar'></image>
<text class='say_hello'>Hello, <text class='user_name'>Mini Program</text></text>
<view class='encourage_container' bindtap="onTap">
<!-- 只有被<text>组件包起来的文字才能在客户端被长按选中 -->
<text class='encourage' bindtap="subTap">开启小程序之旅</text>
</view>
</view>
//index.js
Page({
onTap: function() {
console.log("父节点")
},
subTap: function() {
console.log("子节点")
}
})
当我点击“开启小程序之旅”的时候,结果是这样的,当我再点击按钮(我们姑且叫它按钮吧),你点击n下,就会在“父节点”的前面多一个数字,值为n+1;而如果我一开始就只点击按钮(不点文字),结果却是这样的: ,并且点击多少次,前面的数字就是多少。
也就是说:对于冒泡事件,如果我们点击子节点触发一个事件,如果其父节点也绑定了对应的事件,那么父节点的事件也会被触发(向上冒泡);但如果只点击父节点,子节点的事件则不会被触发。(详情见API文档)
如果我不想冒泡事件的父节点绑定的事件随着子节点触发咋办呢?把bind换成catch即可!
好了,我们回到正题,为<view>组件绑定tap事件:
//index.wxml
<view class='container'>
<image src='/images/tx.jpg' class='user_avatar'></image>
<text class='say_hello'>Hello, <text class='user_name'>Mini Program</text></text>
<view class='encourage_container' bindtap="onTap">
<!-- 只有被<text>组件包起来的文字才能在客户端被长按选中 -->
<text class='encourage'>开启小程序之旅</text>
</view>
</view>
然后再JS中实现页面跳转:在小程序中的页面跳转用wx.navigateTo(Object object) (保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面)或 wx.redirectTo(Object object)(关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面)接口实现;前者理解为跳转到当前页面的子页面,点击返回按钮可以回到上一个页面;后者理解为跳转到一个平行页面,无返回按钮。
//index.js
Page({
onTap: function() {
wx.navigateTo({
url: '../news/news'
});
}
})
效果如图:
用wx.redirectTo的代码和效果如下:
//index.js
Page({
onTap: function() {
wx.redirectTo({
url: '../news/news'
});
}
})
由于启动页面和新闻列表页之间应该是不存在父子关系,是平行页面跳转才对,多以我们采用后面这种写法!
Note:功能页不能使用
wx.navigateTo
来进行跳转,而是需要一个名为<functional-page-navigator>
的组件。
顺便提一下,在实验过程中,我碰到了一个问题,耗了挺多事件:
原来是因为我把 bindtap 打成bindTap,小程序识别不了,大家不要再踏入这个雷区啦!