开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第4天,点击查看活动详情
注册页面
对于小程序中的每个页面,都需要在页面对应的js文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。
使用Page构造器注册页面
注册小程序中的一个页面,接收一个object类型参数。
参数:
代码示例:
- data:是页面第一次渲染使用的初始数据。页面加载时,data将会以JSON字符串的形式由逻辑层传值渲染层,因此data中的数据必须是可以转成JSON的类型:字符串、数字、鼻儿直、对象、数组。
渲染层可以通过WXML进行对数据的绑定
data中的数据只能由setData进行修改。setData函数用于将数据从逻辑层发送到视图层,同时改变对应的this.data的值。第一个参数是可以修改数据的具体内容,第二个参数是callback,回调会在视图渲染完成后调用。修改data中的数据这一步是同步的,告知视图进行更新这一步是异步的。
页面路由
在小程序中所有页面的路由全部由框架进行管理
路由方式,以及触发的页面生命周期函数如下
- 使用API
- 打开新页面 调用API:wx.navigateTo
- 页面重定向(没有历史记录)调用API:wx.redirectTo
- 页面返回 调用API:wx.navigateBack
- Tab切换:调用API:wx.switchTab
- 重启动:调用API:wx.reLaunch
- 使用组件
- 打开新页面(保留当前页面,跳转到应用的某一个页面,不能跳到tabbar页面)
- 页面重定向(关闭当前页面,跳转到应用那个的某一个页面,不能跳到tabbar页面)
- 页面返回(返回上级页面或多级页面)
- Tab切换(跳转到Tabbar页面,关闭所有非tabbar页面)
- 重启动(关闭所有页面,跳转到应用的任何一个页面)
模块化
可以将一些公共的代码抽离称为一个单独的js文件,作为一个模块。模块只能通过module.exports或者exports才能对外暴露接口。
在模块化的文件中引用模块化的文件,用require函数
引用的时候,要注意以下几点:
- 只能引用.wxs文件模块,且必须使用相对路径
- wxs模块均为单例。wxs模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个wxs模块对象
- 如果一个wxs模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
引用wxs文件
- 外链式:写好的wxs文件,用module.exports暴露出来,在wxml文件内通过wxs的标签引入。src属性写相对路径,module属性写自定义模块的名字,不能重复
- 内嵌式:直接在wxml文件内用wxs标签包裹内容,并写上module属性设置名称,然后用module.exports进行暴露,在需要的地方通过模板名称进行引用即可。