微信小程序综合配置【app.json 全解】{必须了解}

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

以下是一个包含了所有配置选项的 app.json :

首先来说说:

App()

App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。


App({
  onLaunch: function(options) {
    // Do something initial when launch.
},
  onShow: function(options) {
    // Do something when show.
},
  onHide: function() {
    // Do something when hide.
},
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。需要注意的是:只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

详情:https://developers.weixin.qq.com/miniprogram/dev/framework/operating-mechanism.html

onLaunch, onShow 参数


onPageNotFound

基础库 1.9.90 开始支持,低版本需做兼容处理

当要打开的页面并不存在时,会回调这个监听器,并带上以下信息:

开发者可以在 onPageNotFound 回调中进行重定向处理,但必须在回调中同步处理,异步处理(例如 setTimeout 异步执行)无效。

示例代码:


App({
  onPageNotFound(res) {
  wx.redirectTo({
      url: 'pages/...'
    }) // 如果是 tabbar 页面,请使用 wx.switchTab
  }
})

注意:

  1. 如果开发者没有添加 onPageNotFound 监听,当跳转页面不存在时,将推入微信客户端原生的页面不存在提示页面
  2. 如果 onPageNotFound 回调中又重定向到另一个不存在的页面,将推入微信客户端原生的页面不存在提示页面,并且不在回调 onPageNotFound

注意:

  • App() 必须在 app.js 中注册,且不能注册多个。
  • 不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。
  • 不要在 onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。
  • 通过 getApp() 获取实例之后,不要私自调用生命周期函数。

{
    "pages": [
    "pages/index/index",
    "pages/logs/index"
],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
      "text": "首页"
    }, {
        "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

pages

接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,

数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。

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

如开发目录为:

pages/
pages/index/index.wxml
pages/index/index.js
pages/index/index.wxss
pages/logs/logs.wxml
pages/logs/logs.js
app.js
app.json
app.wxss

则需要在 app.json 中写:

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

window

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

注:HexColor(十六进制颜色值),如"#ff00ff"

注:navigationStyle 只在 app.json 中生效。开启 custom 后,低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0(不代表最低版本,只供调试用) 可方便切到旧视觉

如 app.json :

"window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "首页的内容",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  },

效果:


tabBar

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

Tip:

  1. 当设置 position 为 top 时,将不会显示 icon
  2. tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:



,
   "tabBar": {
       "color": "#959394",  //文字默认颜色
           "selectedColor": "#959394",//文字被选中时的颜色
           "backgroundColor": "#f0f0f0",//背景色
           "borderStyle": "white",//TAB栏边框颜色
           "list": [
           {
               "pagePath": "pages/tabOne/tabOne",//导航页面
               "iconPath": "pages/images/1.png",//默认图片路径
               "selectedIconPath": "pages/images/1.png",//被选中时的图片路径
               "text": "首页"
           },
           {
               "pagePath": "pages/tabTwo/tabTwo",
               "iconPath": "pages/images/2.png",
               "selectedIconPath": "pages/images/2.png",
               "text": "朋友"
           },
           {
               "pagePath": "pages/tabThree/tabThree",
               "iconPath": "pages/images/3.png",
               "selectedIconPath": "pages/images/3.png",
               "text": "我的"
           }
       ]
   }

2-3.效果:

networkTimeout

可以设置各种网络请求的超时时间。

debug

可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以 info 的形式给出,其信息有Page的注册页面路由数据更新事件触发 。 可以帮助开发者快速定位一些常见的问题。


附:

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个键,如:


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

注:综合详解App.json,文章参考官方文档

猜你喜欢

转载自blog.csdn.net/qq_38191191/article/details/80922155