微信小程序页面配置，基本语法，页面切换，tabbar全局配置

一，页面配置

1. 在pages文件夹右键建立新的文件夹
2. 在文件中右键新建页面
3. 哪个page在最上面，默认显示哪页
4. json要求严格语法，不能有多余的注释和逗号

页面建好之后就会出现以下内容

chat.wxml 模板文件
chat.js 业务逻辑
chat.wxss 样式
chat.json 页面配置

新建page页之后需要在app.json上注册该页面，该页面才能正常使用

页面配置项详解

‌导航栏配置‌

• navigationBarBackgroundColor：导航栏背景颜色，支持十六进制颜色值
• navigationBarTextStyle：导航栏标题颜色，仅支持"black"或"white"
• navigationBarTitleText：导航栏标题文字内容
• navigationStyle：导航栏样式，可选"default"或"custom"

‌窗口效果配置‌

• backgroundColor：窗口背景色，下拉刷新时可见
• backgroundTextStyle：下拉刷新时loading样式，可选"dark"或"light"
• enablePullDownRefresh：是否开启下拉刷新，默认false
• onReachBottomDistance：页面上拉触底时触发事件的触发距离，单位为px，默认50

‌页面组件配置‌

• disableScroll：设置为true则页面整体不能上下滚动
• usingComponents：页面自定义组件配置项

二，基础语法

1，数据绑定

<!-- WXML -->
<view>{{ message }}</view>

// pages/index/index.js
Page({
data: {
message: "欢迎使用 WXML 数据绑定！"
}
})

2，属性绑定

<image src="{{ imageUrl }}" mode="aspectFit"></image>
<view class="{{ dynamicClass }}">动态样式类</view>


Page({
data: {
imageUrl: "/images/logo.png",
dynamicClass: "highlight"
}
})

3，模板运算

<view>{{ flag ? '显示' : '隐藏' }}</view>
<view>{{ 'Hello, ' + name }}</view>
<view>{{ list[0].title }}</view>
<view>{{ a + b }}</view>


Page({
data: {
flag: true,
name: "小明",
list: [{ title: "第一条" }],
a: 10,
b: 20
}
})

4，自定义列表渲染

<view wx:for="{{ users }}" wx:for-item="user" wx:for-index="i" wx:key="userId">
  {{ i }} - {{ user.name }}
</view>

Page({
data: {
items: [
{ id: 1, name: "苹果" },
{ id: 2, name: "香蕉" }
]
}
})

key 属性

用于提升列表渲染性能，建议使用唯一且稳定的字段（如 ID）。

5、条件渲染

1. 基础语法：wx:if / wx:elif / wx:else
<view wx:if="{{ type === 1 }}">类型1</view>
<view wx:elif="{{ type === 2 }}">类型2</view>
<view wx:else>其他类型</view>


Page({
data: {
type: 2
}
})

6、列表渲染

<view wx:for="{{ items }}" wx:key="id">
  {{ index }}: {{ item.name }}
</view>


Page({
data: {
items: [
{ id: 1, name: "苹果" },
{ id: 2, name: "香蕉" }
]
}
})

三，生命周期

微信小程序生命周期图解

小程序生命周期事件说明

App 生命周期

• onLaunch: 小程序初始化完成时触发（仅全局触发一次）
• onShow: 小程序启动或从后台进入前台时触发
• onHide: 小程序隐藏或从前台进入后台时触发
• onError: 小程序发生脚本错误或 API 调用失败时触发，并返回错误信息

Page 生命周期

• onLoad: 监听页面加载
• onReady: 页面初次渲染完成
• onUnload: 页面卸载

当小程序启动后，首先完成小程序的初始化（onLaunch）和显示（onShow），然后页面的加载（onLoad）、显示（onShow）和渲染（onReady'）。上面的图形走势

四，页面切换

1，< navigator></ navigator >标签（声明式导航）

 <navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

<navigator url="/pages/info/info" open-type="navigate">导航到信息页面</navigator>

<navigator url="/pages/detail/detail" open-type="redirect">重定向到详情页</navigator>

<navigator open-type="navigateBack">返回</navigator>

<navigator open-type="navigateBack" delta="2">返回上两层</navigator>

<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

2，wx.navigateTo（编程式导航）

保留当前页面，跳转到应用内的某个页面，但不能跳到 tabbar 页面（常用），适用于需要保留原页面状态的场景，如从列表页跳转到详情页

//<!**wxml文件**>
<view class="select_calculator" bindtap="next_calculator">
//js文件
next_calculator:function () {
    wx.navigateTo({
      url: '/pages/calculator/calculator',
    })
 

3，wx.redirectTo.（编程式导航）

关闭当前页面，跳转到应用内的某个页面，同样不能跳转 tabbar 页面

<view>
  <navigator open-type="redirect" url="/pages/event/event">跳转并替换</navigator>
</view>

4，wx.switchTab.（编程式导航）

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

  post_calculator:function () {
    wx.switchTab({
      url: '/pages/calculator/calculator',
    })
  },
 
})

5，wx.reLaunch.（编程式导航）

关闭所有页面，打开到应用内的某个页面，适用于需要清空页面栈的场景，如用户退出登录后跳转到登录页。

// 关闭所有页面，跳转到首页
wx.reLaunch({
  url: '/pages/index/index?id=1',
  success: function(res) {
    console.log('跳转成功');
  },
  fail: function(err) {
    console.log('跳转失败', err);
  }
})

6，wx.navigateBack.（编程式导航）

wx.navigateBack 用于返回上一页面或多级页面，可通过 delta 参数指定返回的页面数，如果 delta 大于现有页面数，则会返回到首页

// 返回上一页面
wx.navigateBack({
  delta: 1
})

// 返回两级页面（返回到上上级页面）
wx.navigateBack({
  delta: 2,
  success: function(res) {
    console.log('返回成功');
  }
})

7，wx.navigateToMiniProgram.（编程式导航）

wx.navigateToMiniProgram 用于跳转到其他小程序，需要先在当前小程序的 app.json 中声明目标小程序的appId

wx.navigateToMiniProgram({
  appId: '目标小程序的appid',
  path: 'page/index/index?id=123',
  extraData: {
    foo: 'bar'
  },
  envVersion: 'develop',
  success(res) {
    // 打开成功
  },
  fail(res) {
    // 打开失败
  }
})

五，tabbar全局配置及app.json其他配置

pages配置‌

必填项，用于指定小程序由哪些页面组成，以数组形式存储页面路径。数组的第一项代表小程序的初始页面，新增或删除页面时都需要修改此数组。

‌window配置‌

用于设置小程序的状态栏、导航栏、标题和窗口背景色。其子配置项包括：

• navigationBarBackgroundColor：导航栏背景颜色，仅支持十六进制值。
• navigationBarTextStyle：导航栏标题颜色，仅支持 black/white。
• navigationBarTitleText：导航栏标题文字内容。
• backgroundColor：窗口的背景色。
• backgroundTextStyle：下拉背景字体和 loading 图样式，仅支持 dark/light。
• enablePullDownRefresh：是否开启全局下拉刷新。

底部 Tab 栏配置

‌配置小程序底部的 tab 栏效果。主要子配置项包括 list 数组，用于定义每个 tab 项：

• color‌：设置 tab 上文字的默认（未选中）颜色
• ‌selectedColor‌：设置 tab 上的文字选中时的颜色
• ‌backgroundColor‌：设置 tabBar 的背景色
• ‌borderStyle‌：设置 tabBar 上边框的颜色，仅支持 black 或 white
• ‌position‌：设置 tabBar 的位置，可选值为 bottom（底部）或 top（顶部），默认为 bottom
• ‌custom‌：布尔值，是否开启自定义 tabBar，需在代码包中放入自定义 tabBar 组件

列表项（list）配置

list 数组用于定义每个 tab 按钮，最少 2 个、最多 5 个47。每个 tab 项是一个对象，包含以下属性：

• ‌pagePath‌（必填）：页面路径，必须在 pages 数组中预先定义
• ‌text‌（必填）：tab 上显示的文字
• ‌iconPath‌（可选）：未选中时的图标图片路径。图片大小限制为 40kb，建议尺寸为 81px × 81px34
• ‌selectedIconPath‌（可选）：选中时的图标图片路径

需要注意的是，当 position 为 top（顶部 tabBar）时，不会显示图标。如果需要更复杂的自定义样式，可以通过设置 custom 为 true 来使用自定义 tabBar 组件。

{
    "pages": [
        "pages/hone/hone",
        "pages/Profile/Profile",
        "pages/experience/experience",
        "pages/skill/skill",
        "pages/index/index",
        "pages/logs/logs"
    ],
    "tabBar":{
        "color": "#777",
        "selectedColor": "#1cb9ce",
        "list":[
            {"pagePath": "pages/hone/hone","text":"简历信息","iconPath": "/pages/img/icon08.png","selectedIconPath": "/pages/img/icon08.png"},
            {"pagePath": "pages/skill/skill","text":"个人技能","iconPath": "/pages/img/icon04.png","selectedIconPath": "/pages/img/icon04.png"},
            {"pagePath": "pages/experience/experience","text":"项目经历","iconPath": "/pages/img/icon02.png","selectedIconPath": "/pages/img/icon02.png"},
            {"pagePath": "pages/Profile/Profile","text":"自我评价","iconPath": "/pages/img/icon06.png","selectedIconPath": "/pages/img/icon06.png"}
        ]
    },
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}