微信小程序基础教程(目录结构与配置)

作者:日期:2017-01-18 11:27:47 点击:358

 【目录结构】

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

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

如下:

 

1.jpg

JS文件就不用说了,跟原生JS道理一样,.Json文件是配置文件由小程序内置的方法,属性,api来配置,wxss跟我们的CSS文件一个意思

app.js是小程序的逻辑,app.json是小程序的公共设置,app.wxss是小程序的样式公共样式表,

注意:app.js  app.json 文件是必须的,app.wxss是可选的

一个小程序页面由四个文件组成,分别是:

2.jpg

这里的 wxml文件就像我们的HTML文件

注意1:page页面中js ,wxml文件是必须的  json,wxss是可选的

注意2:为了方便开发者减少配置项,我们规定描述页面的这四个文件必须具有相同的路径与文件名。

 

【配置】

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

这是一个JSON对象

{“page”:[“”,””],”window”:{},”tabBar”:{},”networkTimeout”:{},”debug”:{}}

接下来分别详细介绍一下每个属性

【page属性 】

此属性必填

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

注意:文件名不需要写文件后缀,因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

例如:

开发目录为:page/api/index.wxml

我们要在app.json中写

{“page”:[“page/api/index”]}

 

【window属性】

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

{
"window":{
"navigationBarBackgroundColor": "导航栏背景颜色,十六进制,默认值#000000",
"navigationBarTextStyle": "导航栏标题颜色,字符串,仅支持 ‘black’/’white’",
"navigationBarTitleText": "导航栏标题文字内容",
"backgroundColor": "窗口的背景颜色,十六进制,默认值#ffffff",
"backgroundTextStyle": "下拉背景字体、loading 图的样式,字符串,仅支持 dark/light",
“enablePullDownRefresh” :”是否开启下拉刷新 布尔值,默认false”
}
}

?

 

【tabBar属性】

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

Tip: 通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirectTo)所到达的页面,即使它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏。

 

属性说明

{
“tabBar”:{
“color”:” 必填, tab 上的文字默认颜色,十六进制”,
“selectedColor”:”必填 tab 上的文字选中时的颜色 ,十六进制”,
“backgroundColor”:”必填 tab的背景色 十六进制”,
“borderStyle”:”非必填 ,tabbar上边框的颜色,字符串,默认black 仅支持 black/white”,
“list”:”必填,数组,tab 的列表,详见 list 属性说明,最少2个、最多5个 tab”,
“position”:”非必填,字符串,默认值bottom,可选值 bottom、top”
}
}

?

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

“list”:[{
“pagePath”:” 必填 页面路径,必须在 pages 中先定义”,
“text”:” 必填 tab 上按钮文字”,
“iconPath”:”必填 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px”,
“selectedIconPath”:”必填 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px”
}]

?

networkTimeout属性

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

{
“networkTimeout”:{
  “request”:”Number类型  wx.request的超时时间,单位毫秒,默认为:60000”,
  “connectSocket”:” Number类型  wx.request的超时时间,单位毫秒,默认为:60000”,
  “uploadFile”:” Number类型 wx.uploadFile的超时时间,单位毫秒,默认为:60000”,
  “downloadFile”:” Number类型 wx.downloadFile的超时时间,单位毫秒,默认为:60000”
  }
}

注意:都是非必填的

 

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

 

上一篇: webpack中library和libraryTarget使用场景

下一篇: 微信小程序基础教程(逻辑层 APP Service)