4.小程序-路由跳转

新建了一个logs目录，在目录下新建了logs页面，当看到 app.json里的pages列表里有了最新的路由即可，需要用到API；

app.json 文件中的代码展示：

{
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window": {
        "navigationBarBackgroundColor": "#bfa",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "好消息"
    }
}

目录结构变为：

官网位置：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": "日志"
}