微信小程序自定义组件


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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
vue addRoutes路由动态加载操作
Aug 04 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
星际中的相关伤害
2020/03/04 星际争霸
PHP 中文处理技巧
2010/04/25 PHP
PHP多个版本的分析解释
2011/07/21 PHP
php开启openssl的方法
2014/05/15 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
在Python中移动目录结构的方法
2016/01/31 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
python+pyqt5编写md5生成器
2019/03/18 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
python爬虫基础之urllib的使用
2020/12/31 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
文明教师事迹材料
2014/01/16 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
关于运动会的广播稿
2014/09/22 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
薪资证明范本
2015/06/19 职场文书
教师节祝酒词
2015/08/11 职场文书
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python