小程序-一

目录结构

• 配置文件.json

• 模板文件.wxml

• 样式文件.wxss

• 逻辑文件.js

注意描述页面的四个文件必须具有相同的路径与文件名

配置tabBar

对若干一级页面的入口链接

• 全局配置app.json

"tabBar":{
    "list":[
      {
        "text":"Home",
        "pagePath":"pages/index/index",
        "iconPath":"/image/home-2.png",
        "selectedIconPath":"/image/home-1.png"
      },
      {
        "text": "About",
        "pagePath": "pages/about/about",
        "iconPath": "/image/more-2.png",
        "selectedIconPath": "/image/more-1.png"
      }
    ]
  }

引出问题

<navigator>链接失效，点击没有效果

解决方法：改变<navigator>的open-type:switchTab

今日总结

app.json 是小程序的全局配置文件。里面包含了小程序的页面路径，界面表现，底部Tab等

• pages字段 描述小程序的页面路径。

  • 数据类型 String Array
  • 定义方式

    "pages":["路径1", "路径2"]
    

• window字段 定义小程序所有页面的顶部背景颜色，文字颜色

  • 定义方式

    "window": {
      "navigationBarBackgroundColor": "#EC7357",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "第一个小程序哦",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light",
      "enablePullDownRefresh": false
    }
    

• 常见属性

  • 导航栏背景颜色navigationBarBackgroundColor
  • 导航栏标题颜色navigationBarTextStyle
  • 导航栏标题文字内容navigationBarTitleText
  • 是否开启当前页面的下拉刷新enablePullDownRefresh
    • 下拉 loading 的样式backgroundTextStyle
    • 底部窗口的背景色backgroundColorBottom
    • 顶部窗口的背景色backgroundColorTop
  • 窗口的背景色backgroundColor

• tabBar字段指定 tab 栏的表现，以及 tab 切换时显示的对应页面
  • 定义方式

"tabBar":{
"list":[
      {
        "text":"Home",
        "pagePath":"pages/index/index",
        "iconPath":"/image/home-2.png",
        "selectedIconPath":"/image/home-1.png"
      },

      {
        "text": "About",
        "pagePath": "pages/about/about",
        "iconPath": "/image/more-2.png",
        "selectedIconPath": "/image/more-1.png"
      }

    ]
}

• 属性
  • tab 上的文字默认颜色color
  • tab 上的文字选中时的颜色selectedColor
  • tab 的背景色backgroundColor
  • tabbar上边框的颜色borderStyle
  • tab 的列表list
    • 页面路径pagePath
    • tab 上按钮文字text
    • 图片路径selectedIconPath
    • 选中时的图片路径iconPath
  • tabBar的位置position

WXML 模板

• WXML-结构

• WXSS-表现

• JS-行为