微信小程序中自定义组件的使用

从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

1. 自定义组件

在开发过程中,加入有这样一种场景,就是在开发的过程中,我们一直要使用一些相同或者类似的结构,我们就可以自定义模块,方便使用,以及后期的维护,了解vue的同学就知道,其中此方法类似vue中的插槽(slot);

2.创建自定义组件的方法

类似页面一样,类似于页面,一个自定义组件由 json、 wxml 、wxss、 js 4个文件组成。要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件),例如要自定义一个common组件,需要在common.json中配置如下字段:

{
  "component": true
}

而其样式也页面的结构也是在对应的文件中编写,

<!--wxml-->
<view class="innertxt" bindtap='customMethod'>
  {{innerText}}
</view>
<view>
  {{color}}
</view>
<slot></slot>


<!--wxss-->

.innertxt{
  width:750rpx;
  color:red;
  font-size:24px;
}

<!--其中需要注意的是:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。为什么?呵呵-->

与页面和组件不同的是:在自定义组件的 js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法。

//其中数据data和方法methods的使用方法和页面的一样
Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'hello weichar',//默认的值,可以在使用时传入
    }
  },
  data: {
    // 这里是一些组件内部数据
   
    color:'red'
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function () {
       console.log('点击了我')
       this.setData({
         color:'blue'
       })
     }
  }
})

3.自定义组件的使用

例如在index页面中,我们要使用上边的common自定义组件时,需要在index.json文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径

{
  "usingComponents": {
    "common": "../components/common"
  }
}

再index.wxml中使用

<!--index.wxml-->
<import  src='../template/banner.wxml'/>
<view class="container">
  <image class='part01' src='../img/bg-about01.jpg'></image>
</view>
<view class='num'> {{count}} </view>
<view class='txt'wx:if="{{show=='part01'}}">hello weichar</view>
<button bindtap="add">点击我</button>
<template is="friutsItem"  data='{{friuts}}'/>
<common inner-text='good morning'></common>
<common></common>

编译后就会发现了效果,回头想一想这样的模块化是不是在使用中很方便,而且在以后的维护中也很容易。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JetpropelledSnake

Django学习笔记之Django的url反向解析

8010
来自专栏游戏杂谈

禁用iOS的UIView长按默认操作

很多时候需要禁用移动设备的默认行为,比如长按一个a链接的按钮(href写的是javascript:;)会提示是否打开/取消。而-webkit-touch-cal...

14820
来自专栏无原型不设计

【Mockplus教程】复制/克隆

复制是将页面复制到内存中,克隆是直接创建一个和原页面内容一样的新页面。 1. 复制 选中需要复制的页面,鼠标右键单击,弹出的菜单中选择“复制”, 然后在...

31930
来自专栏DeveWork

WordPress 主题开发之激活主题后显示自定义提示信息

如果你要开发一款WordPress 主题,那么你肯定希望用户在激活主题后能够看到你自定义的提示信息,一般是感谢使用主题之类的话。WordPress 本身在激活主...

21850
来自专栏Java后端生活

EasyUI(一)--加载本地json数据

22740
来自专栏腾讯IVWEB团队的专栏

H5 的复制操作

HTML5 现在能完美提供给我们的应该就是 copy 事件的使用,对于市面上的 clipboard.js 差不多也是运用上述的知识点。根据上面的描述,可以了...

2.7K10
来自专栏Python疯子

Airtest连接Android和iOS进行脚本测试和编写脚本

Airtest一般用于app测试,因为可以通过图片进行识别点击,也可以通过点坐标进行识别点击,所以也可以制作游戏点击脚本和应用的点击脚本。 Airtest可以...

88930
来自专栏码生

如何在Chrome 谷歌浏览器中禁用迅雷下载

在 Chrome 谷歌浏览器中,下载一个文件的时候,会自动调用迅雷下载 原因:Chrome本身自己提供了下载功能,调用迅雷下载因为安装了迅雷扩展程序(插件) ...

1K40
来自专栏开源优测

python selenium2 常用方法

完整路径 C:\Python27\Lib\site-packages\selenium\webdriver\remote\webdrive...

34040
来自专栏小尘哥的专栏

nodejs作为前后端分离中间件的跨域解决方案

前后端分离时候SEO问题很头疼,上次提供了nuxt+axios解决服务端渲染问题的解决方案,其实nodejs一样可以做服务端渲染,这时候会产生ajax跨域问题,...

9420

扫码关注云+社区

领取腾讯云代金券