微信小程序_笔记_02_首页_九宫格

微信小程序3天课程学习的第1天笔记

视频教程里,老师在开始讲微信小程序之前,补充了一些基本的概念和理论知识

为后面正式的学习如何开发微信小程序做准备

视频教程中,老师的建议是:
1. 不填写appid,直接点体验

2. 勾选建立普通快速启动模板

如图所示:

 

由于没有右键菜单,
所以想要审查元素,只能:
1.点击「箭头」
2.点击对应的元素

3.点击「Wxml」

如图所示: 

如果觉得调试栏上的「Wxml」比较常用, 可以将其拖动到工具栏的前面来

老师总结的html与微信小程序之间的对比: 

1. rpx单位

2. 样式导入

3. json严格模式: 用双引,无注释

关于rpx 的一点补充:

rpx是微信小程序新推出的一个单位，

rpx 全称是: responsive pixel 响应式像素

按官方的定义，rpx可以根据屏幕宽度进行自适应，

在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信还捣鼓出新的rpx单位？

在解释这个单位前，我们先简单了解一下目前的主流的自适应布局解决方案：

1. 响应式（Responsive web design)

2. rem

3. 流式布局

4. scale伸缩布局

响应式

响应式布局的问题在于需要维护多个样式文件，维护成本太大，一般的移动H5页面 都不会优先考虑。

rem

rem是近几年比较流行的方案，淘宝移动web端就是采用此方案，

由于 1 rem = 根元素font-size，所以rem布局的本质就是通过rem把页面按比例分割达到自适应的效果，

因为rem是相对根路径font-size尺寸，不同的页面设置不同的font-size尺寸，即可达到自适应的效果。

document.documentElement.style.fontSize = window.innerWidth + 'px';

然后设置<div class="box"></div>的宽高等于1rem，就可以使box的宽高自适应各种设备尺寸。

因为box的单位1em是跟页面设备的宽对应的，所以能做到自适应各种尺寸。

流式布局

流式布局需要用到百分比或者flex，即宽度永远铺满页面宽度，但高度和其他单位仍然用px。

一般都比较推荐用流式布局，因为流式布局不需要像 rem 那样额外通过js动态调整根元素的字体尺寸。

虽然某些大屏幕下，无法100%还原设计稿，但这也是流式布局的精髓，它的字体精度可以保持跟设备系统一致（dpi）。

scale伸缩布局

scale伸缩布局顾名思义，就是通过拉伸缩小页面来达到自适应。

有两种方法，一是通过js更改viewport的initial-scale，这种方法比较麻烦，

另一种是直接写死viewport的宽度，例如：<meta name="viewport" content="width=360, user-scalable=no">，