一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第13天,点击查看活动详情。
小程序逻辑层开发
完整小程序项目的基础目录结构如下。
主体文件:
全局文件,必须放在根目录,配置影响整个项目。
包括以下三个文件:
页面文件:
由4个部分组成。
页面文件放在pages目录下,每个页面有一个单独的文件夹。
比如,有个index页面,就会在pages目录下新建index文件夹。文件夹里放4个文件。
index.wxml 作为页面结构描述,负责页面渲染;
index.json 作为页面配置,可以覆盖上述主体文件中app.json 的配置;
index.wxss 是针对 index.wxml 的样式补充;
index.js 用来作为业务逻辑处理。
其中:
js、app.json、wxml、wxss 文件会经过编译,因此上传之后无法直接访问,其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面。
除此之外,只有后缀名在白名单内的文件可以被上传,不在白名单内的文件可以在开发工具内访问,但无法被上传。
app.json配置
app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径(pages)、窗口表现(window)、设置网络超时时间(networkTimeout)、设置多 tab(tabBar)等。
3个核心配置:
pages:页面路由配置项。定义了一个数组,用来存放当前项目中所有可以访问的路径。定义页面时无须写文件的后缀,小程序框架会自动将对应的文件解析为 js、json、wxml、wxss 文件去寻路。
"pages":[
"pages/index/index",
"pages/demo/demo"
]
pages里的顺序仅仅用于定义页面路径,实际执行时是按照字母序(文件排序方式)加载的。
默认的第一个页面会设定为小程序的首页。
tips:
如果要新创建一个页面访问路径,只需要在配置文件中加上这个页面路径的地址,小程序开发工具就会自动生成对应的文件夹及文件夹下对应的 js、json、wxml、wxss 基本文件。
窗口表现配置项
窗口表现配置项的 key 为 window 属性,主要包含窗口展示配置和窗口效果配置两部分
内容基本可选,大部分情况,需要配置navigationBarTitleText,设置小程序默认导航栏标题文字内容。
窗口展示配置包括导航栏背景颜色配置(navigationBarBackgroundColor)
导航栏标题颜色配置(navigationBarTextStyle)
导航栏标题文字内容配置(navigationBarTitleText)
导航栏样式配置(navigationStyle)
是否开启全局的下拉刷新(enablePullDownRefresh)
屏幕旋转方向设置(pageOrientation
底部标签导航配置项
配置tabBar属性。需要填写以下几个属性。
color属性是指 tab 上的文字默认颜色,仅支持十六进制颜色;
selectedColor 属性是指 tab 上的文字选中时的颜色;
backgroundColor 指出了 tab 的背景色;
list 属性是tab 的列表数组,它只能配置最少 2 个、最多 5 个 tab。是个数组,每个项都是一个对象,每个对象包括:
pagePath、text 两个必填项和 iconPath、selectedIconPath 两个选填项。
后面两个配置项是tabBar 支持配置图片 icon。
页面配置文件
每一个小程序页面也可以使用同名json 文件来对本页面的窗口表现进行配置。
页面配置文件只能设置全局配置文件中 window 相关的配置项,也就是可以指定各个页面的窗口表现。页面配置文件中的配置项会覆盖 app.json 的 window 中相同的配置项。
小程序场景值
场景值用来描述用户进入小程序的路径,可以用来了解用户是如何访问小程序。
例如场景 1129(微信爬虫访问)可以用来对爬虫做一些优化,方便索引;场景 1038(从另一个小程序返回)可以用来对小程序免密签约的场景进行判断。
获取场景值:
在 App 的 onLaunch和 onShow 或 wx.getLaunchOptionsSync
生命周期与注册
1.小程序生命周期的注册
在app.js调用App(Object object)。
每个小程序都需要在 app.js 中调用 App()方法注册小程序示例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。
在 app.js 中,这个函数接收一个Object 参数,其中指定了小程序的生命周期回调。
App() 必须在 app.js 中注册。在一个小程序中,App() 方法有且仅有一个。
app.js 除了定义生命周期外,还有一些其他的妙用。
如果需要在小程序中定义一个全局变量,就可以利用 app.js 文件来实现。
微信给开发者提供了 getApp() 函数,在小程序代码的任何地方都可以调用它。
它会返回一个小程序的实例供业务逻辑使用,这样在需要使用小程序对象相关属性时就可以引用它。
注意:
(1) App() 必须在 app.js 中注册,不可以在 App() 函数内或在定义 App() 函数前调用 getApp() 方法;
(2) 通过 getApp() 方法获取实例后,不可以私自调用生命周期函数。
2.页面生命周期的注册
小程序中的每个页面都需要在页面对应的 js 文件中进行注册,以指定页面的初始数据、生命周期回调、事件处理函数等。
可以使用 Page 构造器注册页面,也可以使用Component 构造器构造页面。
可以自定义方法,也可以引用this。
获取当前页面: Page.prototype.route() ;
Page.prototype.route() 获取当前页面栈。
数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。而 Page.prototype.data 就是当前页面的数据内容。
小程序的每个页面都有一个 data 对象来存放当前页面的数据,可以使用 Page.prototype.setData() 来修改,修改数据要通过setData(),不能直接修改data属性。