2020.8.07 微信小程序(组件封装)

Wesley13
• 阅读 606

今天说一下微信小程序组件的封装…

为什么要封装组件?

写组件的目的就是为了复用,它的好处太多了

a. 写更少的代码。

b. 减少开发时间。

c. 代码的bug更少。

d. 占用的字节更少。

组件复用使我们的代码组织变得非常灵活。

那么组件到底怎么封装,其实就和vue组件封装的思想一样的
最近在写这样一个小程序:

2020.8.07 微信小程序(组件封装)

2020.8.07 微信小程序(组件封装)
可以看到页面是有很多小块组成的,如果都在home页面开发的话,先不说js逻,就页面布局也很费劲,后期代码也不好维护,这个时候就可以用组件的方式来写。可以把组件定义好的标签直接引到home主页就可以了,有问题可以到相应的组件里修改就可以了。

下面开始封装组件:

1.创建一个组件:
在page的同级目录下,创建一个文件夹,命名为components文件夹,这个文件夹是用来放组件的。如图:
2020.8.07 微信小程序(组件封装)
2020.8.07 微信小程序(组件封装)

Component组件像页面一样由wxml、wxss、js和json4个文件组成,而且这4个文件放在同一个目录中。但是js文件和json文件与页面不同。
下面是js代码:

 // components/demo/index.js
 Component({
 /**
 * 组件的属性列表
 */
 properties: {
     name: {
         type: String,
         value: ''
    }
},

/**
* 组件的初始数据
*/
data: {
    type: "组件"
},
/**
* 组件的方法列表
*/
methods: {
    click: function () {
        console.log("component!");
     }
}

然后配置json文件:

{
   "component": true,
   "usingComponents": {}
 }

然后在页面中引用组件:

{
    "navigationBarTitleText": "模板demo",
    "usingComponents": {
           "demo": "../../components/demo/index" 
     }
 }

最后在模板文件中进行使用就可以了,其中name的值为json配置文件中usingComponents的键值:

<demo name="comp"></demo>
     <!--使用demo组件,并传入值为“comp”的name属性(参数)-->

这样,一个组件就封装好了

注意:组件中不会自动引用公共样式,如果需要则需在样式文件中import引入就可以了。

 @import "../../app.wxss";
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
达里尔 达里尔
2年前
在Vue项目里遇到多次渲染echart组件只显示一个的问题
症状vue项目echarts中出现“Thereisachartinstancealreadyinitializedonthedom.”的警告Vue页面多次渲染echarts封装的组件但只出现一个(如果这个为主要症状)原因:1.有可能是id冲突,如果你注册了N个组件,但是由于是复制粘贴过来的,导致你所有的组件文件echarts容器
梦
3年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Stella981 Stella981
3年前
JavaScript数组索引检测中的数据类型问题
之前在写微信小程序项目时,里面有一个“城市选择”的功能,笔者用的是<pickerview组件,这个组件比较特别,因为它的value属性规定是数组格式的。比如:value"1"。因为当时对JS变量类型转换的不了解,笔者在代码中写下了这样的几行判断:(这是严谨的)letval_onetypeoft
Wesley13 Wesley13
3年前
5个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果。自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库。还没用到它们的你,可以关注和了解一下哦!WeUIWXSSWeUIWXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。
达里尔 达里尔
10个月前
给数组添加新数据,判断数据是否重复
多选要进行数组拼接,希望判断往原数组里添的新数据是否重复,封装个简易方法languageconstdataArrayname:'aaa',id:1,name:'bbb',id:2;constnewDataname:'ccc',id:2;//要添加的新数