微信小程序学习一(小程序配置)

主要记录学习过程中使用次数较多的内容

官方文档-小程序配置

• pages

用于指定小程序由哪些页面组成，每一项都对应一个完整的页面路径（含文件名），文件名不需要些后缀，框架会自动去寻找对应位置的.json，.js，.wxml，.wxss四个文件进行处理。

数组的第一项为初始页，即程序运行时第一个加载页。小程序中页面的新增&减少都需要对pages数组进行修改。

如项目结构：

├── app.js
├── app.json
├── app.wxss
├── pages
│ │── index
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs
│ ├── logs.wxml
│ └── logs.js
└── utils

则需要在app.json中定义index和log的页面信息

"pages": ["pages/index/index", "pages/logs/logs"]

• window

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

navigationBarBackgroColor：
描述： 导航栏的背景颜色
类型： HexColor
默认值：#000

navigationBarTextStyle：
描述： 导航栏标题颜色，只能设置为black / white
类型： string
默认值： white

navigationBarTitle：
描述：导航栏的标题文字信息
类型：string
默认值： " "

navigationStyle:
描述：导航栏样式，支持default默认样式以及custom自定义导航栏（更多信息查阅相关的官方文档）
类型： string
默认值： default

backgroundColor：
描述：窗口的背景色
类型： HexColor
默认值： #fff

backgroundTextStyle：
描述： 下拉loading的样式，仅支持dark / light
类型： string
默认值： dark

enablePullDownRefresh：
描述： 是否开启全局的下拉刷新
类型： boolean
默认值： false

onReachBotttomDistance：
描述：页面上拉触底事件触发时距页面底部距离，单位为px
类型： number
默认值： 50

"window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }

• tabBar

  如果小程序是一个多tab应用，可以通过tabBar配置指定tab栏的表现，以及tab切换时显示的对应页面。

color
tab上的文字的颜色

selectedColor
当前tab被选中时的文字的颜色

backgroundColor
tab的背景色

borderStyle
tabbar上边框的颜色，仅支持 black / white

position
tabBar的位置，仅支持 bottom / top

1. list
tab的列表项，数组类型，该项最少2个，最多5个

1. list详细信息

   pagePath
   页面路径，在pages中定义

   text
   tab按钮的文字

   iconPath
   tab按钮的图标路径，icon大小限制为40kb，建议尺寸81*81，不支持网络图片。当position为top时不显示icon。

   selectedIconPath
   当前tab被选中时的图标路径，icon大小限制为40kb，建议尺寸81*81，不支持网络图片。当position为top时不显示icon。

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },

• navigateToMiniProgramAppIdList

  小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时，需要先在配置文件中声明需要跳转的小程序 appId 列表，最多允许填写 10 个。

"navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]

• style

  微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 “style”: "v2"可表明启用新版的组件样式。

• useExtendedLib

  指定需要引用的扩展库。目前支持以下项目：

  • kbone: 多端开发框架
  • weui: WeUI 组件库

  指定后，相当于引入了对应扩展库相关的最新版本的 npm 包，同时也不占用小程序的包体积。目前暂不支持在分包中引用

{
  "useExtendedLib": {
    "kbone": true,
    "weui": true
  }
}