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

上一章节我们构建了小程序的第一个页面。

3-6 app.js

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

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

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

//app.js

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

App(Object object)

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

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

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

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

3-7 app.wxss

小程序公共样式表

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

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

尺寸单位 rpx

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

设备	rpx换算px (屏幕宽度/750)
iPhone5	1rpx = 0.42px
iPhone6	1rpx = 0.5px
iPhone6 Plus	1rpx = 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 伪元素选择器

3-8 编译项目

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

//安装项目模块
npm install

//运行项目
npm run dev

生成了一个 dist 文件

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

总结

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