目录结构
文件结构:一个微信小程序包含一个描述整体程序的app,和多个描述各自页面的page
主体部分由三个文件组成:app.js(小程序逻辑) app.json(小程序的公共设置) app.wxss(小程序的公共样式) 必须放在根目录下
一个小程序页面由四个文件组成:js(页面逻辑) wxml(页面结构) wxss(页面样式) json(页面配置)
注意:我们规定描述页面的这四个文件必须有相同的路径与文件名
配置
app.json配置
1、pages
设置页面路径(路径名+文件名 : "pages/index/index"),数组的第一项代表小程序的初始界面,小程序中新增或者删除界面,都需要在pages里面进行配置
-
{"pages":["pages/index/index""pages/logs/logs"]}
2、window
用于设置小程序的状态栏、导航条、标题、窗口背景色
navigationBarBackgroundColor :导航栏背景颜色
navigationBarTextStyle :导航栏标题文字颜色,仅支持black/white
navigationBarTitleText :导航栏文字内容
backgroundColor :窗口的背景颜色
backgroundTextStyle : 下拉背景字体、loading图像的样式仅支持dark/light
enablePullDownRefresh :是否打开下拉刷新
{"window":{"navigationBarBackgroundColor":"#ffffff","navigationBarTextStyle":"black","navigationBarTitleText":"微信接口功能演示","backgroundColor":"#eeeeee","backgroundTextStyle":"light"}}
tabBar
配置制定tab栏的表现,以及tab切换时显示的对应页面
Tip:通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirectTo)所到达的页面,即使他是定义在tabBar配置中的页面,也不会显示底部的tab栏
color :tab上的文字默认颜色
selectedColor :tab上的文字选中之后的颜色
backgroundColor :tab的背景颜色
borderStyle :tab上边框的颜色,仅支持black/white
list :tab的列表,最少两个,最多5个
position :tab的位置,可选值bottom、top
list的包含属性
pagePath :页面路径,必须在pages中先定义
text :tab上面按钮文字
iconPath :图片路径,不能超过40kb
selectedIconPath :选中图片路径
networkTimeout
设置各种网络请求的超时时间
request :wx.request的超时时间,单位毫秒,默认为:60000
connectSocket :wx.connectSocket的超时时间,单位毫秒,默认为:60000
uploadFile :wx.uploadFile的超时时间,单位毫秒,默认为:60000
downloadFile :wx.downloadFile的超时时间,单位毫秒,默认为:60000
debug
可以在开发者工具中开启debug模式,在开发者工具的控制台面板,调试信息以info的形式给出,其信息有page的注册,页面路由,数据更新,事件触发
page.json
每一个小程序也可以使用.json文件来对本页面的窗口表现进行配置,页面的配置比app.json全局配置简单的多,只是设置app.json中的window配置项的内容,页面中配置项会覆盖app.json中的window中相同的配置项
页面的.json只能设置window相关的配置项,所以无需写window这个键如:{"navigationBarBackgroundColor":"#ffffff","navigationBarTextStyle":"black","navigationBarTitleText":"微信接口功能演示","backgroundColor":"#eeeeee","backgroundTextStyle":"light"}
navigationBarBackgroundColor :导航栏颜色
navigationBarTextStyle :导航栏标题颜色
navigationBarTitleText :导航栏文字
backgroundColor :窗口的背景颜色
backgroundTextStyle :下拉背景字体,loading图的样式仅支持dark、light
enablePullDownRefresh :是否开启下拉刷新
disableScroll :设置为true 则页面整体不能上下滚动,只能在page.json中有效,在app.json中无效
逻辑层(App Service)
小程序开发框架的逻辑层是由JavaScript编写。
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
在 JavaScript 的基础上,我们做了一些修改,以方便地开发小程序。
1、增加App和Page方法,进行程序和页面的注册。
2、增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
3、提供丰富的API,如微信用户数据,扫一扫,支付等微信特有能力。
4、每个页面有独立的作用域,并提供模块化能力。
5、由于框架并非运行在浏览器中,所以 JavaScript 在 web 中一些能力都无法使用,如 document,window 等。
6、开发者写的所有代码最终将会打包成一份 JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似 ServiceWorker,所以逻辑层也称之为 App Service。