当前位置:网站首页>Route jump in wechat applet
Route jump in wechat applet
2022-07-07 07:38:00 【richest_ qi】
List of articles
Antecedents feed
Common methods supporting route jump in wechat applet API Yes ,
wx.navigateTo()
, Keep the current page , Jump to a page in the application . however , You can't jump to tabbar page .wx.redirectTo()
, Close current page , Jump to a page in the app .wx.reLaunch()
, Close all pages , Open a page in the application .wx.switchTab()
, Jump to tabbar page , And shut down all the others tabbar page .
Applet project
The main files involved in the code are :
- app.json
- app.wxss
- pages/home/home.wxml
- pages/home/home.json
- pages/camera/camera.wxml
- pages/camera/camera.json
- pages/user/user.wxml
- pages/user/user.json
- pages/login/login.wxml
- pages/login/login.json
- pages/login/login.wxss
- pages/login/login.js
The main body
app.json
{
"pages": [
"pages/home/home",
"pages/camera/camera",
"pages/user/user",
"pages/login/login"
],
"window": {
"navigationBarBackgroundColor": "#0149af",
"navigationBarTitleText": " home page ",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#0149af",
"selectedColor": "#0149af",
"list": [{
"pagePath": "pages/home/home",
"text": " home page ",
"iconPath": "/static/images/tabIcons/homepage.png",
"selectedIconPath": "/static/images/tabIcons/homepage_fill.png"
},{
"pagePath": "pages/camera/camera",
"text": " Photo album ",
"iconPath": "/static/images/tabIcons/camera.png",
"selectedIconPath": "/static/images/tabIcons/camera_fill.png"
},{
"pagePath": "pages/user/user",
"text": " Personal center ",
"iconPath": "/static/images/tabIcons/people.png",
"selectedIconPath": "/static/images/tabIcons/people_fill.png"
}]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
app.wxss
.container{
margin: 40rpx;
padding: 40rpx;
height: 600rpx;
background:#a3c8f8;
border-radius: 6rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 48rpx;
color: #fff;
}
home page (pages/home)
pages/home/home.wxml
<view class="container">
home page
</view>
Photo album (pages/camera)
pages/camera/camera.wxml
<view class="container">
Photo album
</view>
pages/camera/camera.json
{
"navigationBarTitleText": " Photo album "
}
Personal center (pages/user)
pages/user/user.wxml
<view class="userContainer">
<image src="/static/images/vistor.png"></image>
<view class="name"> tourists </view>
<view class="text" bindtap="handleTap"> Go to login ?</view>
</view>
pages/user/user.json
{
"navigationBarTitleText": " Personal center "
}
Sign in (pages/login)
pages/login/login.wxml
<view class="loginContainer">
<view class="title"> Sign in </view>
<view class="list">
<view class="item">
<input type="text" data-type="username" bindinput="handleInput" placeholder=" user name " />
</view>
<view class="item">
<input type="text" password data-type="password" bindinput="handleInput" placeholder=" password " />
</view>
</view>
<button size="mini" bindtap="login"> Sign in </button>
</view>
pages/login/login.json
{
"navigationBarTitleText": " Sign in "
}
pages/login/login.wxss
.loginContainer{
padding: 20rpx;
}
.loginContainer .title{
padding: 20rpx 0;
border-bottom: 1px solid #ddd;
font-weight: bold;
font-size: 32rpx;
}
.list{
margin: 40rpx auto 20rpx;
}
.item{
margin: 12rpx 0;
padding: 0 20rpx;
border: 1px solid #ddd;
border-radius: 6rpx;
}
.item input{
width: 100%;
height: 60rpx;
font-size: 28rpx;
}
button{
font-weight: normal;
font-size: 28rpx!important;
color: #fff;
background: #0149af;
}
pages/login/login.js
Page({
data:{
username:"",
password:""
},
handleInput(e){
const type = e.target.dataset.type;
this.setData({
[type]:e.detail.value
})
},
login(){
const {
username,password} = this.data;
if(!username){
wx.showToast({
title: ' Please enter your user name ',
icon:'error'
})
return;
}
if(!password){
wx.showToast({
title: ' Please enter your password ',
icon:'error'
})
return;
}
wx.showToast({
title: ' Login successful ',
success:() => {
setTimeout(() => {
wx.switchTab({
url: '/pages/user/user',
})
},300)
}
})
/** * Report errors :navigateTo:fail can not navigateTo a tabbar page */
// wx.navigateTo({
// url: '/pages/user/user',
// })
}
})
Related links
边栏推荐
- BGP experiment (1)
- Unity C function notes
- 三、高质量编程与性能调优实战 青训营笔记
- ASEMI整流桥RS210参数,RS210规格,RS210封装
- Detailed explanation of neo4j installation process
- Docker compose start redis cluster
- Differences between H5 architecture and native architecture
- About binary cannot express decimals accurately
- Mobx knowledge point collection case (quick start)
- Several important steps to light up the display
猜你喜欢
抽丝剥茧C语言(高阶)数据的储存+练习
1、 Go knowledge check and remedy + practical course notes youth training camp notes
At the age of 20, I got the ByteDance offer on four sides, and I still can't believe it
Implementing data dictionary with JSP custom tag
nacos
Bi she - college student part-time platform system based on SSM
[semantic segmentation] - multi-scale attention
Bindingexception exception (error reporting) processing
Detailed explanation of neo4j installation process
After the interview, the interviewer roast in the circle of friends
随机推荐
L'externalisation a duré trois ans.
A concurrent rule verification implementation
外包干了三年,废了...
Modify the jupyter notebook file path
微信小程序中使用wx.showToast()进行界面交互
The currently released SKU (sales specification) information contains words that are suspected to have nothing to do with baby
一、Go知识查缺补漏+实战课程笔记 | 青训营笔记
Tumor immunotherapy research prosci Lag3 antibody solution
gslx680触摸屏驱动源码码分析(gslX680.c)
直播平台源码,可折叠式菜单栏
The metauniverse of the platofarm farm continues to expand, with Dao governance as the core
面试结束后,被面试官在朋友圈吐槽了......
考研失败,卷不进大厂,感觉没戏了
How can a 35 year old programmer build a technological moat?
Tencent's one-day life
Abnova immunohistochemical service solution
科技云报道:从Robot到Cobot,人机共融正在开创一个时代
URP - shaders and materials - simple lit
抽絲剝繭C語言(高階)數據的儲存+練習
About some details of final, I have something to say - learn about final CSDN creation clock out from the memory model