微信小程序 配置文件详细介绍


Posted in Javascript onDecember 14, 2016

下面以开发者工具自动生成的程序框架为例,对小程序的框架进行介绍。

选择一个空的项目目录创建一个小程序项目,如下图:
微信小程序 配置文件详细介绍
创建完成后我们看到如下目录结构:
微信小程序 配置文件详细介绍
目录结构

微信小程序 配置文件详细介绍

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

文件 必须 作用
app.js 小程序逻辑
app.json 小程序公共设置
app.wxss 小程序公共样式表

pages目录下为小程序页面,每个页面须建立独立的文件夹,例如上面生成的小程序有两个页面,分别为pages/index、pages/logs,一个页面由四个文件组成,分别是:

文件类型 必须 作用
js 页面逻辑
wxml 页面结构
wxss 页面样式表
json 页面配置

配置

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

{
 "pages":[
  "pages/index/index",
  "pages/logs/logs"
 ],
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "WeChat",
  "navigationBarTextStyle":"black"
 }
}

app.json共提供了以下配置项:

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

接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。

window

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

属性 类型 默认值 描述
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
position String bottom 可选值 bottom、top

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

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

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

属性说明:

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

可以在开发者工具中开启 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 相关文章推荐
jQuery live
May 15 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
微信小程序 闭包写法详细介绍
Dec 14 #Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 #Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 #Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 #Javascript
实例解析Array和String方法
Dec 14 #Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 #Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 #Javascript
You might like
国内php原创论坛
2006/10/09 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
javascript 节点排序 2
2011/01/31 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
vuejs指令详解
2017/02/07 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
分享6个隐藏的python功能
2017/12/07 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
求职简历中个人的自我评价
2013/12/25 职场文书
大学旷课检讨书
2014/01/28 职场文书
网络技术专业求职信
2014/05/02 职场文书
文明旅游倡议书
2015/04/28 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
2015年国庆节寄语
2015/08/17 职场文书