微信小程序开发 - 进阶小程序2

本文由 钟翰华 原创，转载请将此行粘贴至文章开头，谢谢！原文：https://blog.youkuaiyun.com/qq_41517936/article/details/99681000

Git详细使用命令 https://blog.youkuaiyun.com/qq_41517936/article/details/98780052

微信小程序开发 --- 每天的学习进度  https://blog.youkuaiyun.com/qq_41517936/article/details/98991262

微信小程序开发 --- 初始小程序（基础）  https://blog.youkuaiyun.com/qq_41517936/article/details/98629109

微信小程序开发 --- 进阶小程序 https://blog.youkuaiyun.com/qq_41517936/article/details/99176112

微信小程序开发 ---  进阶小程序2  https://blog.youkuaiyun.com/qq_41517936/article/details/99681000

微信小程序开发 ---  进阶小程序3  https://blog.youkuaiyun.com/qq_41517936/article/details/99706581

 

 

目录

14.事件bindxxx（点击事件等）

15.组件化（重要、与template的区别）

---

14.事件bindxxx（点击事件等）

事件 捕获和冒泡capture-bind:tap

执行顺序：

bind和catch：如果只要执行一层的事件，将bind换为catch（会自动阻止事件的进一步传递）

 

15.组件化（重要、与template的区别）

一般在根目录创建一个目录componets来存放组件，命名：xx-cpn，全部小写，不能用wx前缀

组件component和模板template的区别：

组件component（包含js-json-wxml-wxss）：一般用于涉及业务逻辑的地方

模板template（单独一个wxml文件）：用于只需要展示的地方

组件的文件配置完后，在需要用到组件的Page页面的json文件中配置或者在app.json中配置（所有页面可以使用，如果不是大部分页面用到，不推荐在app.json中注册，组件一多就很繁杂，不知道是哪个页面用到的）

 

组件的样式细节：

在组件和页面的wxss中相同命名的样式，会通过styleIsolation的配置相互影响

 

组件和页面的通信

组件配置wxml：

js：

页面wxml：

wxss：

 

自定义事件传递数据：（在page页面设置组件按钮的点击事件函数）

page页面的wxml：

 

组件化-tab-control 练习：

在文字下方加一条线

 

tab-control具体实现：

组件配置：

主页page.wxml：

page.js

一个图总结：

 

获取组件对象的方法：在页面的组件中加上id，在页面js中通过const my_cpn = this.selectComponent('#id')来得到组件对象，再通过my_cpn.方法来使用组件内部的方法或属性

 

插槽slot的使用过程：

 

Component构造器：