小程序开发基础-2

144 阅读5分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 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属性。