Fork me on GitHub

微信小程序上手

发表于 | 分类于
字数统计: 1,085 | 阅读时长 ≈ 4
小程序学习笔记

开始

文件类型与目录结构

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。

紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

1
2
3
4
5
6
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

这个配置说明在项目定义了两个页面，分别位于 pages/index/index 和 pages/logs/logs 目录。而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。

于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

1
2
3
4
5
App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

整个小程序只有一个 App 实例，是全部页面共享的。

项目目录下面的以app开头的js、json、wxss文件是描述应用程序整个的状态，在全局里面是唯一的（因为只有一个应用程序）。

1
2
3
4
5
6
// app.json
{
  "pages": [
    "pages/welcome/welcom"
  ]
}

app.json中page的注册，只写了文件名，没有写后缀，这样并不是注册某一个wxml或者某一个js文件，而是注册名为welcome的所有文件，自动地把welcome相关的4种类型的文件关联再一起。

注册小程序页面以及组件的用法

  • Swiper组件：做轮播

Flex弹性盒子模型

flex

在flex容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)。

在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。

注意：不能先入为主认为宽度就是 main size，高度就是 cross size，这个还要取决于你主轴的方向，如果你垂直方向是主轴，那么项目的高度就是 main size。

  1. flex-direction：决定主轴的方向（即项目排列方向）

css .container { flex-direction: row | row-reverse | column | column-reverse; }

  • 默认值：row，主轴为水平方向，起点在左端。

row

  • row-reverse ：株洲为水平方向，起点在右端。

row-reverse

  • column：主轴为垂直方向，起点在上沿。

column

  • column-reverse：主轴为垂直方向，起点在下沿。

column-reverse

  1. flex-wrap：决定容器内项目是否可换行。

默认情况下，项目都排在主轴线上，使用flex-wrap可实现项目的换行。

1
2
3
.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}
  • 默认值：nowrap不换行，即当主轴尺寸固定，当空间不足时，项目尺寸会随之调整而不会挤到下一行。

nowrap

  • wrap：项目主轴尺寸超出容器时换行，第一行在上方。

wrap

  • wrap-reverse：换行，第一行在下方。

wrap-reverse

  1. justify-content：定义了项目在主轴的对齐方式。
1
2
3
.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}
  • 默认值：flex-start左对齐。

flex-start

  • flex-end：右对齐。

flex-end

  • center：居中。

center

  • space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。

space-between

  • space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。

space-around

  1. align-items：定义了项目再交叉轴上的对齐方式
1
2
3
.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

主轴为水平方向，即flex-direction: row

  • 默认值为stretch：如果项目未设置高度或者设置为auto，将占满整个容器的高度。

stretch

假设容器高度为100px，而项目都没有设置高度的情况下，则项目的高度也为100px。

  • first-start：交叉轴的起点对齐

first-start

假设容器高度设置为 100px，而项目分别为 20px, 40px, 60px, 80px, 100px, 则如上图显示。

  • flex-end：交叉轴的终点对齐

flex-end

  • center：交叉轴的中点对齐

center

  • baseline：项目的第一行文字的基线对齐

baseline

移动端分辨率及小程序自适应单位RPX

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

参考资料：微信小程序开发文档

undefined