微信小程序开发-配置

最新推荐文章于 2024-03-05 19:12:06 发布

黑猫中校

最新推荐文章于 2024-03-05 19:12:06 发布

阅读量897

点赞数

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/tang1392/article/details/78504418

版权

微信小程序专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了微信小程序的全局配置，包括页面路径、窗口表现、网络超时等设置。重点强调了pages配置项的重要性，并提供了代码示例和截图说明。作者分享了自学过程中遇到的问题，期待读者的反馈和指正。

摘要由CSDN通过智能技术生成

首先我要吐槽下，我也是最近才学微信小程序，遇到问题网上看了很多资料，要么不全，要么就是照搬官网教程。我花点时间自己按照官网的介绍重新学习一边并且写成教程。有不足的地方希望各位大神看到了评论说一下。。。。Zzzz

配置：

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

几个当中pages是必填的！！！！

不多说，我直接上代码和演示截图，代码里有详细的注释。

pages

 
  "pages":[ 
 
  "pages/index/index", 
   //第一个就是小程序打开看到的页面 
 
  "pages/frame/frame", 
 
  "pages/api/api", 
 
  "pages/assembly/assembly" 
 
   ]

三个页面分别是框架、api、组件的意思，百度翻译的别吐槽。。。每个页面都需要在这里注册一下。

window

 
  "window":{ 
 

 
  "backgroundTextStyle": 
  "light", 
  //下拉背景字体、loading 图的样式，仅支持 dark/light 
 

 
  "navigationBarBackgroundColor": 
   "#fff", 
  //导航栏背景颜色，默认"#000000" 
 

 
  "navigationBarTitleText": 
   "WeChat", 
  //导航栏标题文字内容 
 

 
  "navigationBarTextStyle": 
  "black", 
  //导航栏标题颜色，仅支持 black/white\ 
 

 
  "backgroundColor": 
  "#f3f5f7", 
  //窗口的背景色 
 

 
  "enablePullDownRefresh": 
  true, 
  //是否开启下拉刷新,默认false 
 

 
  "onReachBottomDistance": 
  50 
  //页面上拉触底事件触发时距页面底部距离，单位为px,默认50px 
 

}

   只有bgcolor是支持16进制颜色的，在这里面我也要引入官网的那个图 
 

   对于上拉和下拉最好自己设置然后检测下。 
 

   tip： 
  enablePullDownRefresh在app.json中是定义全局，在每个页面的json中只定义该页面 
 

tabBar

Tip：

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

demo：

 
    "tabBar":{ 
   
    "color": 
    "#bfbfbf", 
    //tab 上的文字默认颜色 
   
    "selectedColor": 
    "#1afa29", 
    //tab 上的文字选中时的颜色 
   
    "backgroundColor": 
    "#ccc", 
    //tab 的背景色 
   
    "borderStyle": 
    "black", 
    //tabbar上边框的颜色， 仅支持 black/white,默认black 
   
    "position": 
    "bottom", 
    //可选值 bottom、top,默认bottom 
   
    //borderStyle和position是不必须设置的，其他都是必须设置 
   
    "list":[{ 
    //tab 的列表，最少2个、最多5个 tab 
   
    "pagePath": 
    "pages/index/index", 
    //页面路径，必须在 pages 中先定义 
   
    "text": 
    "首页", 
    //tab 上按钮文字 
   
    "iconPath": 
    "images/index.png", 
    //图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效 
   
    "selectedIconPath": 
    "images/indexHL.png" 
    //选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效 
   
     },{ 
   
    "pagePath": 
    "/pages/frame/frame", 
   
    "text": 
    "框架", 
   
    "iconPath": 
    "images/frame.png", 
   
    "selectedIconPath": 
     "images/frameHL.png" 
   
     }, 
   
     { 
   
    "pagePath": 
    "pages/api/api", 
   
    "text": 
    "api", 
   
    "iconPath": 
    "images/api.png", 
   
    "selectedIconPath": 
     "images/apiHL.png" 
   
     }, 
   
     { 
   
    "pagePath": 
    "pages/assembly/assembly", 
   
    "text": 
    "组件", 
   
    "iconPath": 
    "images/assembly.png", 
   
    "selectedIconPath": 
     "images/assemblyHL.png" 
   
     }] 
   
     }

networkTimeout

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

 
    "networkTimeout": { 
   
    "request": 
    60000, 
    //wx.request的超时时间，单位毫秒，默认为：60000 
   
    "connectSocket": 
     60000, 
    //wx.connectSocket的超时时间，单位毫秒，默认为：60000 
   
    "uploadFile": 
    60000, 
    //wx.uploadFile的超时时间，单位毫秒，默认为：60000 
   
    "downloadFile": 
    60000 
    //wx.downloadFile的超时时间，单位毫秒，默认为：60000 
   
     }

debug

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

 
   "debug": 
   true

 
   tip:在开发时设置为true，上线时关闭 
  

page.json

      { 
    
     "navigationBarBackgroundColor": 
     "#f3f5f7", 
     //导航栏背景颜色，如"#000000" 
    
     "navigationBarTextStyle": 
     "black", 
     //导航栏标题颜色，仅支持 black/white 
    
     "navigationBarTitleText": 
     "api demo", 
     //导航栏标题文字内容 
    
     "backgroundColor": 
     "#f3f5f7", 
     //窗口的背景色 
    
     "backgroundTextStyle": 
     "light", 
     //下拉背景字体、loading 图的样式，仅支持 dark/light 
    
     "enablePullDownRefresh": 
     true, 
     //是否开启下拉刷新,默认false 
    
     "disableScroll": 
     false, 
     //设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项,默认false 
    
     "onReachBottomDistance": 
     50 
     //页面上拉触底事件触发时距页面底部距离，单位为px 
    
      }

 
   tip:源代码示例 
  