微信小程序四(全局配置和页面配置页面跳转)

全局配置:

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

tabBar设置:最少两个最多5个

复制代码
"tabBar": {
    "list":[{
      "pagePath": "pages/04/04",
      "text": "04页面"
    },{
      "pagePath": "pages/03/03",
      "text": "03页面"
    },{
      "pagePath": "pages/02/02",
      "text": "02页面"
    },{
      "pagePath": "pages/01/01",
      "text": "01页面"
    }]
  }

改变头部样式

开始的样式:

将背景颜色改成黑色,字体颜色改成白色,标题改成微信

复制代码
 "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "微信",
    "navigationBarBackgroundColor": "#000"
  },

navigationBarTextStyle:标题字体颜色,只支持两种颜色,黑色(black)和白色(white),默认为黑色

navigationBarTitleText:标题,任意修改

navigationBarBackgroundColor:背景颜色,只支持16进制设置颜色

修改后:

常用的属性:

enablePullDownRefresh:是否开启全局下拉,默认为false不下拉,true为下拉

页面配置:在页面的json文件中配置样式

将背景颜色改成#AA0000这种颜色,字体颜色改成白色,标题改成当前其他

开始样式:

改变后样式:

复制代码
"navigationBarBackgroundColor": "#AA0000",
  "navigationBarTitleText": "页面配置"

当全局配置和页面配置中有相同的配置,以页面配置为主,也就是页面配置优先级大于全局配置

跳转页面:

第一种方式:wxml页面使用navigator标签

复制代码
<navigator url="/pages/index/index" open-type="navigate">标签普通页面跳转</navigator>

url:当前小程序内的跳转链接

open-type:设置跳转普通页面还是tabBar页面,默认值为navigate,跳转普通页面,值为switchTab,跳转tabBar页面

第二种方式:js页面书写代码

普通页面跳转:定义一个方法

复制代码
putong(){
    wx.navigateTo({
      url:"/pages/index/index"
    })
  }

wxml页面点击跳转

复制代码
<button bindtap="putong">页面跳转</button>

tabBar页面跳转:也是定义一个方法

复制代码
 tarBar(){
    wx.switchTab({
       url:"/pages/01/01"
    })
  }

wxml页面点击跳转

复制代码
<button bindtap="tarBar">tarBar页面跳转</button>
相关推荐
CHU72903537 分钟前
直播商城APP前端功能全景解析:打造沉浸式互动购物新体验
java·前端·小程序
黑客老李10 小时前
web渗透实战 | js.map文件泄露导致的通杀漏洞
安全·web安全·小程序·黑客入门·渗透测试实战
游戏开发爱好者820 小时前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
2501_915106321 天前
app 上架过程,安装包准备、证书与描述文件管理、安装测试、上传
android·ios·小程序·https·uni-app·iphone·webview
2501_915106321 天前
使用 Sniffmaster TCP 抓包和 Wireshark 网络分析
网络协议·tcp/ip·ios·小程序·uni-app·wireshark·iphone
宠友信息1 天前
2025社交+IM及时通讯社区APP仿小红书小程序
java·spring boot·小程序·uni-app·web app
“负拾捌”1 天前
python + uniapp 结合腾讯云实现实时语音识别功能(WebSocket)
python·websocket·微信小程序·uni-app·大模型·腾讯云·语音识别
换日线°2 天前
NFC标签打开微信小程序
前端·微信小程序
光影少年2 天前
AIGC + Taro / 小程序
小程序·aigc·taro
2501_915918412 天前
在 iOS 环境下查看 App 详细信息与文件目录
android·ios·小程序·https·uni-app·iphone·webview