700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序自定义组件的使用方法

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

时间:2019-11-25 04:01:46

相关推荐

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

1.定义组件

在根目录下新建components来放置不同功能的组件

例:新建头部功能组件NavHeaders文件夹,然后在这个文件夹上右键新建component

新建完的组件文件如下:

其中.wxml和用来放置需要复用的组件结构,.wxss用来放置组件样式,.js用来放置组件的一些数据相关的

例:

2.注册组件

在哪个页面中使用组件,就要去哪个页面的.json文件中注册组件,如去index页面中使用组件,index.json中注册组件代码如下,key是组件自定义名字,value是组件的路径

{"usingComponents": {"NavHeader":"/components/NavHeaders/NavHeader"}}

3.使用组件

例:在index.wxml中使用组件

<NavHeader></NavHeader>

4.动态组件数据

在组件的.JS文件中的properties(相当于vue中的props)进行配置,如下,用type声明数据类型,用value声明传递的值

5.传递动态数据

<NavHeader title="推荐歌曲" nav="为你精心推荐"></NavHeader>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。