手把手第八篇：小程序组件的使用
在上期文章中，我们主要聊了聊在小程序开发过程中，通过网络请求获取对应的服务器域名与请求接口的使用。本期文章中，我们要一起聊聊如何在开发过程中使用小程序组件。小程序的组件分为两类：
- 内置组件
- 自定义组件
本期文章属于《手把手系列教学》的第八篇，如果你还不太了解这一系列，可以点击 这里 查看详情。本期内容依然在微信小程序开发的基础上进行讲解，还请读者提前注意。
内置组件
内置组件指在小程序内部已经预先定义好的组件，开发者不需要特殊引用就可以在代码内直接使用，以下面代码为例：
<view><text>这是一个按钮</text><button bintap='foo'>按钮</button>
</view> <view>, <text>, <button> 均为内置组件。内置组件的更多使用方法可以参考微信小程序开发文档。
自定义组件
随着我们小程序开发的进行，编写的代码越来越多，页面级别的代码会越来越臃肿。这时，我们需要把代码拆分成更小粒度的单元，这样子可以让代码更易于维护，也更加容易复用。这个更小粒度的单元，也就是自定义组件。
有这么一个场景: 我们在一个页面当中，填写若干个手机号码，点击 “保存” 后把号码依次保存在 storage 的一个列表中，页面代码如下：
// wxml
<view>index 页面</view>
<view class="wrapper"><input class="weui-input" bindinput="bindKeyInput" placeholder="请输入正确的手机号码" /><button type='primary' class="weui-btn" bindtap="updateTel" size="small">保存</button>
</view>
<view class="wrapper"><input class="weui-input" bindinput="bindKeyInput" placeholder="请输入正确的手机号码" /><button type='primary' class="weui-btn" bindtap="updateTel" size="small">保存</button>
</view>
<view class="wrapper"><input class="weui-input" bindinput="bindKeyInput" placeholder="请输入正确的手机号码" /><button type='primary' class="weui-btn" bindtap="updateTel" size="small">保存</button>
</view>// js
Page({data: {tel: ''},bindKeyInput(e) {this.setData({tel: e.detail.value})},getTelList() {return wx.getStorageSync('tel')},updateTel() {let telList = this.getTelList() || []if(this.data.tel.length !== 11) {wx.showToast({title: '请输入正确手机号码',})return}telList.push(this.data.tel)wx.setStorage({key: 'tel',data: telList,success(res) {wx.showToast({title: '保存号码成功',})},fail(res) {}})}
})
```页面效果如下：
可以看到这里重复的模版代码非常多，看起来非常的臃肿。那么我们就可以把这些重复的代码抽取成一个自定义组件，然后在需要使用的地方重复调用就可以了。
比如我们可以这样操作：
第一步
我们在根目录新建一个 components 的文件夹， 然后选择新建 component
第二步
命名一个 ‘saveTel’ 的文件，就会生成组件相关的文件及基础配置
第三步
我们把原本写在页面里面的代码迁移到组件中去
// 把这部分挪到 saveTel.wxml 中
<view class="wrapper"><input class="weui-input" bindinput="bindKeyInput" placeholder="请输入正确的手机号码" /><button type='primary' class="weui-btn" bindtap="updateTel" size="small">保存</button>
</view>// 把 index.js 挪到 saveTel.js 去，如下：
// 这里要注意几点：
// 1. 组件的 js 是由 Component 构造器包裹的
// 2. 组件的方法并不是像 Page 直接放在构造器配置对象中，而是放置在更深一层的 methods 中
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {tel: ''},/*** 组件的方法列表*/methods: {bindKeyInput(e) {this.setData({tel: e.detail.value})},getTelList() {return wx.getStorageSync('tel')},updateTel() {let telList = this.getTelList() || []if(this.data.tel.length !== 11) {wx.showToast({title: '请输入正确手机号码',})return}telList.push(this.data.tel)wx.setStorage({key: 'tel',data: telList,success(res) {wx.showToast({title: '保存号码成功',})},fail(res) {}})}}
})
```第四步
经过以上步骤，我们已经把整个 ‘输入并保存手机号’ 的逻辑/模版/样式从页面抽离出了组件，接下来，我们需要在页面中引入并使用这个组件，也就是“给页面添加已经处理好的组件”。
首先，我们需要知道我们要引用的组件在哪以及叫什么名字。这两个信息我们可以到页面对应的 . json 去配置。
{"usingComponents": {"save-tel" : "/components/saveTel"}
}
// save-tel 即我们给组件的命名，这里的命名可以自己随意发挥，但是建议要达意
// /components/saveTel 即我们引用组件的路径配置完毕也代表着我们做好了组件的配置，接下来要去对应的页面模版引入组件：
// wxml
<view>index 页面</view>
<save-tel></save-tel>
<save-tel></save-tel>
<save-tel></save-tel>效果如下，测试一下确保输入以及保存等功能应该都是正常的。
至此，我们完成了从一个页面抽离公共逻辑到一个组件/组件的使用的操作。
总结
我们可以通过内置组件去实现我们小程序的基本功能，然后通过自定义组件去抽象公共模块增加小程序的复用性跟让其具有更加优雅的代码组织方式。
当然，自定义组件还有各个各样的高阶的功能，大家可以阅读微信小程序开发文档深入了解。
本期教程讲解了如何在小程序中使用组件提升开发效率。在下一期文章中，我们将会聊聊与 FinClip 相关的知识，敬请期待。
3月1日， FinClip 启动首届 Hackathon 大赛！本届黑客松一共包含三大主题赛道(内核组、生态组、创意组)，尽可能的让开发者可以找到大显身手的机会,参赛者不论是APP开发者、小程序开发者、产品经理或者UI交互，都可以找到适合的领域，围绕 FinClip 探索无限可能。
同时为了更好的激励大家产出创意，主办方准备了价值十万元的大赛奖金池！现在围观比赛还可以参加盲盒抽奖，Mac pro、人体工学椅、苹果音响等丰富礼品等你来拿！手动指引
手把手第八篇：小程序组件的使用相关推荐
- 手把手教你实现小程序中的自定义组件
之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官方对于 ...
- f2 柱状图滚动 钉钉小程序_详解钉钉小程序组件之自定义模态框（弹窗封装实现）...
背景 开发钉钉小程序中需要用到模态框 文档里也没有 自己搞一个- 效果大概长这个样 点击指定按钮,弹出模态框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关 ...
- 小程序组件库开发之抽奖游戏组件
笔者在之前写了一篇关于小程序抽奖游戏组件的文章,当时的设计比较粗糙,组件的可复用性也不是很好,这里笔者新开发了一个抽奖小游戏组件,表现形式上和可复用性上都相对之前有了不小的提升. 读者朋友可以先看一下 ...
- 小程序组件的使用（一）创建组件
小程序组件的使用(一) 创建组件 第一步:先创建components文件夹,放置整个项目的所有的组件. 第二步:在component文件夹中右键创建组件,名称为dialog. 接下来我们就需要对我们的 ...
- php 小程序即时聊天,小程序组件：聊天会话组件的介绍（附代码）
本篇文章给大家带来的内容是关于小程序组件:聊天会话组件的介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 场景 用于在线客服的聊天对话等 一.布局圈点 1.三角箭头 绘制 ...
- 微信小程序组件库开发记录
微信小程序组件库开发记录 背景 前言 技术选型 环境搭建 安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片 拷贝文件到另一个目录 删除目录 整合 创 ...
- android img标签属性_微信小程序 组件叠加效果（如 Android 中的添加蒙层）
实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果. 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置 ...
- 微信小程序组件间通信（二）
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序中通过事件,实现子组件向父组件中传递数据或操作 注:子组件向父组件中传递通过事件传递操作 通过事件参数对象det ...
- web 小程序 ch4 小程序组件
文章目录 考试: 小程序组件 组件介绍 语法格式 id等属性 组件分类 视图容器 分类 view基础视图 滚动视图 scroll-view 滑块swiper-view 需配合swiper-item,且 ...
最新文章
- 2022-2028年中国工业环保产业投资分析及前景预测报告
- linux企业常用命令必之必会二
- 104. Maximum Depth of Binary Tree
- 算法训练 最长字符串 c语言
- javaScript命名规范
- SpringBoot项目引入前端模板时，CSS、JS、HTML文件无法加载的问题
- php输出100以内素数（质数）
- 开始→运行（cmd）命令大全（绝对经典）
- shell脚本之循环语句
- 启动springboot项目APPLICATION FAILED TO START
- 老牛知点所以然-Qt安装后一行命令解决:libxcb-util.so.1 =＞ not found
- 关于GPIO的内部结构及编程步骤
- android获取进程内存使用信息、一键加速（内存清理）与进程重要级别解析
- 多模态模型 CLIP4Clip 带你实现文本与视频互搜
- matlab中scalar意思,scalar是什么意思_scalar的翻译_音标_读音_用法_例句_爱词霸在线词典...
- python 不能读取xlsx格式的excel解决方案，安装1.2.0版本
- java指数表示法_Java指数计数法详解
- 计算机存在其他连接设备错误,电脑连不上宽带,一直提示”调制解调器(或其它联接设备)报告了一个错误。“...
- 全新浪子云支付开源版源码
- 打工人抛弃办公室，微软丢掉「Office」
热门文章