微信小程序（一）

WebView app.是全局配置，app.json是全局配置文件，在页面的.json配置文件中的配置会覆盖我们全局的配置

快捷键： .box 敲回车 ----- <view class="box"></view>

.row*8 敲回车：

.row{$}*8 敲回车

案例1：

.wxss:

.box{
  color: red;
  border:3px solid rgb(196, 240, 196);
}

.wxml:

    <view class = "box">跟我一起学小程序</view>

案例2：

px和rpx的差异：

px单位是固定大小不会随着屏幕的改变而改变，rpx是响应式布局：

案例3：

.wxml: hover-stop-propagation：子元素阻止父元素冒泡

<view class="box" hover-class="boxhover" hover-start-time="0" hover-stay-time="200">
  王婆卖瓜 
  <view class = "inner" hover-class="innerhover" hover-stop-propagation = "true">
     老王卖鱼
  </view>
</view>
<view>11111</view>
<view>22222</view>
<text user-select>33333</text>
<text>44444</text>
<text user-select >55555</text>
<view>-----------</view>
<text space="ensp" >6 6  6  6   6</text>
<view>-----------</view>
<text space="emsp" >6 6  6  6   6</text>
<view>-----------</view>
<text space="nbsp" >6 6  6  6   6</text>
<view>-----------</view>
<text decode >&lt; 77777</text><view>-----------</view>
<text  >&lt; 77777</text>
<view>
  <icon type ="warn" size="100" color="pink"></icon>
  <icon type ="waiting" size="50"></icon>
</view>
<view>
  <progress percent= "30" show-info border-radius="100" stroke-width="10"></progress>
</view>

.wxss:

.box{
  width:200px;
  height:200px;
  background: red;
}

.boxhover{
  background: palegreen;
}

.box .inner{
  width:80px;
  height:80px;
  background: palevioletred;

}
.inner.innerhover{
  background: seashell;
}

案例4：scroll-view

没有之前：

竖向滚动：

.wxml:

<scroll-view class = "myScroll" scroll-y>
  <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> <!-- scroll-view：可滚动，scroll-y：竖向滚动 -->

.wxss:

.myScroll{
  width: 100%; /*沾满整个屏幕 */
  height:500rpx;
  background: #eeeeee;
}

.myScroll .row{
  width: 220rpx;
  height:220rpx; 
  background: palegreen;
  margin-bottom: 10rpx; /* 每个容器底部间距10rpx */
}

横向滚动：

强制一行然后实现滚动效果：

  /*1、把子容器排成一行，如果只有inline的话，width、height就不起作用了 */

          display: inline-block;

/*2、强制让子元素挤在一行*/

         white-space: nowrap;

wxml:

<scroll-view class = "myScroll" scroll-x>
  <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> <!-- scroll-view：可滚动，scroll-y：竖向滚动 -->

wxss：

.myScroll{
  width: 100%; /*沾满整个屏幕 */
  height:500rpx;
  background: #eeeeee;
   /*2、强制让子元素挤在一行*/
   white-space: nowrap;
}

.myScroll .row{
  width: 220rpx;
  height:220rpx; 
  background: palegreen;
  /*1、把子容器排成一行， 如果只有inline的话，width、height就不起作用了 */
  display: inline-block; 
  margin-right: 10rpx;  
   
}  
   /* 每个元素都有10间隔 最后一个元素不需要有间隔:*/
.myScroll .row:last-child{
  margin-right: 0;
}

案例5：movable-area自由移动

拖动图形验证功能可以使用这个实现

<movable-area>、 <movable-view>必须联合使用， <movable-view>才是可移动区域

movable-area 必须设置width和height属性，不设置默认为10px**
当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；
当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area

<movable-view> 属性	类型	默认值	必填	说明
direction	string	none	否	movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia	boolean	false	否	movable-view是否带有惯性
out-of-bounds	boolean	false	否	超过可移动区域后，movable-view是否还可以移动

<movable-view> 属性

类型

默认值

必填

说明

direction

string

none

否

movable-view的移动方向，

属性值有all、vertical、horizontal、none

inertia

boolean

false

否

movable-view是否带有惯性

out-of-bounds

boolean

false

否

超过可移动区域后，movable-view是否还可以移动

.wxml:

<movable-area style="width: 400rpx;height:400rpx;background:#ccc; overflow: hidden;">
 <!-- out-of-bounds：可以移出、overflow: hidden移出后隐藏移出部分 --> 
  <movable-view direction="all" inertia x="20rpx" y="20rpx" out-of-bounds
    style="width: 150rpx;height: 150rpx;background: green;"
  >
    <view>hello</view>
  </movable-view>
</movable-area>