最新时时彩平台演示 中新时时彩要不要交税 新时时彩三星组六技巧 最新时时彩源码修改 新时时彩遗漏走势图 新时时彩预测方法 新时时彩计算器 新时时彩开奖皇冠网址 新时时彩组三怎么玩 最新时时彩后四稳赚 新时时彩官方开奖网站 新时时彩人工计划 新时时彩开奖漏洞 新时时彩最长遗漏 新时时彩中奖顺序 360新时时彩技巧-轴承资讯 新时时彩停售 最新时时彩杀号高手 新时时彩三星走势图 玩新时时彩有什么技巧 新时时彩3星和尾走势 新时时彩后一公式 重新时时彩网站 新时时彩遗漏统计软件 吉林新时时彩走势图 新时时彩中奖怎么查 新时时彩是什么地方 新时时彩中奖怎么查 新时时彩下载手机版下载 新时时彩贴吧 最新时时彩计划软件 大赢家新时时彩 新时时彩注册送彩金 新时时彩组选投注技巧 新时时彩走势图 新时时彩万能5码 新时时彩模拟 新疆新时时彩往期开奖号码 新时时彩的玩法 新时时彩稳赚计划 最新时时彩70注 新时时彩返奖率 新时时彩杀号定胆360 新时时彩后二杀号 新时时彩振幅走势 最新时时彩教程 新时时彩后台软件 新时时彩几点开始 新时时彩日赚几百 最新时时彩注册送20
用户
 ?#19968;?#23494;码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序自定义组件的关键记录

Rolan 2019-2-20 00:41

我们在往常用vue或者是react编程的时候,最常用最常见的一个词就是组件,在小程序开发中,组件也是很nice的,毕竟谁也不想把1+1 = 2每一个页面写一遍。本篇文章适合知道小程序基本开发的手足,总结一些自己在开发小 ...

我们在往常用vue或者是react编程的时候,最常用最常见的一个词就是组件,在小程序开发中,组件也是很nice的,毕竟谁也不想把1+1 = 2每一个页面写一遍。本篇文章适合知道小程序基本开发的手足,总结一些自己在开发小程序组件的过程需要注意的点,有写的不对的地方还请指指教。

1. 基本配置

新建组件就跟新建页面一样,还是js、json、wxml、wxss四个文件,这里需要注意的有四点。

一、或许很多人在新建组件的时候

右键直?#26377;?#24314;page,这样就会在app.json的配置文件中的pages下面,根据路径多加一项,需要注意的是,这一项不像是页面,删掉也没关系。

二、新建组件之后

需要在组件的配置文件json中添加component: true字段; 需要在引用组件的配置文件中添加usingComponents字段来定义组件的名字和路径【可以直接用/+app.json中自动生成的,以免路径?#20063;?#21040;】

三、新建的组件

如果是直接一键生成的,那么这个时候js文件中的还是page({...生命周期等执行函数}),所以这个时候需要我们把这些换成组件需要的component({...组件需要的对象})

2.组件样式

关于样式,就是我们的css了,至于里面的slot,无非就是一个插槽,而模版文件中数据绑定等我们都可以按照页面中的?#35789;?#29616;,需要注意的是选择器和样式污染问题

一、选择器

在编写组件的时候,不能使用id选择器(#a)、属性选择器([a])和标签名选择器,建议统一使用class 子选择器只能用于view组件,和其子节点之间,其余的不建议使用 比如text > text ?#22363;?#26679;式的话 font还有color这种样式?#22363;校?#20250;从组件外?#22363;?#21040;组件内部 除?#22363;?#26679;式之外,app.wxss中的样式,组件所在页面的样式对组件内部是无效的

其?#30340;兀?#25105;们只用class选择器就好了。。。

二、外部样式定义

组件定义好了之后,在使用的时候,如果我忽然在调用页面加一个class控制样式,想加一个class怎么办呢? 在组件内部的js文件?#20449;?#32622;externalClasses:['xxx'],这样在外部引用的时候,可以直接使用这里定义的,毕竟单节点上面,同一节点同时使用普通样式和外部样式的时候,优先级会出?#25191;?#20081;,所以这能很好的避免这种情况 我们前面说了,自定义组件内部样式,是不会受到外部样式的影响的,除非是全局的标签或者是options配置中添加assGlobalClass字段

三、样式配置

3.component构造器 其实这里的构造器都是制定组件重的属性、数据、方法等等,定义的字段可以参考官方文档,我这里不多做累述,把容易混淆的点拿出来对比一下。

properties: 组件的对外属性 data: 组件的内部数据 组件生命周期:生命周期有优先级,一般情况下直接当作普通方法,但是如果需要优先级的时候,可以写到lifetimes对象里面

组件生命周期:

4.组件事件

组件的事件,我们和vue差不多的写法,会有一个methods统一来管理。但是我们通常有两种类型

1. 组件内部调用的方法。

和普通一样就好了,无非就是完全在组件内部自己玩,不和外部页面进行数据通信,请求也是自己完成
复制代码

2. 和父组件或者页面有数据通信的方法。

我们在vue中需要使用到自组件向父组件传递消息,有一种方法就是this.$emit('...', msg)
但是我们在小程序中也需要这种场景 【监听事件】:组件间通信的主要方式之一
复制代码

组件内部

// wxml
        <view bindtap="onHandle"></view>
        // js
        methods: {
            onHandle() {
                .....
                this.triggerEvent('eventName', detailMsg)
            }
    }

复制代码
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 猛虎嗅蔷薇 来自: 掘金
新时时彩软件