微信小程序开发：简朴设置教程包括对小程序全局设置，，，，包括page,window等基本的设置。。。。。

1.设置

app.json文件用来对微信小程序举行全局设置，，，，决议页面文件的路径、窗口体现、设置网络超时时间、设置多 tab 等。。。。。

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

1.1 pages

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

文件名不需要写文件后缀，，，，由于框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件举行整合。。。。。

eg:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

1.2 window

用于设置小程序的状态栏、导航条、问题、窗口配景致。。。。。

属性	类型	默认值	形貌
navigationBarBackgroundColor	HexColor	#000000	导航栏配景颜色，，，，如"#000000"
navigationBarTextStyle	String	white	导航栏问题颜色，，，，仅支持 black/white
navigationBarTitleText	String		导航栏问题文字内容
backgroundColor	HexColor	#ffffff	窗口的配景致
backgroundTextStyle	String	dark	下拉配景字体、loading 图的样式，，，，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，，，，详见页面相关事务处理函数。。。。。
onReachBottomDistance	Number	50	页面上拉触底事务触发时距页面底部距离，，，，单位为px

注：HexColor（十六进制颜色值），，，，如"#ff00ff"

eg:

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

1.3 tabBar

若是小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），，，，可以通过 tabBar 设置项指定 tab 栏的体现，，，，以及 tab 切换时显示的对应页面。。。。。

Tip：

当设置 position 为 top 时，，，，将不会显示 icontabBar 中的 list 是一个数组，，，，只能设置最少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，，，，建议尺寸为 81px * 81px，，，，当 postion 为 top 时，，，，此参数无效，，，，不支持网络图片
selectedIconPath	String	否	选中时的图片路径，，，，icon 巨细限制为40kb，，，，建议尺寸为 81px * 81px ，，，，当 postion 为 top 时，，，，此参数无效

eg: "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "backgroundColor" : "#F7F7FA", "borderStyle": "white", "list": [{ "pagePath": "pages/word/word", "text": "背词", "iconPath": "images/home.png", "selectedIconPath": "images/home-selected.png" } 1.4 networkTimeout

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

属性说明：

属性	类型	必填	说明
request	Number	否	wx.request的超时时间，，，，单位毫秒，，，，默以为：60000
connectSocket	Number	否	wx.connectSocket的超时时间，，，，单位毫秒，，，，默以为：60000
uploadFile	Number	否	wx.uploadFile的超时时间，，，，单位毫秒，，，，默以为：60000
downloadFile	Number	否	wx.downloadFile的超时时间，，，，单位毫秒，，，，默以为：60000

1.5 debug

可以在开发者工具中开启 debug 模式，，，，在开发者工具的控制台面板，，，，调试信息以 info 的形式给出，，，，其信息有Page的注册，，，，页面路由，，，，数据更新，，，，事务触发 。。。。。 可以资助开发者快速定位一些常见的问题。。。。。

1.6 page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口体现举行设置。。。。。 页面的设置比app.json全局设置简朴得多，，，，只是设置 app.json 中的 window 设置项的内容，，，，页面中设置项会笼罩 app.json 的 window 中相同的设置项。。。。。

页面的.json只能设置 window 相关的设置项，，，，以决议本页面的窗口体现，，，，以是无需写 window 这个键，，，，如：

属性	类型	默认值	形貌
navigationBarBackgroundColor	HexColor	#000000	导航栏配景颜色，，，，如"#000000"
navigationBarTextStyle	String	white	导航栏问题颜色，，，，仅支持 black/white
navigationBarTitleText	String		导航栏问题文字内容
backgroundColor	HexColor	#ffffff	窗口的配景致
backgroundTextStyle	String	dark	下拉配景字体、loading 图的样式，，，，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，，，，详见页面相关事务处理函数。。。。。
disableScroll	Boolean	false	设置为 true 则页面整体不可上下转动；；只在 page.json 中有用，，，，无法在 app.json 中设置该项
onReachBottomDistance	Number	50	页面上拉触底事务触发时距页面底部距离，，，，单位为px

eg:

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

下面展示下项目中的app.json的完整样式：

{
  "pages":[
    "pages/word/word",
    "pages/search/search",
    "pages/settings/settings",
    "pages/search/detail/detail",
    "pages/settings/clause/clause",
    "pages/settings/help/help",
    "pages/settings/feedback/feedback",
    "pages/note/index/index",
    "pages/note/create/index",
    "pages/note/edit/index",
    "pages/intro/intro",
    "pages/intro/trick/trick",
    "pages/intro/recommend/recommend",
    "pages/intro/saying/saying"

  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "backgroundColor" : "#F7F7FA",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/word/word",
      "text": "背词",
      "iconPath": "images/home.png",
      "selectedIconPath": "images/home-selected.png"
    },
    {
      "pagePath": "pages/search/search",
      "text": "查词",
      "iconPath": "images/search.png",
      "selectedIconPath": "images/search-selected.png"
    },
    {
      "pagePath": "pages/intro/intro",
      "text": "要领",
      "iconPath": "images/intro.png",
      "selectedIconPath": "images/intro-selected.png"
    },
    {
      "pagePath": "pages/note/index/index",
      "text": "条记",
      "iconPath": "images/note.png",
      "selectedIconPath": "images/note-selected.png"
    },
    {
      "pagePath": "pages/settings/settings",
      "text": "设置",
      "iconPath": "images/settings.png",
      "selectedIconPath": "images/settings-selected.png"
    }]
  },
  "window":{
    "backgroundTextStyle":"light",
    "backgroundColor": "#EFEFF4",
    "navigationBarBackgroundColor": "#2C2D31",
    "navigationBarTitleText": "佑米单词",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true
  }
}

小程序工具提供多类型商城/门店小程序制作，，，，可视化编辑 1秒天生5步上线。。。。。通过拖拽、拼接？？？？？榻峁剐〕绦蛏坛且趁妫，，，所看即所得，，，，只需要美工就能做出细腻商城。。。。。

　　更多微信小程序相关资讯，，，，请前往：/miniprogramschool/

KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。

KESION 一直通过手艺立异，，，，提供产品和服务，，，，助力企业向数字化转型，，，，通过科技驱动商业刷新，，，，让商业变得更智慧！

▼点击进入pp电子官网相识更多