4.小程序-路由跳转

新建了一个logs目录,在目录下新建了logs页面,当看到 app.json里的pages列表里有了最新的路由即可,需要用到API; app.json 文件中的代码展示:
{
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window": {
        "navigationBarBackgroundColor": "#bfa",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "好消息"
    }
}

目录结构变为:

4.小程序-路由跳转

官网位置:API ---> 路由--->有很多可以用的调转的方法     wx.navigateTo   // 保留当前页,即跳转之后上面出现的是箭头可以返回上一页     补充:         在小程序里没有window 而是wx,在跳转的路由内的回调(success, fail, complete)和 Vue里的promise(then, catch , finally)     下面这两种用法和 navigateTo 一样,但是都会出现小房子样式的图标用来返回的首页;     wx.redirectTo  // 关闭当前页     wx.reLaunch   // 关闭所有页 代码实现: index.wxml中的代码:
<view class="indexContainer">
    <image class="avatarUrl" src="/static/images/nvsheng.jpg"></image>
    <text class="userName">G『 s 』</text>
<!-- 测试事件绑定 -->
<!-- <view class="goStudy" catchtap="handleParent">
<text catchtap="handleChild">{{message}}</text>
</view> -->
    <view class="goStudy" bindtap="toLogs">
        <text>{{message}}</text>
    </view>
</view>

在index.js中的代码:

// 跳转到日志logs页面的方法
toLogs() {
    wx.navigateTo({
        url: '/pages/logs/logs',
    })
    // wx.redirectTo({
        // url: '/pages/logs/logs',
    // })
   // wx.reLaunch({
        // url: '/pages/logs/logs',
    // })
},
为了使日志页头部显示日志信息而不是首页信息,所以需要增加日志的局部配置,局部配置高于全局配置; 所以在log.json文件中的代码:
{
    "usingComponents": {},
    "navigationBarTitleText": "日志"
}

 

上一篇:LeetCode第235场周赛题解


下一篇:使用nginx 代理oracle服务