E企盈营销工具技术服务商 热线:4006-838-530

小程序模板和组件的使用和区别

E企盈直播平台营销卖货系统

不得不说微信小程序的官方文档还是有很多坑啊(⊙﹏⊙)使用模板和组件的目的:实现代码复用template(模板)相对于component而言,template更加轻量级,它的功能有限,主要是用于展示。模板只有两个以.wxml 和.wxss结尾的文件定义模板新建一个与pages同级的文件夹 = templates,在templates下创建templateItem文件夹,然后在这个文件夹里创建同名的.wxml和.wxss的文件使用name属性,作为模板的名字,然后在template/ 内定义代码片段,template必须要写templateItem.wxml :template name=”msgItem”        view class=”content”我是模板的内容/view/template复制代码可以在templateItem.wxss中添加一些好看的样式.content {       width: 100%;        height: 400rpx;       background-color: yellowgreen;        display: flex;        justify-content: center;        align-items: center;}复制代码接下来就可以在页面中使用模板了使用模板要使用模板,首先得在要使用的页面引入模板,使用import标签导入,使用is属性,声明需要使用的模板,比如在index.wxml中使用:index.wxml :!– index.wxml –import src=”../../templates/templateItem/templateItem.wxml” /view        template is=”msgItem” //view复制代码注意: import标签不能省略  /,不然会报错现在,模板的内容可以显示在页面上了,但是模板的样式却没有生效。想要让样式生效,必须在index.wxss 中引入模板的样式文件:/** index.wxss **//** 如果下面还有样式 这里的分号不能省略 **/@import “../../templates/templateItem/templateItem.wxss”;复制代码现在,模板的颜色也出来啦~                               到这里,一个最简单的模板就完成了模板传值模板除了可以写代码片段外,is属性可以使用Mustache语法,来动态决定具体需要渲染哪个模板在index.js中的data中添加一些数据,// index.js​//获取应用实例cosnt app = getApp()​;Page({        data: {            hero: {               name: ‘盖伦’,             profession: ‘战士’,             skill: ‘得玛西亚正义’        }    }})复制代码修改一下模板:template name=”msgItem”    view class=”content”        view class=”content”我是模板的内容/view        view                        text{{ name }}/text—                        text{{ professios }}/text—                        text{{ skill }}/text                 /view       /view/template复制代码在模板原理的样式基础上中增加:flex-direction: column;复制代码保存并运行,此时,就多了好多内容了(#^.^#)                                     模板的作用域模板拥有自己的作用域,只能使用data 传入的数据以及模板文件中定义的wxs /模块component(组件)从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。自定义组件在pages的同级目录下创建components文件夹类似于页面,一个自定义组件由json wxml wxss js 4个文件组成。要编写一个自定义组件,首先需要在json文件中进行自定义组件声明(将component字段设为true),使用微信开发者工具,创建component会自动生成。{    “component”: true}复制代码在组件文件中编写一些看起来很厉害的代码!– 这是自定义组件内部的内容 –view class=”herocontainer”        view姓名:{{ hero.name }}/view        view职业:{{ hero.profession }}/view        view技能:{{ hero.skill }}/view/view复制代码在自定义组件的js文件中,需要使用 Component 来注册组件,并提供组件的属性定义、内部数据和自定义方法// 这是自定义组件内部的js文件Component({        properties: {                // hero收一个对象                hero: Object        },        data: {           //这里是一些组件内部数据       },    methods: {            //这里是自定义方法    }})复制代码也给它添加一些看起来很厉害的样式/** 这是自定义组件内部的wxss文件 **/.herocontainer {        width: 750rpx;        height: 200rpx;        background-color: yellow;        color: hotpink;}复制代码注意:在组件wxss中不应该使用ID选择器、属性选择器和标签名选择器自定义组件中,写了wxss和 js,使用时无需在页面中导入,只需导入组件即可使用自定义组件使用自定义组件前,首先要在要使用的页面的json文件中进行引用声明,此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径{        “usingComponents”: {       “my-component”: “../../components/mycomponent/mycomponent”        }}复制代码这样,在页面的wxml 中就可以像使用基础组件一样使用自定义组件啦,节点名就是自定义组件的标签名,节点属性就是自定义组件的属性值view        my-component hero=”{{hero }}” //view复制代码黄色部分为组件的内容:                                   自定义组件传值页面 —–  组件组件中通过proprtties写上要接受的值页面通过属性名称和值的方式传递上面就是页面传值到组件组件 —– 页面页面中写监听事件组件中写触发事件在自定义组件中添加一个事件button bindtap=”onTap”点击按钮触发事件/button复制代码在组件的js文件methods中添加方法,通过this.triggerEvent()给也面传值,在data中定义一个数据用来传给页面data: {     message: ‘欢迎来到英雄联盟’  },onTap(){        const message = this.data.message        this.triggerEvent(‘myevent’,message)}复制代码在页面的js中,添加一个与data同级的方法,通过事件对象的e.detail拿到传过来的值Page({        onMyEvent(e){        console.log(e.detail)        }})复制代码在页面中绑定事件my-component hero=”{{ hero }}” bindmyevent=”onMyEvent” /复制代码点击按钮之后,控制台会输出组件传过来的值不出意外就是 ==  欢迎来到英雄联盟 注意坑点因为wxml节点标签只能是小写字母、中划线和下划线组合,自定义组件也只能是这样自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式自定义组件和页面所在项目根目录名不能以wx-为前缀,否则会报错总结template 和 components 的共性: 不能单独呈现出来,必须依附显示在页面不同点:template比较轻量级,没有自己的逻辑处理能力,只能来着页面显示值组件要重量级一些,它有自己的逻辑处理能力

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序模板和组件的使用和区别
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏