从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。

今天上手的是iview weapp

  • 首先到 GitHub 下载 iView Weapp 的代码,将 dist 目录拷贝到自己的项目中

  • 接着我们吧要用的组件在要用的页面.json引入组件即可

比如我现在要用的是Panel 面板组件和list组件,来写一个设置页面

setting.json引入组件代码如下

{
  "usingComponents": {
    "i-cell-group": "../../dist/cell-group/index",
    "i-cell": "../../dist/cell/index",
    "i-panel": "../../dist/panel/index",
    "i-icon": "../../dist/icon/index"
  }
}

然后在setting.wxml页面就可以愉快的使用了,代码如下:

<i-panel title="显示">
  <i-cell-group>
    <i-cell title="首页逆序显示">
      <switch slot="footer" checked />
    </i-cell>
  </i-cell-group>
  <i-cell-group>
    <i-cell title="炫彩模式">
      <switch slot="footer" checked />
    </i-cell>
  </i-cell-group>
  <i-cell-group>
    <i-cell title="随机颜色">
      <switch slot="footer" checked />
    </i-cell>
  </i-cell-group>
</i-panel>
<i-panel title="缓存">
  <i-cell-group>
    <i-cell title="清理缓存" is-link></i-cell>
  </i-cell-group>
</i-panel>
<i-panel title="关于">
  <i-cell-group>
    <i-cell title="关于" is-link></i-cell>
  </i-cell-group>
  <i-cell-group>
    <i-cell title="联系反馈" is-link></i-cell>
  </i-cell-group>
  <i-cell-group>
    <i-cell title="关注张益达同学" is-link></i-cell>
  </i-cell-group>
</i-panel>
<i-panel title="更新">
  <i-cell-group>
    <i-cell title="更新记录" is-link></i-cell>
  </i-cell-group>
</i-panel>
<view class="footer">本项目由张益达同学开发,张益达同学维护</view>
<view class="footer">如收录图片的作者有版权亦有其他问题,</view>
<view class="footer">请及时与张益达同学联系,张益达同学将会在第一时间内删除.</view>

我们来看下最终结果

the end

欢迎留言交流呃~


扫描二维码,在手机上阅读!