爱分享666

当前位置:首页 >web前端>前端技术文档

    在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说的自定义组件,自定义组件类似于页面,它有wxml 模版、wxss 样式和js文件,然后在页面中使用该自定义组件即可。

  例如,我的自定义组件代码结构是这样的:

      

  myComponent文件就是我所创的自定义组件,myComponent.wxml文件代码为: 

1
2
3
<view class="inner">
  <Text>I am learning 微信小程序</Text>
</view>

  

  myComponent.js文件代码为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const app = getApp()
Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      // value: '',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    customMethod(){
      console.log('hello world! I am learning 微信小程序')
    }
  }
})

 

  myComponent.wxss部分代码如下:

1
2
3
.inner{
  color:red
}

  

  现在我要在pages/index文件中使用该自定义组件,该怎么做呢?

  1、在myComponent.json文件中添加以下代码:

1
2
3
{
  "component"true
}

  

  2、在需要调用自定义组件的文件中,如pages/index文件需要调用自定义组件,那么则需要在pages/index/index.json文件中添加如下代码:

1
2
3
4
5
{
  "usingComponents": {
    "myComponent""../../components/myComponent/myComponent"   // 组件名以及组件所在路径
  }
}

  

  3、然后就可以在myComponent.wxml文件中使用该自定义组件了,

  index.wxml文件代码如下:

1
2
3
<view>
    <myComponent id="myComponent"></myComponent>
</view>

  此时调用自定义组件后,效果如下:

                      

  4、现在要调用自定义组件中的方法就可以这样做,为了方便,这里我使用的是点击按钮调用事件,因此index.wxml文件代码变为:

1
2
3
4
<view>
    <button bindtap="showComponent">组件调用</button>
    <myComponent id="myComponent"></myComponent>
</view>

  

 5、myComponent.js文件部分代码为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
 
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //  页面初次渲染完成后,使用选择器选择组件实例节点,返回匹配到组件实例对象  
    this.myComponent = this.Component('#myComponent')
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
   showComponent: function () {
      let myComponent = this.myComponent
      myComponent.customMethod()  // 调用自定义组件中的方法
   }
})

  

  现在点击按钮后就可以调用自定义组件了。效果如下:

   

 

作者:江峰★ 
出处:http://www.cnblogs.com/jf-67/ 
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利

    在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说的自定义组件,自定义组件类似于页面,它有wxml 模版、wxss 样式和js文件,然后在页面中使用该自定义组件即可。

  例如,我的自定义组件代码结构是这样的:

      

  myComponent文件就是我所创的自定义组件,myComponent.wxml文件代码为: 

1
2
3
<view class="inner">
  <Text>I am learning 微信小程序</Text>
</view>

  

  myComponent.js文件代码为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const app = getApp()
Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      // value: '',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    customMethod(){
      console.log('hello world! I am learning 微信小程序')
    }
  }
})

 

  myComponent.wxss部分代码如下:

1
2
3
.inner{
  color:red
}

  

  现在我要在pages/index文件中使用该自定义组件,该怎么做呢?

  1、在myComponent.json文件中添加以下代码:

1
2
3
{
  "component"true
}

  

  2、在需要调用自定义组件的文件中,如pages/index文件需要调用自定义组件,那么则需要在pages/index/index.json文件中添加如下代码:

1
2
3
4
5
{
  "usingComponents": {
    "myComponent""../../components/myComponent/myComponent"   // 组件名以及组件所在路径
  }
}

  

  3、然后就可以在myComponent.wxml文件中使用该自定义组件了,

  index.wxml文件代码如下:

1
2
3
<view>
    <myComponent id="myComponent"></myComponent>
</view>

  此时调用自定义组件后,效果如下:

                      

  4、现在要调用自定义组件中的方法就可以这样做,为了方便,这里我使用的是点击按钮调用事件,因此index.wxml文件代码变为:

1
2
3
4
<view>
    <button bindtap="showComponent">组件调用</button>
    <myComponent id="myComponent"></myComponent>
</view>

  

 5、myComponent.js文件部分代码为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
 
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //  页面初次渲染完成后,使用选择器选择组件实例节点,返回匹配到组件实例对象  
    this.myComponent = this.Component('#myComponent')
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
   showComponent: function () {
      let myComponent = this.myComponent
      myComponent.customMethod()  // 调用自定义组件中的方法
   }
})

  

  现在点击按钮后就可以调用自定义组件了。效果如下:

   

 

作者:江峰★ 
出处:http://www.cnblogs.com/jf-67/ 
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利

上一篇:

js图片上传时获取图片的宽和高

下一篇:

SpringCloud视频教程10 4.6 Ribbon-3使用配置文件自定义Ribbon Client

0 +1
打赏 ×

如果网站能给予您帮助,欢迎给网站捐助,给我打赏个吧!
您的支持是我的动力,让网站能一直陪伴着大家,共同学习进步。
捐助费用将用于网站日常运营(服务器租费、域名租费等)
捐助者请发送邮箱提供姓名至 zhaoqn@163.com 留言以表感谢。

网友评论


  • 验证码:

热门评论

本月热门

推荐资料

精彩评论

回到顶部