【微信小程序丨第二篇】小程序的基本目录结构与文件作用剖析
前言
小程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。
⼩程序框架提供了⾃⼰的视图层描述语⾔
WXML 和 WXSS
,以及 JavaScript ,并在视图层与逻辑层间提供了数据传输和事件系统
,让开发者能够专注于数据与逻辑。
文章目录
- 前言
- 1、小程序文件结构和传统web对比
- 2、基本的项目目录
- Ⅰ-项目目录解释
- 3、小程序配置文件
- 4、小程序框架接口
- Ⅰ-App(Object object)
- AppObject getApp(Object object)
1、小程序文件结构和传统web对比
传统web 微信小程序 项目骨架、结构 HTML WXML 页面样式 CSS WXSS 项目逻辑 Javascript Javascript 配置 无 JSON
通过以上对⽐得出传统web是
三层结构
。⽽微信⼩程序是四层结构
,多了⼀层配置.json
当这几个文件在同一级目录下且命名相同(后缀不同),可以互相引用却不用导入
2、基本的项目目录
Ⅰ-项目目录解释
- 项目目录图解:
- 以
app
开头的文件是应用程序级别的文件,更改一处全局生效。而页面pages
的配置优先级高于全局配置(就近原则
) - 小程序是允许你修改文件目录名的
3、小程序配置文件
⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的app.json 和 ⻚⾯⾃⼰的page.json
Ⅰ-全局配置app.json
app.json
是当前⼩程序的全局配置,包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。普通快速启动项⽬⾥边的 app.json 配置代码
{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"}
}
- 字段的含义
1)pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径,这是为了让微信客⼾端知道当前你的⼩程序⻚⾯定义在哪个⽬录。
默认显示此字段中的第一项
2)window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊,⽂字颜⾊定义等。
3)完整的配置信息请参考 app.json配置
- tabBar-底部
tab
栏的表现:
更多配置详细请看
app配置文档
Ⅱ-页面配置page.json
- 这⾥的
page.json
其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。 开发者可以独⽴定义每个⻚⾯的⼀些属性,如顶部颜⾊、是否允许下拉刷新等等。 ⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容,⻚⾯中配置项会覆盖 app.json 的 window 中相同的配置项。
- 常用配置属性列举:
属性 类型 默认值 描述 navigationBarBackgroundColor HexColor #000000 导航栏背景颜⾊,如 #000000 navigationBarTextStyle String white 导航栏标题颜⾊,仅⽀持 black / white navigationBarTitleText String 导航栏标题⽂字内容 backgroundColor HexColor #ffffff 窗⼝的背景⾊ backgroundTextStyle String dark 下拉 loading
的样式,仅⽀持 dark / lightenablePullDownRefresh Boolean false 是否全局开启下拉刷新。 详⻅ Page.onPullDownRefresh onReachBottomDistance Number 50 ⻚⾯上拉触底事件触发时距⻚⾯底部距离,单位为px。 详⻅ Page.onReachBottom disableScroll Boolean false 设置为 true 则⻚⾯整体不能上下滚动;只在⻚⾯配置中有效,⽆法在 app.json 中设置该项
Ⅲ-sitemap 配置(了解即可)
⼩程序根⽬录下的
sitemap.json
⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引。主要服务于搜索
4、小程序框架接口
Ⅰ-App(Object object)
注册小程序。接受一个
Object
参数,其指定小程序的生命周期回调等。App() 必须在
app.js
中调用,必须调用且只能调用一次。不然会出现无法预期的后果相应的app()参数在下方的
小程序生命周期中有指出
AppObject getApp(Object object)
获取到小程序全局唯一的
App
实例。代码示例
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global dat
//或者
const {GbaseUrl} =getApp() //GbaseUrl是自己在app.js定义的全局变量
- Object object
属性 类型 默认值 必填 说明 最低版本 allowDefault boolean false 否 在 App
未定义时返回默认实现。当App被调用时,默认实现中定义的属性会被覆盖合并到App中。一般用于独立分包2.2.4
- 注意
- 不要在定义于
App()
内的函数中,或调用App
前调用getApp()
。使用this
就可以拿到 app 实例。- 通过
getApp()
获取实例之后,不要私自调用生命周期函数
【微信小程序丨第二篇】小程序的基本目录结构与文件作用剖析相关推荐
- 微信开发者工具无法选择预览和真机调试_小程序开发 第二篇:使用微信小程序开发者工具、wepy框架初始化项目...
1.微信小程序开发者工具 使用: 小程序原生开发:直接使用小程序开发者工具打开项目即可 小程序框架开发:首选官方提供类vue.js开发框架 wepy.js ,备选 mpVue.我们选择的是 wepy ...
- 【微信小程序丨第一篇】初识微信小程序开发
前言 小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 文章目录 前言 1.什么是微信小程序 Ⅰ-小程序历史 Ⅱ-小程序的优势 ...
- 小程序开发(1)-之目录结构和文件说明
#以下图片是小程序的目录结构,建议所有的目录都使用小写字母,不使用驼峰格式 #组件 components是自定义组件目录,对一些常用的组件的封装 #配置文件 config是配置文件,存有一些常用的字段 ...
- 小程序的目录结构—pages文件夹的内容和作用
作用:pages下放小程序的所有页面,每个页面都是以单独的文件夹而存在的 1) .js 页面的脚本文件(script:根据一定格式编码的可执行文件),存放页面的数据.事件处理函数. .json 2) ...
- 【职业规划】第二篇:程序员分级之中级程序员
Java程序员的分级并没有统一的标准,以下列举出来的只是我所理解的关于Java工程师的划分标准,不喜勿喷,如有建议,欢迎评论或私信. 二.Java中级程序员(又名:Java中级工程师/Java中级开发 ...
- python项目实践_Python 项目实践三(Web应用程序)第二篇
接着上节的继续学习,使用Django创建网页的过程通常分三个阶段:定义URL.编写视图和编写模板.首先,你必须定义URL模式,每个URL都被映射到特定的视图--视图函数获取并处理网页所需的数据.视图函 ...
- PHP程序构造,PHP程序员在做网站开发前对基本目录结构如何规划?
之前分享了一些有技术积累的经验,今天想分享一点自己对PHP网站开发前目录结构的架构的一点心得. 我自己写的李雷博客,就是按照这种思路来做的,主要分为以下几个部分: 1.config目录 这里主要放一些 ...
- 微信小程序之拓展篇——weui-wxss
微信小程序之入门篇(一) 微信小程序之注册篇(二) 微信小程序之开发初体验(三)--开发工具使用和目录结构 微信小程序之生命周期(四) 微信小程序之数据绑定(五) 微信小程序之触控事件(六) 微信小程 ...
- 01 | 预习篇 · 小鲸鱼大事记(一):初出茅庐
防止断更 请务必加首发微信:1716143665 01 | 预习篇 · 小鲸鱼大事记(一):初出茅庐 深入剖析Kubernetes进入课程 你好,我是张磊.我今天分享的主题是:小鲸鱼大事记之 ...
最新文章
- 002 python准备做题的一些准备
- SAP Spartacus的CMSPageGuard
- assertj断言异常_编写自定义的AssertJ断言
- 12种Javascript解决常见浏览器兼容问题的方法
- Java 算法 特殊的数字四十
- C++ STL算法系列4---unique , unique_copy函数
- Noip2011提高组 聪明的质监员
- SEO长尾理论,关键词需求覆盖理论
- win10 往vmware 黑苹果系统无法拖拽复制问题
- 支付宝余额提现收手续费了
- C语言学习教程:搬山游戏开发源码
- eureka集群高可用配置
- 极客日报第 40 期:小米 11 发布,售价 3999 元起;罗永浩回应败诉半导体公司
- 疫情影响下的物联网发展趋势
- Perl 批评的游乐园镜子
- 打印圆周率指定位数之python
- ECNU_OJ_1073
- win8u盘启动linux系统,在Mac系统下制作Windows启动U盘(失败案例)
- Webkit是什么?(Chrome浏览器的核心)
- hls网页播放器实现
热门文章
- 基于微信小程序的网上图书商城 源代码和毕业设计(1)商城首页
- 【一次认识一个市场技术指标】之KDJ(随机指标)
- 海外生活: 胆小鬼驾车行走多伦多
- Vault: 基础教程之入门及使用介绍
- 最好用的BT下载工具Qbittorrent ~群晖DSM7.0 Docker如何安装QB
- c++ dynamic_cast,static_cast,const_cast,reinterpret_cast四种cast用法整理
- OpenOCD的调试
- Python统计分析-卡方检验
- 关于Python的ARCH包(一)
- stm32F407 打开 FPU(浮点运算处理器)