微信小程序 教程之小程序配置


Posted in Javascript onOctober 17, 2016

微信小程序——配置

       以下就是小编对小程序配置的资料进行的系统的整理,希望能对开发者有帮助。

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

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

{
 "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
}

app.json 配置项列表

属性 类型 必填 描述
pages Array 设置页面路径
window Object 设置默认页面的窗口表现
tabBar Object 设置底部 tab 的表现
networkTimeout Object 设置网络超时时间
debug Boolean 设置是否开启 debug 模式

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

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

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如"#000000"
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
navigationBarTitleText String   导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字体、loading 图的样式,仅支持 dark/light

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

如 app.json :

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

微信小程序 教程之小程序配置

tabBar

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

tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

属性说明:

属性 类型 必填 默认值 描述
color HexColor   tab 上的文字默认颜色
selectedColor HexColor   tab 上的文字选中时的颜色
backgroundColor HexColor   tab 的背景色
borderStyle String black tabbar上边框的颜色, 仅支持 black/white
list Array   tab 的列表,详见 list 属性说明,最少2个、最多5个 tab

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

属性 类型 必填 说明
pagePath String 页面路径,必须在 pages 中先定义
text String tab 上按钮文字
iconPath String 图片路径,icon 大小限制为40kb
selectedIconPath String 选中时的图片路径,icon 大小限制为40kb

微信小程序 教程之小程序配置

networkTimeout

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

属性说明:

属性 类型 必填 说明
request Number wx.request的超时时间,单位毫秒
connectSocket Number wx.connectSocket的超时时间,单位毫秒
uploadFile Number wx.uploadFile的超时时间,单位毫秒
downloadFile Number wx.downloadFile的超时时间,单位毫秒

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"
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 Javascript
jQuery事件对象总结
Oct 17 #Javascript
微信小程序 MINA文件结构
Oct 17 #Javascript
Jquery实现上下移动和排序代码
Oct 17 #Javascript
微信小程序 Page()函数详解
Oct 17 #Javascript
微信小程序 触控事件详细介绍
Oct 17 #Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 #Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 #Javascript
You might like
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
用python对excel查重
2020/12/07 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
判断单链表中是否存在环
2012/07/16 面试题
Why do we need Unit test
2013/01/03 面试题
艺术系应届生的自我评价
2013/10/19 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
企业年会主持词
2014/03/27 职场文书
承诺书格式
2014/06/03 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
安全横幅标语
2014/06/09 职场文书
python中取整数的几种方法
2021/11/07 Python