微信小程序的自定义组件

微信小程序可以自定义组件，下面我将以input举例进行说明。

首先我们要建一个存放模板的文件夹（component），在它下面建一个组件文件夹（weui-input）用来写组件模板

代码如下：

<!--component/weui-input.wxml-->
<view class='weui-cell weui-cell-input'>
  <view class='weui-cell-hd'>
    <view class='weui-label'>{{label}}</view>
  </view>
  <view class='weui-cell-bd'>
    <input class='weui-input' type='{{type}}' name="{{inputName}}" placeholder='{{placeholder}}' password ='{{password}}'/>
  </view>
  <view class='weui-cell-ft'>
    <icon type='{{icon}}' size='23' color='#E64340'></icon>
  </view>
</view>
<slot></slot>

这边我引入了weui的框架，所以使用了weui的样式。

在js里我们需要定义一些初始值

代码如下：

// component/weui-input.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
   label:{
     type: "string",
     value: '学号',
    // observer:function(newVal,oldVal){

    // }
    }, 
    type: {
      type: 'string',
      value: 'string'
    },
    inputName: {
      type: 'string',
      value: 'name'
    },
    placeholder: {
      type: 'string',
      value: '请输入'
    },
    password:{
      type:'string',
      value:'true'
    },
    icon: {
      type: 'string',
      value: 'clear'
    }
  },

这样模板基本已经完成了。

我们可以新建一个page,进行使用即可

举例代码：

<weui-input type='number' label="学号" input-name="no" placeholder='请输入学号' icon='warn'></weui-input>

自定义组件的创建和使用就完成了，自定义组件比较方便，代码相对来说也很简洁。

在dedeCms标签里面，arclist标签不允许内部嵌套，所以一下代码在加载图片时会出现：加载URL错误，经过查阅资料，我们可以把图片当成一个arclist的一个字段写出来，就可以了。
可以将：{dede:global.cfg_templets_skin/}/default/images =>[field:global.cfg_templeturl/]/default/images，这样图片就可以正常显示了。在dedeCms标签里面，arclist标签不允许内部嵌套，所以一下代码在加载图片时会出现：加载URL错误，经过查阅资料，我们可以把图片当成一个arclist的一个字段写出来，就可以了。