微信小程序页面配置，基本语法，页面切换，tabbar全局配置
一，页面配置
- 在pages文件夹右键建立新的文件夹
- 在文件中右键新建页面
- 哪个page在最上面，默认显示哪页
- 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：是否开启下拉刷新，默认falseonReachBottomDistance：页面上拉触底时触发事件的触发距离，单位为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’）。上面的图形走势