小程序生命周期跟全局样式—小程序入门与实战【六】

上一章节我们构建了小程序的第一个页面,知道了小程序的全局配置。那么现在请跟随我们果酱社区继续学习小程序的生命周期跟全局样式。

6-1 app.js

每个小程序都需要在 app.js 中调用 App 方法注册一个小程序实例。

用白话说就是,你不注册它,你就不能拥有一个小程序。

废话不多说,直接上代码。

//app.js

App({
 onLaunch (options) {
   // 可以写代码
 },
 onShow (options) {
   // 可以写代码
 },
 onHide () {
   // 可以写代码
 }
})
App(Object object)

注册小程序。接收一个 object 参数,来指定小程序的生命周期回调、全局任意函数、全局数据变量等。

「onLaunch()」小程序初始化完成时触发,全局只触发一次。

「onShow()」 小程序启动,或从后台进入前台显示时触发。

「onHide()」小程序从前台进入后台时触发。

6-2 app.wxss

小程序公共样式表

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

跟 CSS 相比,WXSS 扩展了两个特性。

尺寸单位 rpx

rpx : 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx 。

设备rpx换算px (屏幕宽度/750)
iPhone51rpx = 0.42px
iPhone61rpx = 0.5px
iPhone6 Plus1rpx = 0.552px

所以在开发小程序时,我们的设计稿都是用 iPhone6 作为视觉稿的。

简单点说就是:如果设计稿的宽度是 750px,我们可以不用除以 2 。

样式导入

使用 @import 语句可以导入外联样式表,@import 后跟需要导入的外联样式表的相对路径,用;表示语句结束。

/** common.wxss **/
.small-p {
 padding:10rpx; //在iPhone6就是5px
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
 padding:30rpx; //在iPhone6就是15px
}
选择器

目前支持的选择器有:

  • .class  :类选择器
  • #id     :id选择器
  • element  :选择所有组件
  • element, element :例如 element, element 选择所有文档的 view 组件和所有的 checkbox 组件
  • ::after 伪元素选择器
  • ::before 伪元素选择器
6-3 编译项目

至此,我们的项目就可以跑起来了,运行代码:

//安装项目模块
npm install

//运行项目
npm run dev

生成了一个 dist 文件

然后使用微信开发者工具打开这个 dist/src

image

总结
  • app.js 中的 App() 很重要,注册一个小程序实例。
  • app.wxss 为全局样式
  • 编译项目