简单-定义一个小程序组件

栏目: IOS · Android · 发布时间: 6年前

内容简介:当微信官方提供的组件,不能满足我们的需求时,且使用系统组件构造模板 wxml 较为复杂,我们就可以考虑使用微信官方提供的组件架构,定义符合我们需求的组件。自定义的组成和小程序的一般页面的结构一样。由:js : 负责组件的逻辑。 json: 负责定义组件的配置。 wxml: 负责定义组件的布局。 wxss: 负责组件的样式。

当微信官方提供的组件,不能满足我们的需求时,且使用系统组件构造模板 wxml 较为复杂,我们就可以考虑使用微信官方提供的组件架构,定义符合我们需求的组件。

2. 自定义组件组成

自定义的组成和小程序的一般页面的结构一样。由: js\json\wxml\wxss 四个文件构成,其中:

js : 负责组件的逻辑。 json: 负责定义组件的配置。 wxml: 负责定义组件的布局。 wxss: 负责组件的样式。

我将按照如下顺序,定义一个简单的组件。

1、编写组件的页面,仅仅显示一行文字,以演示建立和编写组件的文件。
2、引用上一步编写的组件,以演示如何引用自定义组件。
3、编写组件逻辑结构,实现组件数据由 js 逻辑控制,组件内部实现响应用于操作事件。
4、提供接口用于回调组件内部事件。
5、提供方法以便外部直接调用使用组件。
复制代码

二、实现自定义组件

1、新建组件

在定好的目录下右键新建一个 Component 目录,系统会自动帮助我们创建好自定义组件的四个必要文件,步骤与结果如图一、二所示。

简单-定义一个小程序组件
简单-定义一个小程序组件

下面我们来编写组件 wxml 文件内容。

// test-component.wxml 的内容
<text>这是自定义组件</text>
复制代码

组件 json 内容 如果是使用微信开发者 工具 建立的 component 文件,那么 ide 会帮助我们自动创建如下代码(手动的自己添加就好):

{
  "component": true,
  "usingComponents": {}
}
// component 表明组件的身份。
// usingComponents 组件引用的子组件(组件是可以使用别的自定义组件的,系统组件无需声明)
复制代码

组件 js 内容,ide 会自动创建如下代码:

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

复制代码

组件的 wxss 我们可以暂时不用理会,就是一般的样式代码。

到这里我们的一个简单的自定义组件就已经完成,下面进行引用。

2、使用自定义组件

使用自定义组件只需要两步:

第一、在需要引用的页面 json 配置代码中添加如下配置:

"usingComponents": {
    "test-1": "/pages/component/test-component"
  }
  // usingComponents 为依赖组件的配置项
  // test-1 为依赖组件的别名(可以随意定),在使用页面的布局中使用此别名。
  // /pages/component/test-component 为依赖组件的路径(无序添加后缀)。
复制代码

第二、在对于布局页面中使用,和使用系统组件一样,上一步定的 「别名」作为标签名。

<!-- index.wxml 文件内容 -->
<view>
  <test></test>
</view>
复制代码

保存重新编译之后,页面就出现了我们自定义组件的内容。

简单-定义一个小程序组件

3、实现响应用户操作事件

这一步将实现用户的点击事件。在用户点击自定义组件之后,将改变自定义组件的文字内容。

第一、捕获自定义组件的点击事件。

自定义组件的事件处理和在一般页面一样, catchtap 对应的事件,然后在 js 文件中定义好对应的处理函数。代码如下:

<!-- test-component.wxml 的内容 -->
<text catchtap='onClick'>{{text}}</text>
复制代码
// pages/component/test-component.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    text:'这是初始文字'
  },
  methods:{ // 方法一定要放在这个里面
    /**
       * 响应用于点击的方法
       */
    onClick: function (e) {
      // 设置数据也是采用数据判定的方法,和一般页面一致。
      this.setData({
        text: '点击了'
      });
    }
  }
})

复制代码

效果如下

简单-定义一个小程序组件

4、在外部监听上一步的文字改变时间。

这一部分主要的代码还是位于自定义组件的 js 文件内。

第一、在自定义组件内部触发一个组件的自定义事件,代码如下:

// pages/component/test-component.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    text:'这是初始文字'
  },
  methods:{
    /**
       * 响应用于点击的方法
       */
    onClick: function (e) {
      // 设置数据也是采用数据判定的方法,和一般页面一致。
      this.setData({
        text: '点击了'
      });
      // 自定义一个组件触发事件
      this.triggerEvent('onTextChange');
    }
  }
})
复制代码

第二、在引用组件的页面(wxml)捕获这个事件

<!-- index.xml 文件内容 -->
<view>
  <test catch:onTextChange='onTextChange'></test>
</view>

复制代码

第三、在引用组件页面 js 逻辑内建立这个捕获事件

// index.js 页面内容
Page({
  data: {
   
  },
  onLoad: function () {

  },
  // 捕获事件
  onTextChange: function(){
    wx.showToast({
      title: '捕获事件',
    })
  }
})

复制代码

效果如下:

简单-定义一个小程序组件

5、自定义组件提供给外部调用的方法

第一步、编写对外提供的方法

这里给外部提供一个改变文字内容的方法,代码如下:

// pages/component/test-component.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    text:'这是初始文字'
  },
  methods:{
    /**
       * 响应用于点击的方法
       */
    onClick: function (e) {
      // 设置数据也是采用数据判定的方法,和一般页面一致。
      this.setData({
        text: '点击了'
      });
      // 自定义一个组件触发事件
      this.triggerEvent('onTextChange');
    }
  },
  // 这个方法是给外部调用,用来改变这个组件的文字内容
  setText: function (text) {
    this.setData({
      text: text
    });
  }
})

复制代码

第二步、通过 id 获取组件实例,使用组件实例直接调用组件方法

代码如下:

Page({
  data: {
   
  },
  onLoad: function () {

  },
  // 捕获事件
  onTextChange: function(){
    wx.showToast({
      title: '捕获事件',
    })
  },
  // 响应点击事件
  change:function(e){
    // 使用官方提供的 selectComponent 方法通过 id 获取组件实例
    var mComponent = this.selectComponent('#mComponent');
    // 通过实例,直接调用组件内部提供的方法
    mComponent.setText('外部调用了');
  }
})
复制代码
<!-- index.wxml 内容 -->
<view>
  <test catch:onTextChange='onTextChange' id='mComponent'></test>
  <button catch:tap='change'>点击改变文字内容</button>
</view>
复制代码

最终效果如下:

简单-定义一个小程序组件

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

豆瓣,流行的秘密

豆瓣,流行的秘密

黄修源 / 机械工业出版社 / 2009-9 / 29.00

380万人为何会齐聚豆瓣? HIN1和SARS是如何传播扩散开的? 贾君鹏何以快速窜红网络? 通过创新扩散的理论的分析和说明,给出了所有这些问题的答案! 这本书从豆瓣的流行现象说开来,应用了创新扩散等传播学道理来解释了豆瓣如何流行起来,同时作者还同时用创新扩散的理论解释了为何会出现世界变平的现象,长尾理论,SARS病毒的高速传播等。 作者以前任豆瓣设计师的身份以自己亲......一起来看看 《豆瓣,流行的秘密》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

URL 编码/解码
URL 编码/解码

URL 编码/解码