上一章节我们构建了小程序的第一个页面。
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 为全局样式
- 编译项目
本文由博客群发一文多发等运营工具平台 OpenWrite 发布