微信小程序实战笔记（2）

观前提示：笔者是第一次正式接触前后端以及小程序开发的初学者，这篇文章是笔者learn by doing和费曼学习法的产物，可能会有很多谬误和不成熟的解释，希望各位读者能够理性讨论，如果有错误欢迎指出。

---

关于几种常见常用的单位

px

像素，是一种固定的单位。在小程序开发中rpx基本就代替了px，但在一些特殊的场合，px的表现要比rpx好。

rpx

响应式像素，是微信小程序中特有的尺寸单位，它可以根据屏幕宽度进行自适应。例如：在 iPhone 6 上，屏幕宽度为375px，共有750物理像素，此时 750rpx = 375px = 屏幕宽度，即 1rpx = 0.5px。

在小程序开发中很常用，可以保持布局相对不变。

%

顾名思义，百分比

vw，vh

视口宽度/高度，每一个单位是视口宽度或高度的1%

em和rem

都是相对字体大小单位，常用于段首的缩进，区别在于前者是相对于其父元素的font-size，后者是相对于根元素（html）的font-size。

---

 

关于wxml

其实由于笔者是初学者，用到的不多，所以还是写点保姆级的基本语法吧。

基本元素

• <view>：用于布局的容器。
• <text>：用于显示文本。
• <image>：用于显示图片。
• <button>：按钮元素。

 数据绑定

上面的元素总要有点内容，因此就有了数据绑定

<view> {{ message }} </view>

可以将需要呈现的东西写在message里，如data里的一些变量或是直接写入常量。

属性

目前笔者只用过一些常用的属性，简单介绍一下其用法。

class

用于指定元素的类名，通过类名，开发者可以为元素添加在wxss中定义的样式。

<view class="container header">内容</view>

bind

用于绑定事件处理函数。

<button bindtap="handleTap">点击我</button>

src

用于导入外部的网址

<image src = "https://mypicture.png" class = "image-style"></image>