微信小程序自定义组件


Posted in Javascript onAugust 16, 2017

前言

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

toast自定义组件实现

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

目录结构

|------components
        |------toast
                |------toast.js
                |------toast.wxml
                |------toast.wxss

代码

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)的功能,在业务复杂的项目中,大大提高代码的可复用 性和可维护性。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 #Javascript
微信小程序多列选择器range-key使用详解
Mar 30 #Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 #jQuery
微信小程序tabBar底部导航中文注解api详解
Aug 16 #Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 #Javascript
微信小程序开发animation心跳动画效果
Aug 16 #Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 #Javascript
You might like
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
JS 类型转换常见方法小结
2010/05/31 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Python查询IP地址归属完整代码
2017/06/21 Python
深入理解Django的自定义过滤器
2017/10/17 Python
django实现用户登陆功能详解
2017/12/11 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
Python必须了解的35个关键词
2020/07/16 Python
python matplotlib库的基本使用
2020/09/23 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
幼儿如何来做好自我评价
2013/11/05 职场文书
活动志愿者自荐信
2014/01/27 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python