微信小程序自定义组件

2024-10-09 04:09:13

前言

最近接触微信小程序，再次之前公司用的前端框架是vue ，然后对比发现，开发小程序是各种限制，对于开发者非常不友好。各种槽点太多，完全吐槽不过来，所以在此不多说，打算下次专门写一篇文章吐槽一下。本次主要分享下小程序自定义组件的一点思路，小程序官方提供的框架比较简陋，原始，可复用较差，没有实现自定义组件的功能，这让很多使用vue ,react前端开发非常难受。网上存在各种吐槽，也有分享实现自定义组件的方法，但是要么过于复杂，要么是微信小程序升级之后就不兼容，反正是各种坑你没商量。在这分享下本人在项目中是如何实现的，欢迎指正批评，互相学习。

toast自定义组件实现

这里用最简单的toast组件为例子
官方框架只提供了页面模板功能： WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
但是这个功能不支持js，样式封装，需要在对应的页面做处理，且模板还有自己的作用域，需要使用data传入。
把功能封装成独立的组件，需要和页面独立，在使用时将组件挂载到对应的页面，所以组件需要传入页面this(Page)对象，实现代码如下

目录结构

代码

toast.wxml

<template name='toast'>
  <view class="s-toast" wx:if="{{msg}}">
    <view class="s-toast-content">{{msg}}</view>
  </view>
</template>

toast.js

/**
 * toastMsg 必传 提示内容
 * showTime 非必传 显示时间秒
*/
function toast(page, toastMsg, showTime) {
  let timer
  page.setData({ toastMsg })
  showTime = showTime || toastMsg.length / 4
  console.log(showTime)
  clearTimeout(timer)
  timer = setTimeout(() => {
    page.setData({ toastMsg: '' })
    clearTimeout(timer)
  }, showTime * 1000)
}

module.exports = {
  toast: toast,
}
toast.wxss
.s-toast-content {
  position: fixed;
  left: 50%;
  color: #fff;
  width: 500rpx;
  bottom: 120rpx;
  background: hsla(0,0%,7%,.7);
  padding: 15rpx;
  text-align: center;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 4rpx;
  z-index: 6999;
}

使用方法

1、wxml引用页面模板

2、js 文件引用 toast.js

import { toast } from '../../../project/component/toast/toast.js'

3、调用

toast(this, '填写详细信息')

改进及更多扩展

实际项目中会有toast confirm loading ···等多个通用组件，还有大量的业务组件，我们可以把js都引入到一个js文件中，然后在页面加载的时候（onLoad方法）中注册this(page)，这样只需要注册一次便可以使用所有的组件，如

toast(this,'填写详细信息'')

变成

toast('填写详细信息'')

同样的思路，我们可以实现类似vue中混合（mixin）的功能，在业务复杂的项目中，大大提高代码的可复用性和可维护性。

公司小程序只有我一个人开发，不存在多人协作开发小程序的情况，在这方面下的功夫不多。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序倒计时组件实现代码

功能: 适用于电商应用的限时团购.商品秒杀等先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段代码. wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) { var second = that.data.second
微信小程序（十一）icon组件详细介绍

这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml  <icon type="success" size="40"/>  <icon type="safe_success" size="40"/>  <icon type="i
微信小程序 swiper组件轮播图详解及实例

微信小程序 swiper组件轮播图照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml  <swiper class="swiper" indicator-dots="t
微信小程序（十）swiper组件详细介绍

Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScrollerView去实现,这个swiper封装的相对还是方便的,使用方式也相对那俩容易些. 主要属性: 属性只需要设置就行了也可以抽到js文件的data中进行数据绑定,监听使用bindchange,在js中做业务处理. wxml  <swiper indicator-dot
微信小程序 Button 组件详解及简单实例

微信小程序 Button 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现实例效果图: 属性名类型默认值说明 size String default 有效值default, mini type String default 按钮的样
微信小程序 (十七)input 组件详细介绍

input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试主要属性: wxml  <view class="inputView" style="margin-top: 40% "> <input class="input" type="number"
微信小程序（九）scroll-view组件详细介绍

scroll-view为滚动视图,分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块主要属性: 使用演示: wxml  <scroll-view scroll-y="true" style="height: 200px"> <view style="background: r
微信小程序（十四）button组件详细介绍

button按钮用的算是最普遍的组件之一. 主要属性: wxml  <button type="defaule" bindtap="clickButton">Defalut</button>  <button type="primary" disabled="true" loading=
微信小程序 loading 组件实例详解

loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml  <button type="primary" bindtap="listenerButton">显示loading</button>  <loading hidden="{{hiddenLoading}}">正在加载</loading>
微信小程序 Image组件实例详解

image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源,都用src属性去指定. 重点属性: 三种缩放模式九种剪切方式 wxml <!--3中是缩放模式 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来.也就是说,可以完整地将图片显示出来. aspectFill 保持纵横比缩放图片,只保证图片

微信小程序自定义组件

相关推荐

随机推荐