小程序基础03:pages与window配置

1.pages

  pages接收一个数组,每一项都是字符串来指定小程序的每一个页面,每一项代表对应页面的【路径+文件名。数组的第一项代表小程序的初始页面,小程序新增或者减少页面,都需要对pages进行修改。

  文件名不需要写文件后缀,因为框架会自动去寻找路径 .json .js .wxml .wxss的四个文件进行整合。

  实例:

    //pages: String Array 设置页面路径
    "pages":[
        "pages/index/index",
        "pages/logs/logs",
        "pages/account/account"
    ],

2.window

  用于设置小程序的状态栏,导航条,标题,窗口背景色。

    //window: Object 设置默认页面的窗口表现
    "window":{
        "enablePullDownRefresh":true, //是否开启下拉刷新
        "backgroundColor":"fff", //窗口的背景色
        "backgroundTextStyle":"light",  //下拉背景字体、loading 图的样式,仅支持 dark/light
        "navigationBarBackgroundColor": "red", //导航栏背景颜色
        "navigationBarTitleText": "同舟快递", //导航栏标题文字内容
        "navigationBarTextStyle":"black" //导航栏标题颜色,仅支持 black/white
    },

3.tabBar

  如果我们的应用是一个多tab应用(客户端窗口的底部和顶部有tab栏可以进行切换),那么我们可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页面。

  Tip:通过页面跳转(wx.navigationTo)或者页面重定向(wx.redirectTo)所到达的页面,即使他是定义在tabBar配置中的页面,也不会显示底部的tab栏。

  tabBar是一个数组,只能配置最少2个,最多5个,tab按数组的顺序排序。

  其中list接收一个数组,数组中的每一个项都是一个对象,实例如下:

    //tabBar: Object 设置底部 tab 的表现
    "tabBar": {
        "list": [{
            "pagePath": "pages/index/index", //页面路径,必须在 pages 中先定义
            "text": "首页",  //tab 上按钮文字
            "iconPath": "",  //图片路径,icon 大小限制为40kb,
            "selectedIconPath":"" //选中时的图片路径,icon 大小限制为40kb
        }, {
            "pagePath": "pages/logs/logs",
            "text": "日志"
        }, {
            "pagePath": "pages/account/account",
            "text": "个人中心"
        }]
    },

  

时间: 2024-10-10 08:54:58

小程序基础03:pages与window配置的相关文章

微信小程序把玩(二)window配置

原文:微信小程序把玩(二)window配置 window用于设置小程序的状态栏.导航条.标题.窗口背景色.注意在app.json中配置的属性会被子window属性覆盖 只需在app.json配置即可

大牛带您微信小程序基础

前言什么是微信小程序,它是一种轻量级的APP,它与常规App来说,无需下载安装即可使用,它嵌于微信App中,要使用微信小程序你只需要搜索一下微信小程序的名称就好,如近期的"Google的画图"小程序等,小程序不同于APP一点的是,小程序成本低,前期宣传,可以靠扫描二维码,分享群,朋友圈等,来提高微信小程序的使用.无需安装即可下载的特点,也深受广大群众的喜欢.介绍小程序是一种用完即走的那么一种模式,从开始的B2C模式,人与商品,到P2P模式,人与人,在到C2P模式,人与服务.小程序就是那

微信小程序基础语法总结

本文介绍微信小程序语法 配置文件 app.json的配置(全局) { // 用来配置页面的路径 "pages":[ "pages/index/index", // 首页 "pages/Test/Test" // 跳转的页面 ], "window":{ "enablePullDownRefresh": true, // 是否支持下拉刷新 "backgroundTextStyle":&quo

.NET教程:微信小程序基础入门

.NET教程:微信小程序基础入门 准备 Demo 项目地址 (https://github.com/zce/weapp-demo) Clone or Download(需准备GIT环境) $ cd path/to/project/root $ git clone https://github.com/zce/weapp-demo.git project-name --depth 1 $ cd project-name 没有git环境,可以直接下载 (https://github.com/zce/

小程序基础02:小程序的全局配置

1.配置 我们使用app.json文件来对来微信小程序进行全局配置. 作用:他决定了页面文件的路径,窗口表现,设置网络超时时间,设置多tab等 每一个小程序页面也可以使用 .json 文件来对本页面的窗口进行配置.页面的配置比app.json配置简单得多,只是设置app.json中的window配置项的内容.页面中的配置会覆盖app.json的window中相等的配置项 实例    //pages: String Array 设置页面路径 "pages":[ "pages/i

小程序基础

一.准备 开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序. 小程序的 AppID 相当于小程序平台的一个身份证. 开发工具的使用 界面:模拟器(iphone6标准).编辑器.调试器: 编译:普通编译.添加编译模式(调试某个页面). 详情(选择开发版本.是否验证合法域名) 二.代码构成 最简单的小程序 ├── app.js ├── app.json ├── app.wxss ├── pages │ │── index │ │ ├── index.wxml │ │

微信小程序基础入门

准备 Demo 项目地址 https://github.com/zce/weapp-demo Clone or Download(需准备GIT环境) $ cd path/to/project/root $ git clone https://github.com/zce/weapp-demo.git project-name --depth 1 $ cd project-name 没有git环境,可以直接下载 安装开发环境 下载地址 Windows 64位 Windows 32位 macOS 安

微信小程序基础之创建使用教程

本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID .(一般这个AppID需要公司营业许可证,还必须要缴费才可获得

微信小程序基础知识

一.文件结构 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page app.js,app.json,app.wxss js,wxml,wxss,json app.json文件用来对微信小程序进行全局配置,决定页面文件的路径,窗口表现,设置网络超时时间,设置多tab等 { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "