微信小程序自定义组件


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 相关文章推荐
jQuery 前的按键判断代码
Mar 19 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
JavaScript面向对象精要(上部)
Sep 12 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 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 sprintf()函数用例解析
2011/05/18 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
PHP类的封装与继承详解
2015/09/29 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
php session的应用详细介绍
2017/03/22 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Python 装饰器使用详解
2017/07/29 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
tensorflow 变长序列存储实例
2020/01/20 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
《九色鹿》教学反思
2014/02/27 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
队名及霸气口号大全
2015/12/25 职场文书
Elasticsearch 基本查询和组合查询
2022/04/19 Python