小程序组件

时间 2019-12-05 标签程序组件

组件是什么?javascript

组件是能够完成某些功能和逻辑的代码集合, 将某些功能和逻辑封装起来, 以提供 直接使用css

组件的特色就是高内聚, 可 复用性html

开发者不须要知道组件内部是怎么实现的, 只须要拿来使用便可, 而且在须要的地方可屡次使用java

微信内置不少组件:web

视图组件 view, scroll_view
基础内容 icon, text
表单 input, textarea
导航 navigator
媒体 video, image, audio
地图 map..
画布 canvas
开发能力 open-data, webview

固然后续本身也能够自定义组件canvas

组件的一般包含: 配置和事件微信

来看看微信内置的switch组件的定义思路ide

switch的通常展现样子(一个具备手动开和关的功能的开关):函数

switch的属性:测试

checked：是否选中—-false、true
type：开关选择器的样式—-switch, checkbox
color：switch 的颜色，同 css 的 color
bindchange：checked属性改变时触发 change 事件

1,2,3项为switch组件的属性, 用来呈现的 ---- 配置项

4 ---- 事件

微信就是经过定义配置项和事件来定义一个组件, 咱们定义组件也是这样作

下面介绍几个简单的基本组件:

icon是一个图标组件, 根据其类型的不一样, 而生成不一样的图标, 不须要从外部引入

与image不一样, image是导入外部的图片, image须要先存在外部图片文件

<view wx:for='{{iconType}}'>
  <icon type='{{item}}' color='blue' size='100'/>
</view>

type可取的值有: 'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'

这个size默认是23px, 在书写时size="100", 不要写成size="100px", 不然没法识别

color不写时, 表示使用各类图标的默认颜色(各类图标有自身的默认颜色)

text组件

表示纯文本, 其它元素在text元素内都是无效的 (好比在text元素内包含一个navigator元素, navigator元素是不起做用的)
其文本支持转义字符, 且默认不换行, 而view组件是默认换行的
text组件里的文字能够被选中(长按鼠标), 须要加上一个selectable属性, view中的文字则不可被选中
加上space属性还能够保留大量空格:

<text selectable='true'>能够选中\n我</text>

<text space='nbsp'>我  有大量                   空格</text>

经测试在view上加这些属性无效

progress进度条组件

<progress percent='50' show-info stroke-width='20' color='red' active/>

percent='50'表示占总进度条的50%

show-info显示进度条的当前值

stroke-width='20'进度条的大小

color进度条颜色

active有动画效果

js中使用定时器来控制progress进度:

把active属性去掉 (不停地改变静态的属性, 看上去就是动态的)

<progress percent='{{progress}}' show-info stroke-width='20' color='red'/>

js中添加数据, 其中初始进度为0, 再加上onLoad事件, 在onLoad中添加定时器, 每0.05秒执行一下

Page({
  data: {
    progress : 0
  },
  onLoad: function() {
    var that = this;                  /*把this保存起来, 因为在setInterval函数中取不到它*/
    var pNumber = 0;

    var ptimer = setInterval(function(){
      pNumber ++;
      if(pNumber >= 100) {                    /*进度为100%时清除定时器*/
        clearInterval(ptimer);
      }
      that.setData({                        /*改变进度条当前值*/
        progress: pNumber
      });
    }, 50);
  }
})