• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

01小程序基本的文件组成和全局配置及页面配置

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

小程序中的各个文件的作用:

project_config.json  文件: 

这个文件的作用是:项目配置文件

例如,我们可以在里面修改 appid ,

 

 

当然,也可以通过 点击详情然后修改 appid  ,

app.wxss 文件: 

这个文件中 的样式   可以在所有的其他的 页面   中使用,

app.json 文件: 

以 json 格式 存储的一些 关于 全局页面信息  的文件,如果其他页面可以直接使用它,   

app.js   文件: 

控制整体项目的 逻辑处理的,例如,onLaunch 函数就是在 整个小程序加载完之后执行的,  还有一些生命周期的方法,后面会细讲, 

 

 

 

pages 中的四个文件:

xxx.js  

用于逻辑具体页面的逻辑处理,

xxx.json  

配置具体页面的信息,

xxx.wxml 

类似于 html ,比HTML增强一些功能,例如可以便利,循环之类的, 

HTML中div  到了这里变成了  view 之类的,

xxx.wxss

类似于css ,

 

utils 目录 :

它是做为一个工具类 存在的, 我们可以将 自定义的东西放在这里,  

总结:

以上的 app.js app.json  app.wxss project_config.json 都是针对 整体项目的,

如果想要 操作具体页面 可在pages里 的四个文件 xxx.wxml xxx.wxss xxx.json xxx.js 进行操作!!!  

 

需要提醒的是,在 .json 文件中书写 必须满足json 格式,json 具体格式省略!!! 、

而且json 文件中不可以注释,   

 

app.json 下的各个配置项  (全局配置) :

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象,有以下属性:

pages配置项 :

   

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对于位置的 .json.js.wxml.wxss 四个文件进行处理。

数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。

 

window 配置 项:

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

属性类型默认值描述最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如 #000000  
navigationBarTextStyle string white 导航栏标题颜色,仅支持 black / white  
navigationBarTitleText string   导航栏标题文字内容  
navigationStyle string default 导航栏样式,仅支持以下值:
default 默认样式
custom 自定义导航栏,只保留右上角胶囊按钮。参见注 2。
微信客户端 6.6.0
backgroundColor HexColor #ffffff 窗口的背景色  
backgroundTextStyle string dark 下拉 loading 的样式,仅支持 dark / light  
backgroundColorTop string #ffffff 顶部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16
backgroundColorBottom string #ffffff 底部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16
enablePullDownRefresh boolean false 是否开启全局的下拉刷新。
详见 Page.onPullDownRefresh
 
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离,单位为 px。
详见 Page.onReachBottom
 
pageOrientation string portrait 屏幕旋转设置,支持 auto / portrait / landscape
详见 响应显示区域变化
2.4.0 (auto) / 2.5.0 (landscape)

 

tabBar   配置 项:

如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 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 tabBar 的位置,仅支持 bottom / top  
custom boolean false 自定义 tabBar,见详情 2.5.0

其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:

属性类型必填说明
pagePath string 页面路径,必须在 pages 中先定义
text string tab 上按钮文字
iconPath string 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
当 position 为 top 时,不显示 icon。
selectedIconPath string 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
当 position 为 top 时,不显示 icon。

 

debug  配置 项:

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

 

 

其实,js中的逻辑错误,就算不开启 debug模式也是可以定位出来的,  

建议: 不使用 debug 模式!  

 

app.json 下的其他的  配置项  (全局配置) :

除了上面的基础 配置项,还有 functionPages  ,subpackages 等一些高级的配置项,这些东西现在讲   没有什么意义,  

 

页面的配置:  

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象,有以下属性:

配置项

属性类型默认值描述最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如 #000000  
navigationBarTextStyle string white 导航栏标题颜色,仅支持 black / white  
navigationBarTitleText string   导航栏标题文字内容  
navigationStyle string default 导航栏样式,仅支持以下值:
default 默认样式
custom 自定义导航栏,只保留右上角胶囊按钮
微信客户端 7.0.0
backgroundColor HexColor #ffffff 窗口的背景色  
backgroundTextStyle string dark 下拉 loading 的样式,仅支持 dark / light  
backgroundColorTop string #ffffff 顶部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16
backgroundColorBottom string #ffffff 底部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16
enablePullDownRefresh boolean false 是否开启当前页面下拉刷新。
详见 Page.onPullDownRefresh
 
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离,单位为px。
详见 Page.onReachBottom
 
pageOrientation string portrait 屏幕旋转设置,支持 auto / portrait / landscape
详见 响应显示区域变化
2.4.0 (auto) / 2.5.0 (landscape)
disableScroll boolean false 设置为 true 则页面整体不能上下滚动。
只在页面配置中有效,无法在 app.json 中设置
 
usingComponents Object 页面自定义组件配置 1.6.3

页面配置中只能设置 app.json 中 window 对应的配置项,以决定本页面的窗口表现,所以无需写 window 这个属性。

 

随便找的十六进制 颜色:

# 000 黑色,

# F00 红色 ,

# FF0黄色 ,

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap