foreword
Hello, everyone, I am Brother Ming. In the last blog, we finished the development of the project's guide page. In this blog post, we will talk about how to jump from the guide page to our news preview page. This is what we need Introduce the routing of WeChat applets. I believe those who have experience in front-end development know what routing is. I won’t explain it in detail here. If you don’t know much about it, you can learn it and read this blog.
renderings
demand analysis
We can see the effect picture above and let’s analyze it. When we click to open the mini program tour, we will jump to the second page. Then the way to realize this function I just said that routing is needed, then complete the mini program page jump In fact, there are many ways. In this blog post, we will talk about the functions navigateTo and redirectTo of the two routes. Next, we will see how they are used and their differences.
Practical steps
1、navigateTo
1.1. First, we use the route function navigateTo to complete the page jump. Before using this function, we need to do some preparatory work. First, we need to create a news file in the pages directory and then create news.js/news.json in it The /news.wxml/news.wxss file is as shown in the figure below. At the same time, we need to open the app.json file and add the news path we just created in the pages configuration item as shown in the figure below. Then we open the news.wxml file and add a <text> component below to write The previous paragraph of text is sufficient, as shown in the figure below.
1.2. Then we open the guide.wxml file and use the bind keyword to bind a finger touch tap event on the external <view> component of our custom button, and then define a touch event function. The code is as follows.
<view bind:tap="onTapJump" class="btn-container">
<text class="btn-submit">开启小程序之旅</text>
</view>1.3. Next, we open the guide.js file. In this file, we create the onTapJump() function code we just bound to the <view> component as follows.
onTapJump(params) {
wx.navigateTo({
url: '/pages/news/news',
})
},1.4. At this point, we have actually completed the page jump function, but here we need to pay attention to a detail. The path behind the url must add "/", otherwise it will not be able to jump.
2、redirectTo
2.1. Above we explained navigateTo to achieve jumping, then we use redirectTo to complete our page jumping. In fact, it is very simple. We don’t need to modify too many codes. We just need to change navigateTo to redirectTo in our onTapJump function The code is as follows.
onTapJump(params) {
wx.redirectTo({
url: '/pages/news/news',
})
},At this point, we can complete the jump function before the page. The api of the two routing functions is used. Then let’s briefly talk about the difference between navigateTo and redirectTo. In fact, the biggest difference between them is that navigateTo jumps to the second page. , it will not destroy the first page, we can return to the first page through the return arrow in the upper left corner of the navigation bar, redirectTo will destroy the first page after jumping to the second page There is no arrow to go back, but if you want to go back, there is a small house icon in the upper left corner of the navigation bar of the new version of the mini program. Click it to recreate the first page to achieve the effect of returning.
content supplement
Events are actually divided into bubbling events and non-bubbling events. Above we use bind:tap to capture our events. In fact, we can also use catch:tap to capture our events. Normally, we use bind:tap It is enough to capture our events, but there are always some special moments, such as when we customize components.
<view catch:tap="onTapJump" class="btn-container">
<text class="btn-submit">开启小程序之旅</text>
</view>postscript
The detailed code is as follows
guide.wxml file
<!--pages/guide/guide.wxml-->
<!--1、最外层的flex容器用于flex布局 -->
<view class="flex-container">
<!-- 2、引入本地文件下的头像 -->
<image class="avatar-log" src="/image/avatar/avatar_log.png"></image>
<!-- 3、英文文本 -->
<text class="welcome-panel">Be brave. We won't be younger than today</text>
<!-- 4、欢迎文本 -->
<text class="welcome-panel">Hello,山月劇</text>
<!-- 自定义提交按钮 -->
<view catch:tap="onTapJump" class="btn-container">
<text class="btn-submit">开启小程序之旅</text>
</view>
</view>guide.js file
// pages/guide/guide.js
Page({
/**
* 页面的初始数据
*/
data: {
},
onTapJump(params) {
// navigateTo ,redirectTo
wx.navigateTo({
url: '/pages/news/news',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})