A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© AMay 中级黑马   /  2018-9-4 19:26  /  844 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文



【前言】
         在上一篇文章中,已为大家详细介绍如何开启你的第一个小程序的设置。下面继续为大家介绍小程序里面一些文件结构与配置。
【微信小程序的文件结构】
主体文件结构
主体部分由三个文件组成,必须放在项目的根目录,如下:
文件      
必填  
作用      
   app.js  
是   
小程序逻辑   
   app.json
  
是   
  
小程序公共设置  
   app.wxss
否   
小程序公共样式表
页面文件结构
页面由四个文件组成,分别是:
文件类型
必填  
作用                              
  js  
   
页面逻辑 ( 微信小程序没有windowdocument对象 )
  wxml
  
   
  
页面结构  ( XML语法,不是HTML语法 )         
  wxss
   
页面样式表 ( 拓展了rpx尺寸单位,微信专属响应式像素 )   
  json
   
页面配置  ( 不能写注释,否则编译报错 )
【微信小程序配置】
app.json 配置项列表
app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
属性
类型
必填
描述
String  Array
设置页面路径
  
Object
  
  
  
设置默认页面的窗口表现
Object
设置底部 tab 的表现
Boolean
设置是否开启 debug 模式
1.    Pages参数
1.png
如图所示,pages参数里面,配置的是微信小程序的页面的路径,并且这个路径是按顺序显示的,如果把”pages/logs/logs”放在最前面,那么小程序一打开,显示的页面就是logs日志页面了。
并且,在pages下面配置好页面路径,文件夹pages就会自动生成一组页面,里面的js,json,wxml,wxss文件都自动生成好。
2.    window参数
用于设置小程序的状态栏、导航条、标题、窗口背景色。
注意:页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个键。
2.png
属性
默认值
描述
navigationBarBackgroundColor
#000000
导航栏背景颜色,如 #000000
navigationBarTextStyle
  
white
  
导航栏标题颜色,仅支持 black / white
navigationBarTitleText
导航栏标题文字内容
backgroundColor
  
#ffffff
  
窗口的背景色
backgroundTextStyle
dark
下拉 loading 的样式,仅支持 dark / light
backgroundColorTop              
  
#ffffff
  
顶部窗口的背景色,仅 iOS 支持      
backgroundColorBottom
#ffffff
底部窗口的背景色,仅 iOS 支持
enablePullDownRefresh
  
false
  
是否全局开启下拉刷新。
onReachBottomDistance
50
页面上拉触底事件触发时距页面底部距离,单位为px。
注意:其中backgroundTextStyle需要配合enablePullDownRefresh一起使用,下页面下拉的时候出现下拉刷新状态
3.png
3.    tabBar参数
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
注意:
1. 当设置 position 为 top 时,将不会显示 icon。
2. tabBar 中的 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
可选值 bottomtop,设置成top是无图标         
图示:
4.png
其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:
属性              
类型   
必填  
说明                                      
  pagePath        
String
   
页面路径,必须在 pages 中先定义                     
  text            
  
String
  
  
   
  
tab 上按钮文字                              
  iconPath        
String
   
图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion top 时,此参数无效
  selectedIconPath
String
   
选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion top 时,此参数无效
如下图所示:
5.png

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马