微信小程序--几个常用标签

view 这个标签相当于div(它的特点就是在没有其他样式影响的情况下，宽度100%)；
text 这个标签相当于span(它的特点就是在没有其他样式影响的情况下，不会独占一行，宽和高由内容撑开，这个时候你设置宽高是没有用的)；
image 这个标签比较重要，图片组件。src里面可以放网络地址和本地图片地址。
button 这个是按钮组件。
input 这个是输入框组件。
navigator 这个是导航组件。

view组件

view官方文档叫它组件，但是我喜欢叫它标签。

他的特点是在没有像弹性盒模型，浮动这样布局影响下，它很很霸道的在页面中独占一行。

官方文档说它有下面这几个属性，看你们喜欢着用吧（我表示没有到一个）

hover-class ：指定按下去的样式（那这里就是填class名称呗）
hover-stop-propagation ：是否阻止本节点的祖先节点出现点击态
hover-start-time ：点击多久出现点击态（单位为毫秒）
hover-stay-time ：取消点击以后点击态保存时间（单位为毫秒）

其实这个标签没什么好讲的，主要就是这几个属性稍微有点冷门了。没细心看文档表示不知道有这几个属性。

在我们的开发中，经常会要求我们加各种交互效果，一般的就是那种点击颜色要有点变化，让用户操作起来不那么生硬，感觉柔滑一点。这虽然是产品应该考虑的，但是想要成为一名优秀的前端程序员，我们也应该在开发的过程中，考虑当用户操作，这样你做出来的产品才会更有感情（其实就是不想写完以后，被产品经理各种改）

来看个小demo,我们来初步了解这个属性(下面是html和css)

<view>
  <!-- 阻断与非阻断点击态对比 -->
  <view hover-class='bg_ccc' class='red p_40' data-id="red" bindtap='bindView'>
    <view hover-class='bg_ccc' class='green p_40' data-id="green" bindtap='bindView'>
      未阻断点击态
      <view hover-class='bg_ccc' hover-stop-propagation="{
   
   {true}}" class='yellow p_40' data-id="yellow" bindtap='bindView'>阻断点击态</view>
    </view>
  </view>
  <!-- 试着设置下按住多久才显示点击效果 默认为 50 -->
  <view class='red mt40 p_40' hover-class='bg_ccc' hover-start-time='1000'>
    按住1000毫秒才触发点击态
  </view>
  <!-- 试着设置松开延迟多久消失 默认为 400 -->
  <view class='red mt40 p_40' hover-class='bg_ccc' hover-stay-time='1000'>
    松开后1000毫秒点击态消失
  </view>
</view>

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.yellow {
  background-color: yellow;
}
.bg_ccc {
  background-color: #ccc;
}
.p_40 {
  padding: 40rpx;
}
.mt40 {
  margin-top: 40rpx;
}

text组件

这个组件比较随和，不独占一行；但是也和固执，就是你设置宽高就是不理你，按自己的来。这个时候你如果想要强行改变它，那你可以用display改变他为块元素或者行内块元素以后，就可以修改它的宽高了。

官方文档里面说它有下面几个属性：

selectable ：设置文本是否可选
space ：显示连续空格（ensp – 中文空格一半大小 emsp – 中文空格大小 nbsp – 根据字体）
decode ：是否解码（可以解析： < > & ' ）

<view class='mt40 p_40'>
  <!-- 文本可选和不可选 -->
  <text class='mr_40'>文本不可选</text>
  <text class='' selectable='{
   
   {true}}'>文本可选(长按可以选择)</text>
</view>
<view class='mt40'>
  <!-- 文本显示连续空格 -->
  <view>
    <text class='mr_40 fz_25' space="ensp">啦啦 啦啦 中文空格一半的大小</text>
  </view>
  <view>
    <text class='mr_40 fz_25' space="emsp">啦啦 啦啦 中文空格大小</text>
  </view>
  <view>
    <text class='mr_40 fz_25' space="nbsp">啦啦 啦啦 跟随字体</text>
  </view>
</view>
<view class='mt40'>
  <!-- 解码 -->
  <view>
    <text>啦啦 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp; 啦啦</text>
  </view>
  <view>
    <text decode="{
   
   {true}}">啦啦 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp; 啦啦</text>
  </view>
</view>

.mr_40 {
  margin-right: 40rpx;
}
.fz_25 {
  font-size: 50rpx;
}

image标签

这个标签是图片标签，我们在页面放图片的用到的标签，可以是远程图片，本地图片。

言归正传，我们看看官方给我的几个属性：

src : 这个属性就没什么可说的了，放图片地址
mode : 这个属性微信给得很可以，可以设置图片裁剪，缩放的模式；
lazy-load : 是否懒加载（只能是page和scroll-view下的image才有效）；
binderror : 发生错误事件。
bindload : 图片载入完毕事件（可以返回图片的宽高）

<view>
  <!-- 图片默认是 320px * 240px -->
  <image class='b_333' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image>
   <!-- mode = aspectFit  保持图片的比例，使长边能显示出来 -->
  <image class='b_333' mode='aspectFit' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image>
   <!-- mode = aspectFill  保持图片的比例，使短边能显示出来，多余的截取 -->
  <image class='b_333' mode='aspectFill' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image>
   <!-- mode = widthFix  保持图片的比例，保持宽度，高度自适应 -->
  <image class='b_333' mode='widthFix' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image>


  <!-- 图片懒加载 -->
  <image class='b_333' lazy-load='{
   
   {true}}' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image>

  <!-- binderror事件 -->
  <image class='b_333' binderror='imageErr' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jp'></image>

  <!-- bindload事件是图片加载完成，需要开启图片懒加载 -->
  <image class='b_333' lazy-load='{
   
   {true}}' bindload='imageLoad' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image>
</view>

/* 图片标签样式 */
.b_333 {
  margin-top: 20rpx;
  border: 1rpx solid #333;
}

  imageErr: function(e) { //  图片加载错误
    console.log("图片加载错误")
    console.log(e);
  },
  imageLoad: function(e) { //  图片加载完成
    console.log("图片加载完成")
    console.log(e);
  }

button组件

小程序的button按钮也包含像view那几个点击态属性，但是微信默认有给button按钮默认的点击态，如果觉得不合适我们的项目场景，那么可以像view一样更改

button按钮属性有点多，就直接在代码里面注释了，我们要热爱看代码，那就看看代码吧。

<!-- button按钮 -->
<view>
  <!-- size属性两个值 default，mini。 默认：default   -->
  <button size='default'>size =default </button>
  <button size='mini'>size =mini </button>

  <!-- type属性设置样式类型。 primary- 绿色； default- 白色； warn- 红色 -->
  <button type='primary'>绿色</button>
  <button type='default'>白色</button>
  <button type='warn'>红色</button>

  <!-- plain属性设置是否透明 -->
  <button plain='{
   
   {false}}' type='warn'>不透明</button>
  <button plain='{
   
   {true}}' type='warn'>透明(没有背景色)</button>

  <!-- disabled属性设置是否禁用 -->
  <button disabled='{
   
   {false}}' bindtap='showBtn'>不禁用(有弹框)</button>
  <button disabled='{
   
   {true}}' bindtap='showBtn'>禁用(没有弹框)</button>

  <!-- loading名称前是否带图标 -->
  <button loading='{
   
   {false}}'>名称前不带loading图标</button>
  <button loading='{
   
   {true}}'>名称前带loading图标</button>

  <!-- form-type只用这个按钮放在from里面才能触发 ，分别触发 submit/reset事件 -->
  <form bindreset="resetPut">
    <input value='啦啦啦'></input>
    <button form-type='reset'>重置表单</button>
  </form>
  <form bindsubmit="submitPut">
    <input value='啦啦啦'></input>
    <button form-type='submit'>提交表单</button>
  </form>

  <!-- open-type开发功能 -->
  <button open-type='contact'>打开客服</button>
  <!-- 分享要在页面设置 onShareAppMessage方法 
        session-from : 会话源
        send-message-title ： 会话显示的标题
        send-message-path :  会话内消息卡片点击跳转小程序路径
        send-message-img ：  会话内消息卡片图片
        show-message-card ： 是否显示会话卡片
        bindcontact :  从客服回话点击卡片返回小程序的回调
  -->
  <button open-type='share' session-from="1" send-message-title="测试分享" send-message-path="pages/index/index" send-message-img="http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg" show-message-card="{
   
   {true}}" bindcontact="openContart">触发分享</button>
  <!-- 得到用户信息，里面 bindgetuserinfo事件回调得到用户信息 lang 设置中英文 zh_CN 简体中文  zh_TW 繁体中文  en 英文 -->
  <button open-type='getUserInfo' bindgetuserinfo='getUserInfo' lang='zh_CN'>得到用户信息</button>
  <!-- 获取用户手机号，这里需要小程序开放功能认证（300百块钱认证）才有这功能（这个比较私密的信息还是小心点用，小心小程序被封） -->
  <button open-type='getPhoneNumber' bindgetphonenumber="getPhone">获取用户手机号</button>
  <!-- 打开app功能貌似有很多限制，需要从app打开小程序或者app分享卡片进入的小程序才能进入这个app(其实也相当于返回那个app,这个我没测试通过，我这里不具备这样的场景) 
  app-parameter ： 想app传递的参数
  binderror： 发生错误
  -->
  <button open-type='launchApp' app-parameter="啦啦啦" binderror="openAppErr">打开app</button>
  <!-- 打开授权写，可以让用户授权 
    bindopensetting :  打开授权页回调
  -->
  <button open-type='openSetting' bindopensetting="openSeetting">打开授权页</button>
  <!-- 打开意见反馈，用户反馈内容可以才公众平台查看 -->
  <button open-type='feedback'>打开意见反馈</button>
</view>

/* button按钮 */
button {
  margin-top: 40rpx;
}

  showBtn: function() { //  判断是否禁用
    wx.showToast({
      title: '这个按钮弹框表示未禁用',
      icon: "none"
    })
  },
  resetPut: function(e) { //  重置表单
    console.log("重置表单")
  },
  submitPut: function(e) { //  表单完成
    console.log("点击表单完成");
  },
  getUserInfo:function(e) { //  得到用户信息
    console.log("点击了获取用户信息");
    console.log(e);
  },
  openContart: function(e) { //  客服消息点击卡片
    console.log("点击打开客服");
    console.log(e);
  },
  getPhone: function(e) { //  获取手机号回调
    console.log("获取手机号");
    console.log(e);
  },
  openAppErr: function(e) { //  打开app错误
    console.log("打开app错误");
    console.log(e);
  },
  openSeetting: function(e) { //  打开授权页回调
    console.log("打开授权页回调");
    console.log(e);
  }

input组件

输入框这个组件的属性比较多，我们也就直接在示例中注释解释

<!-- input组件 -->
<view>
    <!-- value属性 -->
    <input value='啦啦啦啦'></input>
    <!-- type属性，设置输入方式 
      text : 文本键盘输入
      number : 数字键盘输入
      idcard ： 身份证输入（数字键盘，多了个X输入）
      digit ： 带小数点键盘输入
    -->
    <input type='text' value='文本键盘'></input>
    <input type='number' value='数字键盘'></input>
    <input type='idcard' value='身份证键盘'></input>
    <input type='digit' value='带小数点键盘'></input>
    <!-- password属性，是否是密码输入-->
    <input password="{
   
   {true}}" value="密码输入"></input>
    <!-- placeholder属性，默认显示文本 -->
    <input placeholder="这是默认显示的文本"></input>
    <input placeholder="这是默认显示的文本" value='有值得时候，不显示默认文本'></input>

    <!-- placeholder-style属性设置默认显示文本的样式
          这个属性可能我们会经常用到，在输入框默认情况下
          显示的样式和真正输入了以后是不一样的
     -->
     <input placeholder='这是默认显示文本' placeholder-style='color:red'></input>
     <!-- placeholder-class也是设置默认显示文本的样式，只是使用class设置
      默认值为 input-placeholder，就是说你只要在css里面加上这个样式，设置与不设置都一样
      但是你也可以改变这个默认值
      -->
     <input placeholder='这里是默认显示文本' placeholder-class='input-placeholder'></input>
     <input placeholder='这里是默认显示文本'></input>
     <input placeholder='这里是默认显示文本' placeholder-class='greenput'></input>
     <!-- disabled设置input框是否禁用，这里就是在默写时候，你要输入了上一个框，这个框才能输入的时候使用
    只需要动态改变true/false，就可以实现效果
     -->
     <input value="输入框禁用" disabled='{
   
   {true}}'></input>
     <input value="输入框没有禁用" disabled='{
   
   {false}}'></input>
     <!-- 设置输入框的输入的字符数量最大值 设置为-1就是不显示长度-->
     <input value='默认输入的最大值为140'></input>
     <input value='默认输入的最大值为10' maxlength='15'></input>
     <input value='设置为-1就是不限制输入长度' maxlength='-1'></input>
     <!-- cursor-spacing指定光标与键盘的距离单位px -->
     <input value='默认是为0' cursor-spacing='0'></input>
     <input value='指定光标与键盘距离为10' cursor-spacing='10'></input>
     <input value='指定光标与键盘距离为50' cursor-spacing='50'></input>
     <!-- focus是否获取焦点
          当有些场合，用户进入页面，自动聚焦到input框。可以通过这个属性
      -->
      <input value='自动聚焦' focus='{
   
   {true}}' selection-start="1" selection-end="3"></input>
      <!-- confirm-type设置键盘右下角显示的文字，仅仅当type=text是有效
      done : 完成(默认值) 
      send : 发送 
      search : 搜索 
      next : 下一个 
      go : 前往 
      -->
      <input type='text' confirm-type='done' value='设置右下角文字为“完成”'></input>
      <input type='text' confirm-type='send' value='设置右下角文字为“发送”'></input>
      <input type='text' confirm-type='search' value='设置右下角文字为“搜索”'></input>
      <input type='text' confirm-type='next' value='设置右下角文字为“下一个”'></input>
      <input type='text' confirm-type='go' value='设置右下角文字为“前往”'></input>
      <!-- confirm-hold点击右下角按钮是，是否保持键盘不收起 -->
      <input confirm-hold='{
   
   {true}}' value='点击右下角按钮不收起键盘'></input>
      <input confirm-hold='{
   
   {false}}' value='点击右下角按钮收起键盘'></input>
      <!-- cursor属性指定光标位置 
      0表示开头， -1表示末尾，这个一般与自动聚焦一起使用
      点击的话会改变这个结果（这个测试的时候只能一个个来使用，把前面的自动聚焦注释掉）
      -->
      <input cursor='0' focus='{
   
   {true}}' value='光标位置为0'></input>
      <input cursor='5' focus='{
   
   {true}}' value='光标位置为5'></input>
      <input cursor='-1' focus='{
   
   {true}}' value='光标位置为-1'></input>
      <!-- selection-start和selection-end属性配合使用，即自动聚焦是选中范围内文本 
      （这个测试的时候只能一个个来使用，把前面的自动聚焦注释掉）
      -->
      <input value='自动聚焦' focus='{
   
   {true}}' selection-start="1" selection-end="3"></input>
      <!-- adjust-position属性设置键盘弹起页面是否上推 -->
      <input value='聚焦页面不上推'></input>
      <input value='聚焦页面上推' adjust-position="{
   
   {true}}"></input>
      <!-- bindinput事件，输入框输入时触发 -->
      <input bindinput='changeInput' value='输入框输入事件'></input>
      <!-- bindfocus事件，输入框聚焦事件 -->
      <input bindfocus='getFocus' value='输入宽聚焦时触发'></input>
      <!-- bindblur事件，输入框失去焦点时触发 -->
      <input bindblur='loseFocus' value='输入框失去焦点时触发'></input>
      <!-- bindconfirm事件，输入框点击完成时触发 -->
      <input bindconfirm='wancheng' value='输入框点击完成按钮触发'></input>

</view>

/* input框样式 */
.input-placeholder {
  color: blue;
}
.greenput {
  color: green;
}

 // input框
  changeInput: function (e) { //  输入事件
    console.log(e);
  },
  getFocus: function (e) { //  输入框聚焦事件
    console.log(e);
  },
  loseFocus: function (e) { //  输入框失焦事件
    console.log(e);
  },
  wancheng: function (e) { //  点击完成按钮事件
    console.log(e);
  }

navigator组件

导航组件，可以实现页面切换（路由），跳转到其他小程序等功能。

这个组件在这篇文章里面不会讲解得太详细，只讲路由的跳转，其他功能后面会有详细的讲解；我们还是老规矩，就在代码里面讲吧。

<!-- navigator组件 -->
<view>
  <!-- target属性
      self : 当前小程序跳转（默认值）
      miniProgram : 要跳转其他小程序时设置

      hover-class,hover-stop-propagation,hover-start-time,hover-stay-time这几个属性为点击态属性，
      这个组件有默认的值，可以根据项目需要修改，和前面讲得是一样的。
   -->
   <!-- 
   当target=self时，也就是默认值（不设置的情况） 

    url ： 当前小程序跳转的页面地址(这个路径我建议是写成绝对路径)
    open-type ：  跳转方式有下面的值
        open-type=navigate  : 保留当前页面，跳转到页面内页面（除了tabbar页面，即配置的菜单页面）
        open-type=redirect  : 关闭当前页面，跳转到页面内页面（除了tabbar页面，即配置的菜单页面）
        open-type=switchTab  : 关闭所有非tabar页面，跳转到tabbar页面
        open-type=reLaunch  : 关闭所有页面，跳转到tabbar页面
        open-type=navigateBack  : 页面回退（和delta属性一起使用，设置返回层数）
    提示：这里只是简单介绍一下，tabbar页面配置还没讲过，先了解这个东西吧，我一般都不用这个组件，习惯用小程序api
   -->
  <navigator open-type='navigate' url='/pages/index/index'>跳转</navigator>
  <navigator open-type='redirect' url='/pages/index/index'>跳转</navigator>
  <navigator open-type='switchTab' url='/pages/index/index'>跳转</navigator>
  <navigator open-type='reLaunch' url='/pages/index/index'>跳转</navigator>
  <navigator open-type='navigateBack' delta="1">跳转</navigator>
</view>

微信小程序--几个常用标签

button组件

猜你喜欢