前言

  • 最近接触微信小程序,再次之前公司用的前端框架是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)的功能,在业务复杂的项目中,大大提高代码的可复用 性和可维护性。
  • 公司小程序只有我一个人开发,不存在多人协作开发小程序的情况,在这方面下的功夫不多。

欢迎体验

微信小程序入坑之自定义组件的更多相关文章

  1. 微信小程序学习笔记四 自定义组件

    1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件 ...

  2. 微信小程序各类型的自定义组件篇

    由于本人最近在开发小程序项目,期间对小程序有花点时间去研究,同时也找了网上大牛的一些案例,在这里分享部分自定义组件,部分代码是copy大牛案例的,有对小程序有兴趣的伙伴拿走,不谢! 源码下载地址:ht ...

  3. 适用于 Mpvue 的微信小程序富文本解析自定义组件

    废话不多说,直接上方法: 首先 npm 安装 mpvue-wxparse npm i mpvue-wxparse 接下来:使用 <template> <div> <wxP ...

  4. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  5. 小程序-文章:微信小程序常见的UI框架/组件库总结

    ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小 ...

  6. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  7. 两百条微信小程序跳坑指南(不定时更新)

    微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...

  8. 微信小程序爬坑日记

    新公司上手小程序.30天,从入门到现在,还没放弃... 虽然小程序发布出来快一年了,爬坑的兄弟们大多把坑都踩平了.而我一直停留在"Hello World"的学习阶段.一来没项目,只 ...

  9. 微信小程序开发之路之组件化

    类似于页面,自定义组件拥有自己的 wxml 模版和 wxss 样式. 官方链接 组件化,反过来理解,写重复的页面,方法,写第二遍就烦了,抽取出来就是组件化,可以理解为公用的方法 对于通用的数据,最先想 ...

随机推荐

  1. nginx+uwsgi+django+celery+supervisord环境部署

    前言 很久没更博客了,最近新写了一个小项目,后边有时间把一些心得放上来,先把环境的部署方式整理出来. 部署过程 先将环境的python升级为2.7 保证有pip 安装了nginx并配置 vim /Da ...

  2. HDU 1907 (博弈) John

    参见上一篇博客,里面有分析和结论. #include <cstdio> int main() { int T; scanf("%d", &T); while(T ...

  3. zabbix电话告警V1

    最近决定将夜班值班人员取消,夜里告警采用机器人电话通知.总结一下这么几个情况,有问题还请指出,希望也能给大家多一个思路. V1做的太糙了,预计年初上V2 一.用谁家的服务 费用我没有太关注,主要就是看 ...

  4. springboot中的406(Not Acceptable)错误

    今天遇到一个很奇怪的问题,我用springboot开发时,用ajax请求服务想返回json数据,页面总是报406错误,这个错误使我郁闷了很久,原来我的后台服务是这么写的 看到没value的后面有个.h ...

  5. view和activity的区别(转)

    activity相当于控制部分,view相当于显示部分.两者之间是多对多的关系,所有东西必须用view来显示. viewGroup继承自view,实现了ViewManager,ViewParent接口 ...

  6. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

  7. Spring中Druid链接池的配置

    本文记录了使用Druid的方法, 包括Spring和Spring boot中使用Druid的配置方法. Spring中配置Druid连接池 以链接mysql为例 1 添加druid依赖 <dep ...

  8. Sql Server 默认值

    --1.取得数据库所有表的默认值: select t3.name as 表名,t1.name as 字段名,t2.text as 默认值 ,t4.name from syscolumns t1,sys ...

  9. Oracle10.2.0.1以及其他版本升级Oracle10.2.0.5的简单步骤

    Oracle没有发布 完整版的 Oracle 10.2.0.5 的安装包,只能是通过安装完10.2.0.4 之后再升级10.2.0.5 这一点挺坑的. 建安记录一下步骤. 1. 挂载Oracle10. ...

  10. Requests 源码阅读笔记

    models.py class Request(RequestHooksMixin): def __init__(self, method=None, url=None, headers=None, ...