[移动开发]微信小程序培训笔记1

视频：p1-p7

2020最新微信小程序开发零基础入门+项目案例【新视觉实训】_哔哩哔哩_bilibili

wxml

<!-- 
  view 块标签
  hover-class  指定按下去的样式类。
  hover-start-time  按住后多久出现点击态，单位毫秒
  hover-stay-time  手指松开后点击态保留时间，单位毫秒
  hover-stop-propagation  指定是否阻止本节点的祖先节点出现点击态
-->
<view class="box"
hover-class="boxHover"
hover-start-time="50"
hover-stay-time="50">微信小程序培训1
<view class="item" hover-class="itemHover" hover-stop-propagation>111111111</view>
</view>

<!--
  text行标签
    selectable  文本是否可选(是否可以复制)
    user-select
    space  显示连续空格
      ensp  中文字符空格一半大小
      emsp	中文字符空格大小
      nbsp	根据字体设置的空格大小
    decode  是否解码
-->
<view class="out">
  <text>这是一行</text>
  <text>二者在<text decode>&nbsp;</text>一行</text>
</view>
<text selectable space="ensp">这是一大段文字这是一大段文字这是       大段文字这是一大段文字这是一大段文字这大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字</text>

<!-- 
  ../返回上一层目录
  ./同级目录
  /进入下个目录
  最前方加/ 根目录
  image  图片 可以引入网络地址
    mode  图片裁剪、缩放的模式
      aspectFit	 完全显示，保持纵横比
      aspectFill  保持纵横比，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
      widthFix  宽度不变，高度自动变化，保持原图宽高比不变
      heightFix  高度不变，宽度自动变化，保持原图宽高比不变
    show-menu-by-longpress  长按图片显示菜单。
-->
 <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  可滚动视图区域
    scroll-x  允许横向滚动
    scroll-y  允许纵向滚动
    初始滑动位置
      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 超链接 块级元素 只能跳转小程序内的页面，不能外网
    open-type 跳转方式
      redirect  摧毁上一个页面，只能返回主页 ，不能在新窗口中使用菜单
      reLaunch  同上，但可以使用菜单,可以带参数
-->
<view>
  <navigator class="link" url="/pages/logs/logs">跳转到日志</navigator>
  <navigator class="link" open-type="redirect" url="/pages/logs/logs">跳转到日志</navigator>
  <navigator class="link" open-type="reLaunch" url="/pages/logs/logs">跳转到日志</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属性 */
.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;
}