前言

最近刚忙完了一场考试，现在闲下来了，准备在后面的一段时间里学习一下微信小程序开发，此文章主要用于记录笔记方便以后查阅。

基础组件

文本

<text>测试</text>

可选文本

<text user-select>Mikasoi</text>

显示文本中的连续空格

<text space="ensp">Mikasoi         Mikasoi</text>

视图容器

<view hover-class="boxHover" hover-stay-time="50">Mikasoi</view>

图片

<image src="../../images/Logo.png" mode="widthFix"></image>

开启长按图片显示识别小程序菜单

<image src="/images/Logo.png" mode="widthFix" show-menu-by-longpress></image>

图片引入网络地址

<image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1822404809,1425279287&fm=26&gp=0.jpg"></image>

超链接

<navigator url="/pages/logs/logs">跳转到日志</navigator>

可滚动视图区域

<scroll-view scroll-x  scroll-left="150">
  <view class="scrollTest">
    <view class="box">111</view>
    <view class="box">222</view>
    <view class="box">333</view>
    <view class="box">444</view>
    <view class="box">555</view>
    <view class="box">666</view>
  </view>
</scroll-view>

.scrollTest{
  display: flex;
  flex-wrap: nowrap;
}

.box{
  width: 100px;
  height: 100px;
  background: gold;
  margin-right: 2px;
  flex: 0 0 100px;
}

滑块视图容器

<swiper class="banner" 
indicator-dots 
indicator-color="rgba(255,255,255,0.5)" 
indicator-active-color="#fff" 
autoplay 
interval="3000" 
circular 
previous-margin="20" 
next-margin="20">
  <swiper-item class="bannnerItem">
    <image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=269674562,1464976461&fm=26&gp=0.jpg" mode="widthFix"></image>
  </swiper-item>
  <swiper-item class="bannnerItem">
    <image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3168498490,2226475811&fm=26&gp=0.jpg" mode="widthFix"></image>
  </swiper-item>
  <swiper-item class="bannnerItem">
    <image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1614818813,2644195269&fm=26&gp=0.jpg" mode="widthFix"></image>
  </swiper-item>
</swiper>

.banner{height: 300rpx; border: 1px solid green;}
.banner image{width:100%; height: 300rpx;}
.bannnerItem{padding: 0 5px; box-sizing: border-box;}

按钮

<view>
  <button class="btn" type="primary">登录</button>
  <button class="btn" type="warn">退出</button>
  <button class="btn" size="mini" plain>用户注册</button>
  <button class="btn" disabled>举报</button>
  <button class="btn" type="primary" loading>加载中...</button>
  <button class="btn" type="primary" open-type="contact">联系客服</button>
</view>

button{margin: 10rpx 0;}

表单

<form bindsubmit="onSubmit">
  <button form-type="submit">提交</button>
</form>

输入框

<input class="ipt" placeholder="请输入用户名" placeholder-style="color:green" focus></input>
<input class="ipt" placeholder="请输入密码" placeholder-class="iptPlace"></input>

.ipt{border: 1px solid #ddd; height: 70rpx;}
.iptPlace{color:#aaa; font-size: 40rpx;}

开关选择器

<switch checked></switch>

图标

<view style="padding:50px; text-align:center">
  <icon type="success" size="100"></icon>
  <view>支付成功</view>
</view>

进度条

<view style="padding:50px">
<progress percent="75" show-info font-size="15" border-radius="10"></progress>
<progress percent="85" show-info border-radius="10" activeColor="orange" active></progress>
</view>