基础介绍

首先至少会点html,css基础知识再来学，微信开发者工具打开，创建一个js开发基础模板的项目，它的目录如下：wxml就是html，wxss就是css，app开头的就是页面进来首先加载的配置，project.config.json就是一些配置设置，就是详情的本地设置的代码。

推荐学习方式：根据微信官方的开发文档跟着学跟着做，根据教学视频的教学内容的路线学。

基础内容

先介绍下view组件，就是相当于html的div盒子：

属性	类型	默认值	必填	说明	最低版本
hover-class	string	none	否	指定按下去的样式类。当 `hover-class="none"` 时，没有点击态效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒	1.0.0
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒	1.0.0

再来看text的一些属性：

decode：特殊字符允许使用编码，比如&lt就是<，&gt就是>
user-select：允许用户复制
space(nbsp)：允许自定义空格，就是打多少个空格是多少个

还有一些属性就参考微信的官方文档了。

下面的组件就介绍一些基础重要的属性了

icon图标

属性	类型	默认值	必填	说明	最低版本
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear	1.0.0
size	number/string	23	否	icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。	1.0.0
color	string		否	icon的颜色，同css的color	1.0.0

progress进度条

属性	类型	默认值	必填	说明	最低版本
percent	number		否	百分比0~100	1.0.0
show-info	boolean	false	否	在进度条右侧显示百分比	1.0.0
border-radius	number/string	0	否	圆角大小	2.3.1

相对大小rpx和物理大小px

对于不同的手机机型显示的大小，如果使用的px就是它的实际大小，意思就是无论在哪个手机上先的物理像素大小都是一样的，但是如果使用的是rpx相对大小，则会在不同机型显示相对的大小。比如ipone14宽大小为430，iponeX为375：

使用下面代码验证下：

<view style="width: 50px; height: 50px; background-color: red;" ></view>


<view style="width: 100rpx; height: 100rpx; background-color: black;"></view>

可以看到在iponex的机型下红黑大小一样，ipone14就不一样了。

视图容器

scroll-view滚动容器

介绍个快捷代码，输入.xxx*8回车就会快速创建8个class名为xxx的view容器，.xxx{$}*8回车可创建8个class名为xxx的view容器且每个容器从小往大里面有1到8的数字：

  <view class="row">1</view>
  <view class="row">2</view>
  <view class="row">3</view>
  <view class="row">4</view>
  <view class="row">5</view>
  <view class="row">6</view>
  <view class="row">7</view>
  <view class="row">8</view>

先看代码：横向滚动的：

<scroll-view style="width: 100%; height: 220rpx; background-color: silver; white-space: nowrap;"scroll-x="true">
<view class="row2">1</view>
<view class="row2">2</view>
<view class="row2">3</view>
<view class="row2">4</view>
<view class="row2">5</view>
<view class="row2">6</view>
<view class="row2">7</view>
<view class="row2">8</view> 
</scroll-view>

竖向滚动的

<scroll-view style="width: 100%; height: 220rpx; background-color: silver;" scroll-y="true">
  <view class="row">1</view>
  <view class="row">2</view>
  <view class="row">3</view>
  <view class="row">4</view>
  <view class="row">5</view>
  <view class="row">6</view>
  <view class="row">7</view>
  <view class="row">8</view>
</scroll-view>

css部分：

.row{
  width: 180rpx;
  height: 80rpx;
  background-color: blue;
  margin-bottom: 20rpx;
  /* display: inline-block; */
}
/* 清除最后一个元素的margin-right */
.row2{
  width: 100rpx;
  height: 200rpx;
  background-color: blue;
  margin-right: 20rpx;
  display: inline-block;
}

.row2:last-child{
  margin-right: 0;
}

属性	类型	默认值	必填	说明	最低版本
	scroll-x	boolean	false	否	允许横向滚动	1.0.0
	scroll-y	boolean	false	否	允许纵向滚动	1.0.0

movable-area和movable-view可移动组件

属性	类型	默认值	必填	说明	最低版本
direction	string	none	否	movable-view的移动方向，属性值有all、vertical、horizontal、none	1.2.0
inertia	boolean	false	否	movable-view是否带有惯性	1.2.0
out-of-bounds	boolean	false	否	超过可移动区域后，movable-view是否还可以移动	1.2.0
x	number/string		否	定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画；单位支持px（默认）、rpx；	1.2.0
y	number/string		否	定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画；单位支持px（默认）、rpx；	1.2.0

eg：

<movable-area style="width: 400rpx; height: 400rpx; background-color: skyblue;">
  <movable-view direction="all" style="width: 100px; height: 100px; background-color: springgreen;" inertia="true" x="20rpx" y="20px">
    <view>demo</view>
  </movable-view>
</movable-area>

match-media匹配媒体

属性	类型	必填	说明	最低版本
min-width	number	否	页面最小宽度（ px 为单位）	2.11.1
max-width	number	否	页面最大宽度（ px 为单位）	2.11.1
width	number	否	页面宽度（ px 为单位）	2.11.1
min-height	number	否	页面最小高度（ px 为单位）	2.11.1
max-height	number	否	页面最大高度（ px 为单位）	2.11.1

<match-media min-width="300" max-width="600">
  <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
</match-media>

<match-media min-height="400" orientation="landscape">
  <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
</match-media>