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

小程序的几个常用标签

先来个前言，小程序开发还是适合有一定开发基础的人学习，教程有不详细的地方和有疑问的地方，欢迎留言

人生如戏，戏如人生。要开发小程序，我们得先学习小程序页面的基本标签是那些。其实小程序和普通h5开发一样，只是标签不同而已，今天我们就来了解一下下面几个项目中经常用到的标签

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

view组件

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

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

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

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

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

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

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

  
  
    
      未阻断点击态
      阻断点击态
    
  
  
  
    按住1000毫秒才触发点击态
  
  
  
    松开后1000毫秒点击态消失
  


.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改变他为块元素或者行内块元素以后，就可以修改它的宽高了。

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

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

这个标签的这几个属性我也没有用到过，不过我们还是看看下面的例子，了解一下，万一哪天我们要用呢

  
  文本不可选
  文本可选(长按可以选择)


  
  
    啦啦 啦啦 中文空格一半的大小
  
  
    啦啦 啦啦 中文空格大小
  
  
    啦啦 啦啦 跟随字体
  


  
  
    啦啦   < > & '     啦啦
  
  
    啦啦   < > & '     啦啦
  


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

image标签

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

这里来个小提示：我们再用background-img设置背景图片的时候，不能用本地图；只能放远程图片或者是base64的图片。并且小程序的文件总大小不能超过2M,这里建议稍微大一点的图片最好放远程服务器。

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

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

mode属性里面的值有很多，代码中就挑几个常用来做例子，有兴趣的可以自己去看官方文档，下面就看看我们的例子吧（测试用我们随便在网上找了找图片测试）

  
  
   
  
   
  
   
  


  
  

  
  

  
  


/* 图片标签样式 */
.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按钮属性有点多，就直接在代码里面注释了，我们要热爱看代码，那就看看代码吧。

  
  size =default 
  size =mini 

  
  绿色
  白色
  红色

  
  不透明
  透明(没有背景色)

  
  不禁用(有弹框)
  禁用(没有弹框)

  
  名称前不带loading图标
  名称前带loading图标

  
  

    
    重置表单
  
  

    
    提交表单
  

  
  打开客服
  
  触发分享
  
  得到用户信息
  
  获取用户手机号
  
  打开app
  
  打开授权页
  
  打开意见反馈


/* 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框样式 */
.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组件

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

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

  
   
  跳转
  跳转
  跳转
  跳转
  跳转

小程序还有其他的几个组件，这里就不做过多的介绍了。如果有需要我特别介绍的，可以评论下想要详细介绍的组件，我一定知无不言，言无不尽，尽无不详，详无不实。