微信小程序自定义组件


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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
vue2单元测试环境搭建
May 24 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 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中获取文件扩展名的N种方法小结
2012/02/27 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
两款万能的php分页类
2015/11/12 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
JQuery球队选择实例
2015/05/18 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
浅谈Python 对象内存占用
2016/07/15 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
简单了解python代码优化小技巧
2019/07/08 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
汽车维修专业个人求职信范文
2014/01/01 职场文书
党员违纪检讨书
2014/02/18 职场文书
社团活动总结模板
2014/06/30 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
2014年路政工作总结
2014/12/10 职场文书
大四学生个人总结
2015/02/15 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL