微信小程序组件封装

2020-11-10 12:05:26 阅读：174 来源： 互联网

类似于页面，一个自定义组件由json wxml wxss js 4个文件组成

1 在json文件中做自定义组件声明

{
    "component": true
}

2 在wxml文件中编写组件模板，在wxss文件中加入组件样式

<view class="inner">
  {{innerText}}
</view>

2.1 tip

001 组件wxss中的样式只作用于这个自定义组件

002 在组件wxss中不应该使用id选择器、属性选择器和标签选择器

3 在自定义组件的js文件中，需要使用Component()来注册组件，并提供组件的属性定义、内部数据和自定义方法

Component({
  // 组件的对外属性，是属性名到属性设置的映射表
  properties: {
    innerText: {
      type: String,
      value: '',
      observer(newVal, oldVal, changePath) {}
    },
    myProperty2: String
  },
   data: {},
    methods: {}
})

4 使用自定义组件

4.1 在json文件中进行引用声明

{
  "usingComponents": {
    "component-tag-name": "path/component"
  }
}

4.2 在页面的wxml中就可以像使用基础组件一样使用

<view>
  <component-tag-name inner-text="some text"></component-tag-name>
</view>

5 注意

5.1 因为wxml节点标签名只能是小写字母、中划线和下划线组合，所以自定义组件的标签名也只能包含这些字符。

5.2 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用usingComponents字段）。

5.3 自定义组件和页面所在项目根目录名不能以"wx-"为前缀，否则会报错。

标签：封装,自定义,wxml,微信,组件,wxss,选择器,页面
来源： https://www.cnblogs.com/pleaseAnswer/p/13953065.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序组件封装