微信小程序-页面间的跳转-文件配置

微信小程序基础

2016年1月微信的创始人宣布维信小程序的初始，2017年正式发布。到现在2020年年初，有3个年头了。这期间微信小程序从推出到现在可谓一直红火各大公司在招聘前端时都会问会吗，或了解吗，今天来看看它是怎么制作的。
其中小程序还集结了一下这样2个优势：不占用存储空间 节省使用的时间

首先百度搜索微信小程序，然后进行注册，下载开发者工具推荐是稳定版。
然后疯狂下一步安装就可以开始我们的第一个尝试制作了
在初始的结构里面有

然后你会在左侧看到 Hello World 没错你会直接看到 ，就是这么神奇。在项目结构里
wxss是css 、wxml是html 然后他们各自的功能是
js data 写数据
wxml 结构
wxss 样式
json 页面的配置文件 当页面的配置和小程序应用配置冲突的时候，以页面为准
然后我们点开app.json 会看到

page

在这里pages是引入的页面你每个写的页面都将在这里进行引入
在这里的第一个文件是默认打开的即你每次刷新都会进入这个文件夹,我们可以使用alt+up来进行上移

window

window是窗口其中里面的属性 backgroundTextStyle只有两个属性分别是light和dark他改变的是最上面的背景颜色 可以尝试一下
navigationBarBackfrounColor改变的是标题的名字
navigationBarTitleText是最上面的字样我们可以进行一个更改
navigationBarTextStyle这个是改变最上面的字体颜色
要注意style这个他是指用哪个UI框架这里指的是用他默认的框架
这里有一个快速创建页面结构的方式是直接在pages里面写路径会系统会直接创建

页面之间的跳转

我们在使用微信小程序时都会看到最下面的导航栏那他是怎么制作的呢？
接下来我来解释一下
在app.json里面有很多属性我们这次用的就是其中的一个名字是 tabBar很字面意思吧，毕竟国人最懂国人。tabBar是一个数组他的最少是两个最多是五个不然会报错配置如下：

{
    "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath":"resource/home.png",
      "selectedIconPath":"resource/home_selected.png"
    },{
      "pagePath":"pages/logs/logs",
      "text": "first",
      "iconPath":"resource/logs.png",
      "selectedIconPath": "resource/logs_selected.png"
    }]
  },
  "sitemapLocation": "sitemap.json"
}

这里我把默认的UI库给删掉了 其中iconPath是指在首页这两个字的上方插入一个图标selectedIconPath则是指点击后用那个图标这样他就可以变色了
有了上面我们就可以实现页面之间的跳转了。这时候就有小伙伴问了这个只能跳五个这不够使用怎么办。
我们可以在子路由中利用bindtap来进行编程式跳转如下在wxml中写入

<button bindtap="go">我用的是编程试跳转页面 跳到打印日志上面</button>

然后在js中写入 尽然是js了当然可以直接写js了些这个方法

go(){
wx.redirectTo({
  url: '../logs/logs',
  success: function(res) {console.log(res)},
  fail: function (res) { console.log(res)},
})
},

这样就可以进行子页面间的二级跳转了。
本次就到这里欢迎各位小伙伴进行评论商讨，我会尽力一一回复。