微信小程序_自定义组件_初体验
自定义组件是微信小程序中重要的组成部分,是实现模块化开发的重要手段
个人认为,自定义组件是区分菜鸟与高手的分水岭
第一篇先介绍小程序自定义组件的基本使用
自定义组件的使用可以分为如下几个步骤
- 创建组件
- 编写组件
- 引用组件
- 使用组件
下面以一个星级展示的小案例,说明上面四个步骤
创建组件
组件的引文名称为 component,我们的小程序可能会定义以及使用很多组件,所以建议将所有组件放到一个统一的目录下
在项目根目录下新建目录 components
然后在其中新建目录 star,再右键,新建 component
输入名称 star,新建完成,目录结构如下
- 组件的页面结构与普通page一样,也是由 .wxml、.wxss、.json和.js组成
- 与普通page相比,组件的 json 文件中,多了如下代码,表明当前是组件,而不是页面
编写组件
逻辑层
首先编写逻辑层
在逻辑层中编写代码注意一下几点
- 视图层中绑定的方法和用户自定义方法必须写在 methods 中
- 逻辑层中的proerties 选项中的属性可以通过组件的使用者赋值,换句话说,组件中的属性是组件与组件的调用者之间通信的桥梁
- 组件的逻辑层中也有data,这个与page中的data没有什么不同
首先编写根据评分,生成星际的自定义方法,此方法的逻辑是:根据分数1-10的不同值,生成对应的星际,最低1星、最高5星
methods: {computeStar(score) {var starCount = 1if (score >= 1 && score < 2) {starCount = 1} else if (score >= 2 && score < 4) {starCount = 2} else if (score >= 4 && score < 6) {starCount = 3} else if (score >= 6 && score < 8) {starCount = 4} else if (score >= 8 && score <= 10) {starCount = 5}return starCount}}
在组件的 data 中定义变量 starCount
data: {//总共循环5次,此数组控制循环的总次数starArr: [1, 2, 3, 4, 5], starCount: 0 //黄星的数量},
然后在组件的attached 事件中编写代码,关于此事件,做如下几点说明:
- 组件的生命周期与page的生命周期不同,在组件中没有onload、onshoe等事件,取而代之的是
created
、attached 等事件 - attached 事件其实相当于page中的onload 事件,在组件完全初始化完毕,进入页面节点时执行
- attached事件的执行时机比页面的onload事件要完,请牢记这一点,后面要用到这一点
- 小程序官方文档建议,生命周期函数应该在 lifetimes 字段内声明
lifetimes: {attached() {var res = this.computeStar(this.properties.score)this.setData({starCount: res})}},
说明:上面代码中的 this.properties.score 作用是从组件的 properties 字段中获取 score 属性的值,然后作为参数传递给自定义方法,properties 字段定义如下
properties: {score: Number},
视图层
<block wx:for="{{starArr}}" wx:key="key"><image wx:if="{{index+1<=starCount}}" class='star_img' src="/images/icon/star.png"></image><image wx:else class='star_img' src="/images/icon/chat.png"></image>
</block>
上面代码逻辑:、
- 一共循环五次,生成五个星
- starCount的值是多少,就生成几个黄星,剩下的就生成灰星
样式代码
.star_img{width: 12px;height: 12px;margin-right: 2px;
}
使用组件
在pages中新建页面 index
在index.json 中加入如下代码,引入组件
{"usingComponents": {"star_component":"/components/star/star"}
}
其中,建为组件名称,值为组件路径
在 index.wxml 中使用自定义的组件名称使用此组件,并为组件中的 properties 字段内的属性 score 赋值
<star_component score="5"></star_component>
编译程序,查看生成结果
微信小程序_自定义组件_初体验相关推荐
- 微信小程序 配置自定义组件代码按需注入 lazyCodeLoading
微信小程序 配置自定义组件代码按需注入 lazyCodeLoading 官方网址 在app.json最后一行加上,就可以了. "lazyCodeLoading": "re ...
- 微信小程序(自定义组件)
文章目录 自定义组件 创建自定义组件 引用组件 组件和页面的区别 自定义组件的样式 样式隔离 修改样式隔离选项 组件的data和methods 组件的properties 数据监听 使用纯数据字段提升 ...
- 微信小程序的自定义组件(2)
文章目录 6. 组件的生命周期 7. 组件所在页面的生命周期 8. 组件插槽 9. 组件父子组件间的通信 10. 组件-behaviors 6. 组件的生命周期 created attached re ...
- 微信小程序之自定义组件的使用、介绍、案例分享
微信小程序自定义组件介绍 自定义组件发开文档 类似vue或者react中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面. 自定义组件的使用 1. 创建组件(js,json,wxml,wx ...
- 微信小程序之自定义组件(微信小程序完结)
微信小程序 自定义组件 类似vue或者react中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面. 1.1 创建自定义组件 类似于页面,一个自定义组件由 json, wxml, wxss ...
- 微信小程序中自定义组件
文章目录 小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 自定义组件 compone ...
- 微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
- 【微信小程序】自定义组件的实现及数据交互
简单的自定义组件 本文的使用场景是:多个页面都需要用到拨打电话功能,为减少代码量.便于维护,所以自定义了一个组件,每个页面直接调用即可.基本实现下图样式: 下面我们来一步步的实现它: step1:创建 ...
- 微信小程序 - 在自定义组件中请求后端 API 数据接口(引入该组件的页面触发)组件在哪个生命周期钩子函数中请求接口数据呢?
前言 我开发了一个 A 页面,然后在 A 页面引入了一个组件 B ,我想在 B 组件中加载进来的时候执行一个后端请求,获取数据进行 B 组件渲染. 今天遇到这么一个问题,我写好的小程序 组件(comp ...
- 微信小程序 12 自定义组件
12.1 自定义组件的学习 排行榜的结构 我们可以 使用 recommendContainer.header 部分的 写法. 那么也就是说,它俩可以是 长的一毛一样的.那么 我们是否 可以 进行一个 ...
最新文章
- 无线红外探测器02-硬件设计
- android相机保存文件为空,相机不保存到指定的文件位置android
- 【♻️markdown之一次编写,到处使用♻️】markdown文件转word
- 音视频技术开发周刊 81期
- 操作系统:第一章 计算机系统概述
- Redis--事务理解
- sessionStorage和localStorage的用法,不同点和相同点
- oracle联合主键怎么找,Oracle数据库联合主键
- mysql连接非常慢的觖决办法及其它常见问题解决办法
- .sh文件怎么写_typeScript 配置文件该怎么写?
- 二次元HTML导航页网站源码
- imagemagick, imagick和magickwand的安装
- python遍历目录下所有文件
- linux中安装yum简单方法
- 手机浏览器设置为纯净百度主页 去除百度首页推送
- 考研常识:考研加分和照顾政策有哪些?
- 人们把使用计算机的能力和人生成功,等量齐观的意思
- 不要再叫自己“程序员”了
- 2019年中国社交电商行业市场分析:社交电商巨头已浮出水面
- 解决win10搜索框无法搜索本地应用或无反应