小程序使用之自定义组件

ztyzz 发布于2019-08-29 17:28 / 2262人阅读

摘要：今天要介绍的是小程序的自定义组件，类似的在做开发的过程中会用到自定义，封装成通用的组件可以在不同页面里重复使用可以将复杂的页面拆分成多个低耦合的模块，便于代码的维护。

文章链接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ

在前一篇文章小程序使用之WXS中，介绍了关于 wxs 的使用，通过wxs处理数据再渲染到view层，可以简化数据处理，将通用的数据处理封装起来，避免重复代码的使用。

今天要介绍的是小程序的自定义组件，类似的在做android 开发的过程中会用到自定义view，封装成通用的组件可以在不同页面里重复使用；可以将复杂的页面拆分成多个低耦合的模块，便于代码的维护。

一个自定义组件由js json wxml wxss 4个文件组成，微信开发者工具里新建选择 Component，会自动创建这个4个文件， json文件里设置：

{
  "component": true
}

这一组文件可以当做自定义组件使用。

一个简单的例子，自定义item当做组件使用。
在组件的wxml文件里码上页面元素


  {{txt}}
  
    
      
      {{title}}
    
    {{subTitle}}

组件提供节点，用于承载组件在引用时提供的子节点，可以当做占位的标志，后面可以将视图直接填充到此节点。

wxss是对应组件的样式

.content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px
}
.title{
  color: #424242
}
.subTitle{
  color: #939393;
  font-size: 16px
}

js文件里的Component构造器可以指定组件的属性、数据、方法等。

/**
* 组件的属性列表
*/
properties: {
    title: {
      type: String, //属性类型
      value: "--" //属性初始值
    },
    subTitle: {
      type: String,
      value: "--" 
    },
}

属性列表里的值对应渲染在组件的wxml里。

/**
* 组件的初始数据
*/
data: {
    txt:"颜色"
},

组件的内部数据用于wxml的渲染。

在需要用到组件的页面json文件里添加，注意路径是绝对路径

{
  "usingComponents": {
    "item": "/component/item/item" //绝对路径
  }
}

wxml页面内直接使用标签，该标签下的节点text 用于填充到内


  
    1、

一个简单的页面渲染

组件也可以接受外部传入的样式，在组件的js文件 Component 构造器里

Component({
  externalClasses: ["title-class"]
})

注意这里使用*-class 的形式定义，在组件的wxml里

{{title}}

外部使用的话，可以看到外部的样式传递给组件使用。

//wxml文件

    1、


//wxss
.red-class{
  color: red
}

一个简单的组件的例子完成，实际项目中，通过自定义组件便于在不同的页面中重复使用。

欢迎关注我的个人博客：https://www.manjiexiang.cn/

更多精彩欢迎关注微信号：春风十里不如认识你
一起学习，一起进步，欢迎上车，有问题随时联系，一起解决！！！

更多精彩：
[python itchat 爬取微信好友信息
](https://mp.weixin.qq.com/s?__...
[python爬虫学习：爬虫QQ说说并生成词云图，回忆满满
](https://mp.weixin.qq.com/s?__...
[python 图片在线转字符画预览
](https://mp.weixin.qq.com/s?__...
[android 仿微信表情雨下落！
](https://mp.weixin.qq.com/s?__...
[仿支付宝首页头部伸缩效果
](https://mp.weixin.qq.com/s?__...
[一款属于自己的小程序
](https://mp.weixin.qq.com/s?__...

GPU云服务器云服务器小程序组件开发微信小程序组件小程序个人使用怎么使用小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114348.html

小程序使用之自定义组件

摘要：今天要介绍的是小程序的自定义组件，类似的在做开发的过程中会用到自定义，封装成通用的组件可以在不同页面里重复使用可以将复杂的页面拆分成多个低耦合的模块，便于代码的维护。文章链接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ 在前一篇文章小程序使用之WXS中，介绍了关于 wxs 的使用，通过wxs处理数据再渲染到view层，可以简...

Ververica 2019-08-02 12:09 评论0 收藏0
微信小程序数据分析之自定义分析

摘要：什么是自定义分析引用下官方文档自定义分析支持灵活多维和近实时的用户行为分析，可以通过自定义上报，对用户在小程序内的行为做精细化跟踪，满足页面访问等标准统计以外的个性化分析需求。在小程序后台，微信已经提供了强大的数据分析功能，包括实时统计、访问分析、来源分析和用户画像功能，可以说对一般的数据分析已经完全足够了，但有时应用需要做一些更加精准的数据分析，比如具体到某一个页面的分享，页面中某...

firim 2019-07-01 10:32 评论0 收藏0
微信小程序数据分析之自定义分析

摘要：什么是自定义分析引用下官方文档自定义分析支持灵活多维和近实时的用户行为分析，可以通过自定义上报，对用户在小程序内的行为做精细化跟踪，满足页面访问等标准统计以外的个性化分析需求。在小程序后台，微信已经提供了强大的数据分析功能，包括实时统计、访问分析、来源分析和用户画像功能，可以说对一般的数据分析已经完全足够了，但有时应用需要做一些更加精准的数据分析，比如具体到某一个页面的分享，页面中某...

siberiawolf 2019-08-26 12:14 评论0 收藏0
微信小程序数据分析之自定义分析

摘要：什么是自定义分析引用下官方文档自定义分析支持灵活多维和近实时的用户行为分析，可以通过自定义上报，对用户在小程序内的行为做精细化跟踪，满足页面访问等标准统计以外的个性化分析需求。在小程序后台，微信已经提供了强大的数据分析功能，包括实时统计、访问分析、来源分析和用户画像功能，可以说对一般的数据分析已经完全足够了，但有时应用需要做一些更加精准的数据分析，比如具体到某一个页面的分享，页面中某...

abson 2019-08-02 11:17 评论0 收藏0