小程序结构目录

2021/4/18 20:57:53

本文主要是介绍小程序结构目录,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

小程序结构目录

一、小程序文件结构和传统web对比

小程序框架提供了自己的视图层描述语言WXML和WXSS,Javascript,在视图层与逻辑层之间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。

结构传统web微信小程序
结构HTMLWXML
样式CSSWXSS
逻辑JavascriptJavascript
配置JSON

二、基本的项目目录

在这里插入图片描述

二、小程序配置文件

1、全局配置文件——pages字段

app.json中的pages字段显示了页面布局,表明当前项目有几个子页面,与左侧目录中的pages相对应。小程序中新增/减少页面,都需要对 pages 数组进行修改。

在这里插入图片描述
如果直接在app.json中新添一个字段,左侧资源管理器会自动在对应位置生成相应文件。
当前页面显示的为pages字段的第一个页面。
在这里插入图片描述

2、window字段

window字段描述全局的默认窗口表现,用于设置小程序的状态栏、导航条、标题、窗口背景色。
在这里插入图片描述
backgroundTextStyle:
下拉 loading 的样式,仅支持 dark / light。light时下拉加载圈为白色,dark为黑色圈。

navigationBarTitleText:导航栏标题文字内容。

navigationBarBackgroundColor:导航栏背景颜色,如 #000000。

enablePullDownRefresh:是否开启全局的下拉刷新。值为true和false。

backgroundColor:窗口的背景色。即下拉后加载处显示的颜色。

3、tabbar字段

客户端窗口的底部或顶部有 tab 栏可以切换页面。
在这里插入图片描述

需要注意的是,tabbar里面必须放列表,最少 2 个、最多 5 个 tab。
在这里插入图片描述
pagePath:显示点击对应图标是跳转的页面,该页面在pages字段中。
text:指示tab的文本字段。
iconpath:即点击之前tab图标的样式,值为图标路径
selectediconpath:选中时的图片路径。
color:tab 上的文字默认颜色,仅支持十六进制颜色
selectedcolor:tab 上的文字选中时的颜色,仅支持十六进制颜色,与list同级。如设置color为蓝色。在这里插入图片描述



这篇关于小程序结构目录的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程