将页面划分成很多组件,通过对这些组件进行排版成我们想要的页面。

什么是组件化:

将页面组件分别先实现好,再合并到page中去。

小程序组件化讲解、

组件还能进行细分。

小程序组件化讲解、

小程序组件化讲解、

小程序组件化讲解、

小程序组件化讲解、

想要在哪个页面就去哪个页面的json文件去注册它。

小程序组件化讲解、

接着可以使用了:

小程序组件化讲解、

小程序组件化讲解、

小程序组件化讲解、

小程序组件化讲解、

小程序组件化讲解、

小程序组件化讲解、

小程序组件化讲解、

全局注册:

小程序组件化讲解、

不过不推荐全局注册。

如果只是一个页面用到的组件,就没有必要在全局配置。

 

组件样式细节:

小程序组件化讲解、

小程序组件化讲解、

注册:

小程序组件化讲解、

小程序组件化讲解、

接着来看看,自定义组件的样式会不会影响到页面本来的样式:不会影响。

如果是相同的样式名称会不会影响:不会。

小程序组件化讲解、

小程序组件化讲解、

 

组件与页面之间的通信:在页面进行点击或者传递数据,想要将数据传递给组件。

小程序组件化讲解、

向组件传递数据:properties。

小程序组件化讲解、

小程序组件化讲解、

小程序组件化讲解、

小程序组件化讲解、

小程序组件化讲解、

传递样式:

小程序组件化讲解、

小程序组件化讲解、

小程序组件化讲解、

 

组件向外传递事件:自定义事件。

小程序组件化讲解、

小程序组件化讲解、

home.wxml:

小程序组件化讲解、

小程序组件化讲解、

需求:内部组件按钮点击+1,外部显示数据的变化:

小程序组件化讲解、

小程序组件化讲解、

此时函数是不能在home.js中去实现的,想要去自定义组件逻辑中去实现。

思路:将自定义组件内部数据给传递出去:

小程序组件化讲解、

小程序组件化讲解、

小程序组件化讲解、

接着在home.js中去实现函数逻辑:

小程序组件化讲解、

也可以传递一些其他数据:

小程序组件化讲解、

然后是在home中通过event去拿的:

小程序组件化讲解、

 

相关文章: