Wechat applet training notes 1

video ：p1-p7

2020 Introduction to zero foundation of the latest wechat applet development + Project case 【 New visual training 】_ Bili, Bili _bilibili

wxml

<!-- 
  view  Block labels 
  hover-class   Specify the style class to follow .
  hover-start-time   How long does the click state appear after pressing , Unit millisecond 
  hover-stay-time   Click state retention time after finger release , Unit millisecond 
  hover-stop-propagation   Specifies whether to prevent the click state of the ancestor node of this node 
-->
<view class="box"
hover-class="boxHover"
hover-start-time="50"
hover-stay-time="50"> Wechat small program training 1
<view class="item" hover-class="itemHover" hover-stop-propagation>111111111</view>
</view>

<!--
  text Row labels 
    selectable   Is text optional ( Can I copy )
    user-select
    space   Show continuous spaces 
      ensp   Chinese character space half size 
      emsp	 Chinese character space size 
      nbsp	 According to the space size set by the font 
    decode   Whether the decoding 
-->
<view class="out">
  <text> This is a line. </text>
  <text> They are <text decode>&nbsp;</text> a line </text>
</view>
<text selectable space="ensp"> This is a large text, this is a large text, this is         Big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text this is a big text Text this is a large text, this is a large text, this is a large text, this is a large text, this is a large text, this is a large text, this is a large text, this is a large text, this is a large text, this is a large text, this is a large text, this is a large text </text>

<!-- 
  ../ Go back to the previous Directory 
  ./ At the same directory 
  / Enter the next directory 
   Frontmost plus /  root directory 
  image   picture   Network address can be introduced 
    mode   Image clipping 、 Zoom mode 
      aspectFit	  Completely show , Keep the aspect ratio 
      aspectFill   Keep the aspect ratio , Pictures are usually complete only horizontally or vertically , Intercept will occur in the other direction 
      widthFix   The width does not change , Automatic height change , Keep the aspect ratio of the original image unchanged 
      heightFix   The height remains the same , The width changes automatically , Keep the aspect ratio of the original image unchanged 
    show-menu-by-longpress   Long press the picture to display the menu .
-->
 <image class="img1" show-menu-by-longpress src="/images/2-1206131I104.jpg"></image>
 <image class="img2" src="../../images/ba468fcb-8bb2-45d3-9db4-fb401e3b023f_s.jpg"/>
 <image mode="widthFix" src="/images/cb1d1e9b-3b8e-403b-b46d-e39af3e56f24.jpg"></image>
 <image mode="widthFix" src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AATLy5I.img?h=630&w=874&m=6&q=60&o=f&l=f&x=775&y=267" ></image>

<!--
  scroll-view   Scrollable view area 
    scroll-x   Allow horizontal scrolling 
    scroll-y   Allow vertical scrolling 
     Initial sliding position 
      scroll-top
      scroll-bottom
      scroll-right
      scroll-left
-->
<scroll-view scroll-x>
  <view class="scrOut">
    <view class="scrBox">111</view>
    <view class="scrBox">222</view>
    <view class="scrBox">333</view>
    <view class="scrBox">444</view>
    <view class="scrBox">555</view>
  </view>
</scroll-view >
<scroll-view class="scroll1" scroll-y>
  <view class="scrOut1">
    <view class="scrBox1">111</view>
    <view class="scrBox1">222</view>
    <view class="scrBox1">333</view>
    <view class="scrBox1">444</view>
    <view class="scrBox1">555</view>
  </view>
</scroll-view>

<!--
  navigator  Hyperlinks   Block-level elements   You can only jump to the page in the applet , No internet access 
    open-type  Jump mode 
      redirect   Destroy the previous page , You can only return to the home page  , You cannot use menus in new windows 
      reLaunch   ditto , But you can use menus , With parameters 
-->
<view>
  <navigator class="link" url="/pages/logs/logs"> Jump to log </navigator>
  <navigator class="link" open-type="redirect" url="/pages/logs/logs"> Jump to log </navigator>
  <navigator class="link" open-type="reLaunch" url="/pages/logs/logs"> Jump to log </navigator>
</view>

        wxss

.box{
  width: 200px;
  height: 200px;
  color: black;
  background-color: lightblue;
}
.boxHover{
  background-color: gray;
}
.item{
  width: 100px;
  height: 100px;
  background-color: blueviolet;
}
.itemHover{
  background-color: crimson;
}
.img1{
  width: 200px;
  height: 100px;
}
img2{
  width: 100%;
  height: 100%;
}
.link{
  height: 40px;
}
.scrOut{
  display: flex;
  flex-wrap: nowrap;
}
/* flex attribute  */
.scrBox{
  width: 100px;
  height: 100px;
  background: gold;
  margin-right: 2px;
  flex: 0 0 100px;
}
.scroll1{
  height: 250px;
}
.scrBox1{
  width: 100%;
  height: 100px;
  background: pink;
  margin-bottom: 2px;
}