微信小程序开发 - 配置
我们使用app.json
文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等,简单的理解就是配置文件。
配置项表:
属性 |
类型 |
必填 |
描述 |
pages |
Array |
是 |
设置页面路径 |
window |
Object |
否 |
设置默认页面的窗口表现 |
tabBar |
Object |
否 |
设置底部 tab 的表现 |
networkTimeout |
Object |
否 |
设置网络超时时间 |
debug |
Boolean |
否 |
设置是否开启 debug 模式 |
pages
接受一个数组,每一项都是字符串,代表对应页面的【路径+文件名】信息,文件名不需要写后缀,因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。pages属性的第一个值为系统启动页面。小程序中新增、减少页面,都需对pages数组进行修改。
{ "pages":[ "pages/logs/logs", "pages/index/index" ] } |
window
windows属性用于设置小程序的状态栏、导航条、标题、窗口背景色。
属性 |
类型 |
默认值 |
描述 |
navigationBarBackgroundColor |
HexColor |
#000000 |
导航栏背景颜色,如"#000000" |
navigationBarTextStyle |
String |
white |
导航栏标题颜色,仅支持 black/white |
navigationBarTitleText |
String |
|
导航栏标题文字内容 |
backgroundColor |
HexColor |
#ffffff |
窗口的背景色 |
backgroundTextStyle |
String |
dark |
下拉背景字体、loading图样式,仅支持dark/light |
enablePullDownRefresh |
Boolean |
false |
是否开启下拉刷新,详见页面相关事件处理函数。 |
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的注册,页面路由,数据更新,事件触发。可以帮助开发者快速定位一些常见的问题。
参照豆瓣电影微信小程序的一个完整的app.json如下:
{ "pages": [ "pages/featured/featured", "pages/splash/splash", "pages/movie/movie", "pages/usbox/usbox", "pages/search/search", "pages/profile/profile" ], "window": { "navigationBarBackgroundColor": "#000000", "navigationBarTextStyle": "white", "navigationBarTitleText": "豆瓣电影", "backgroundColor": "#ffffff", "backgroundTextStyle": "dark", "enablePullDownRefresh": false }, "tabBar": { "color": "#ccc", "selectedColor": "#35495e", "borderStyle": "white", "backgroundColor": "#fafafa", "position": "bottom", "list": [ { "text": "推荐电影", "pagePath": "pages/featured/featured", "iconPath": "images/featured.png", "selectedIconPath": "images/featured-actived.png" }, { "text": "正在上映", "pagePath": "pages/usbox/usbox", "iconPath": "images/usbox.png", "selectedIconPath": "images/usbox-actived.png" }, { "text": "搜索", "pagePath": "pages/search/search", "iconPath": "images/search.png", "selectedIconPath": "images/search-actived.png" }, { "text": "资讯", "pagePath": "pages/splash/splash", "iconPath": "images/news.png", "selectedIconPath": "images/news-actived.png" }, { "text": "我的", "pagePath": "pages/profile/profile", "iconPath": "images/profile.png", "selectedIconPath": "images/profile-actived.png" } ] }, "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }, "debug": true } |
另外,每一个小程序页面也可以使用page.json文件对本页面的窗口表现进行配置。 页面中配置项会覆盖 app.json的 window 中相同的配置项。因为只能设置 window 相关的配置项,所以无需写 window 这个键,如:
{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } |
相关推荐
通过分析和学习这个“仿酷狗音乐微信小程序”的源码,开发者不仅可以提升微信小程序的编程技巧,还能对音乐类应用的常见功能有更深入的理解。同时,这也是一个很好的实战项目,帮助开发者将理论知识转化为实际操作...
这个"微信小程序常用功能学习示例"是一个很好的学习资源,帮助开发者掌握微信小程序的基础开发技巧。 首先,我们要讨论的是**页面跳转**。在微信小程序中,页面间的跳转是通过`wx.navigateTo`、`wx.redirectTo`、`...
这个"微信小程序代码-微信中的知乎--微信小程序demo.zip"压缩包提供了一个模仿知乎界面的微信小程序示例,帮助开发者理解和学习如何构建类似的应用。 1. **小程序模板代码**:在开发微信小程序时,模板代码可以作为...
总结,【微信小程序-毕设期末大作业】模拟题库微信小程序源码是一个综合性的学习资源,涵盖了微信小程序的基础知识、页面构建、数据处理和功能实现等多个方面,对于想要学习或实践微信小程序开发的学员来说,是一个...
"微信小程序官方小程序示例源码"是微信官方提供的一套示例代码,用于帮助开发者理解和学习微信小程序的开发过程。 在`miniprogram-demo-master`这个压缩包中,通常会包含多个小程序的示例项目,每个项目都对应一个...
本项目“微信小程序-模仿QQ小程序”旨在通过模仿QQ小程序的界面和功能,帮助开发者学习和掌握微信小程序的开发技巧。 首先,我们需要了解微信小程序的基本结构。微信小程序由JSON、WXML、WXSS和JavaScript四部分...
本篇将深入探讨“猫眼微信小程序源码”,揭示其背后的开发技术和设计理念,为有意从事微信小程序开发的人员提供宝贵的学习资源。 猫眼微信小程序作为一款集电影票购买、影片信息查询、影评分享等功能于一体的娱乐...
【微信小程序项目之微信阅读小程序】是一个以微信小程序为平台的开发项目,旨在构建一个集书籍阅读、信息浏览和互动交流于一体的在线阅读应用。通过这个项目,开发者可以深入学习微信小程序的开发技术,理解其架构...
2. **API调用**:学习如何使用微信小程序提供的API,比如网络请求(wx.request)来获取电影数据,地理位置(wx.getLocation)获取用户位置,以及微信登录(wx.login)获取用户信息。 3. **数据绑定**:理解小程序中...
在这个“微信小程序学习用demo:登录及动画效果”的项目中,我们可以深入理解微信小程序的开发流程,尤其是登录功能的实现以及动画效果的添加。 1. **登录功能**: 微信小程序的登录流程通常包括以下几个步骤: -...
"美食列表源码"是针对微信小程序开发者,特别是初学者的一个实践项目,它可以帮助学习者理解并掌握微信小程序的基本架构和开发流程。 在微信小程序的开发中,主要有以下几个关键知识点: 1. **WXML**: 这是微信小...
这个项目适用于那些希望学习或实践微信小程序开发的学生或开发者,尤其适合作为毕业设计或期末大作业。源码的提供使得学习者可以直接查看和分析项目的实现细节,有助于加深对微信小程序开发流程和框架的理解。 1. ...
本DEMO是关于微信小程序的一个实例,可以帮助我们了解和学习微信小程序的开发流程和技巧。 首先,我们要理解微信小程序的基本结构。一个小程序通常包含以下部分:app.json(全局配置)、index.js(页面逻辑)、...
总结,这个“微信小程序项目实例——备忘录”涵盖了微信小程序的基础开发、前端设计、数据管理、用户交互等多个方面的知识点,为学习微信小程序开发提供了实用的示例。通过实践这样的项目,开发者可以深入理解微信小...
【微信小程序概述】 微信小程序是腾讯公司推出的一种轻量级应用开发平台,它基于JavaScript、WXML(微信标记...通过不断学习和实践,开发者可以打造出功能完善、操作便捷的微信小程序商城,满足用户多样化的购物需求。
总结起来,OneNET微信小程序源码项目是一个将物联网服务与微信小程序相结合的实践案例,开发者可以通过学习和研究这个项目,掌握如何利用OneNET平台实现物联网数据的获取和展示,以及微信小程序的开发和部署流程。...
在这个"微信小程序Demo"中,我们可以看到一个实际的小程序开发案例,这对于学习和理解微信小程序的开发流程及其技术栈是非常有帮助的。 首先,我们要了解微信小程序的基础架构。它主要基于JavaScript、WXML(微信小...
9. **样式隔离**:学习如何避免样式冲突,合理使用类名和选择器,以及微信小程序提供的样式隔离机制。 10. **调试与测试**:掌握微信开发者工具的使用,进行代码编辑、预览、调试和性能优化。 通过实践“美食列表...
【基于微信小程序实现二十四节气小程序】是一种利用微信开发者工具和微信小程序框架,结合中国传统文化中的二十四节气,设计和开发的小型应用程序。这个小程序旨在为用户提供关于二十四节气的相关信息,包括节气的...