微信小程序开发-配置

来源：互联网发布：数据库数据存储方式编辑：程序博客网时间：2024/06/10 07:46

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

阅读全文

0 0