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


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 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
jquery实现用户打分评分特效
May 28 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
vue权限问题的完美解决方案
May 08 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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留言本实例代码
2010/05/09 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
bootstrapvalidator之API学习教程
2017/06/29 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
win与linux系统中python requests 安装
2016/12/04 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
python实现随机梯度下降法
2020/03/24 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
django迁移数据库错误问题解决
2019/07/29 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
校长就职演讲稿
2014/01/06 职场文书
母婴店促销方案
2014/03/05 职场文书
骨干教师考核评语
2014/12/31 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
房产电话营销开场白
2015/05/29 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
bat批处理之字符串操作的实现
2022/03/16 Python