kkndyyrolf-优快云博客

原创支持多项目并行开发的前端脚手架

一套通用型前端脚手架，无技术栈依赖，聚焦于多人协作及工程化。可以帮助开发者快速产出项目。前端使用webpack4编译，node端使用koa2提供服务。hub可独立运行作为前端编译工具，也可配合node端部署线上服务

2020-12-18 01:10:54 648 1

最近升级了脚手架的编译层的代码，vue同学反馈过来说编译样式出现警告，记录下问题及解决方法错误信息WARNING in ../vueSample/js/index/_pages/app.vue?vue&type=style&index=0&lang=stylus& 1:469-472"export 'default' (imported as 'mod') was not found in '-!../../../../../node_modules/mini-css.

2020-12-25 00:53:14 418 1

原创解决webpack打包样式url()背景图片问题

定位错误项目使用webpack4进行编译，打包后的样式中使用url方法指定的背景图片不能够正常显示.bgurl{ background-image: url('/images/abc.jpeg')}上述样式在webpack中编译出错，配置如下// stylus[ loader: MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 2, }

2020-12-21 14:15:08 2150 1

原创监听浏览器的前进和后退按钮

项目需要兼容PC/H5，需要监听浏览器的前进和后退按钮点击并分别处理逻辑监听popstate对popstate关键字做监听方法，能够实时拦截用户点击前进按钮和后退按钮的操作，但不能够区分用户到底点击的是前进按钮还是后退按钮监听popstatewindow.addEventListener("popstate", function (evt) { callback(evt)}, false)pushState推送历史记录window.history.pushState({}, '页面标题'

2020-09-16 15:27:20 3019 1

原创把react组件封装成JS对象

aotooaotoo是一个react的封装库，将react组件js实例化，方便组件间通信GITHUB源码INSTALLyarn add @aotoo/aotoo#npm install @aotoo/aotooUSAGE 1将原生React组件封装成JS对象import createComponent from '@aotoo/aotoo'class Test extends React.Component { render(){ return ( <d

2020-09-07 13:14:51 1348

原创用javascript简单构建一个类数组对象

最近在重写web核心库文件(基于React)，预期新框架开发模式上贴近小程序原生架构(开发性一致)，组件操作便利性贴近JQUERY。JQUERY有一个非常方便的特性即元素查找，能够返回一个JQUERY封装的对象，是一个类数组对象，可以批量处理查找到的所有元素及定义一系列的方法，新框架中需要用到这样的元素查找能力。什么是类数组对象看下面的列子function test(){ console.log(arguments[0]) // a console.log(arguments[1]) /

2020-09-02 10:55:04 641

原创小程序使用Grid和css变量实现瀑布流布局

前言要实现如下瀑布流效果，动态图片，动态高度我知道使用JS能够实现完美瀑布流，但小程序不比web，坑点会比较多，因此我决定先使用CSS看能不能解决，最后实在不行在使用JS来实现根据网上的教程尝试使用css的方式(column和flex)实现效果，但排列顺序都是竖排而不是横排，不符合产品需求，实现效果如下GRID瀑布流如此看来只剩grid这一条路了，还好成功了基础版下列摘自网上使用GRID实现瀑布流的实例模板<view class="waterfall"> <vie

2020-08-12 16:51:17 1525

原创小程序的超级组件(二)，list组件

queryui是我们在项目中沉淀的小程序组件库，汲取了jquery的一些特性，使小程序更易于开发(微信原生)github小程序demoqueryui中ui-item/ui-list/ui-tree这三个非常重要的组件，我们称之为超级组件，超级组件依据标准化的数据，产出标准化的结构，赋予其样式形成不同的组件，queryui的绝大部分组件均由超级组件构成。《queryui的超级组件ITEM》超级组件LIST这一篇介绍queryui中另一个非常重要的组件ui-list，ui-list组件是ITE

2020-07-17 14:53:07 1643

原创小程序的超级组件(一)，item组件

queryui是我们在项目中沉淀的小程序组件库，汲取了jquery的一些特性，使小程序更易于开发(微信原生)github小程序demoqueryui中ui-item/ui-list/ui-tree这三个非常重要的组件，我们称之为超级组件，超级组件依据标准化的数据，产出标准化的结构，赋予其样式形成不同的组件，queryui的绝大部分组件均由超级组件构成。超级组件ITEMitem组件为组件的最小单位wxml<ui-item item="{{config}}" />jsPager

2020-07-08 15:13:25 1747

原创小程序下拉菜单组件(含多层筛选)

图例中筛选是另外一个组件一般在筛选的场景中需要使用下拉菜单，动态设置筛选条件，比如淘宝，京东的产品筛选列表，携程的旅游目的地的筛选列表。支持配置化设置弹层内容支持动态刷新弹层内容支持动态修改分类标题支持遮罩层支持api关闭弹层配置wxml模板<view class="container"> <ui-list list="{{dropdownConfig}}" /></view>jsconst Pager = require('....

2020-06-23 17:37:31 2989

原创小程序的表单的组件化封装及使用

表单示例表单一直是类web项目中开发的难点，表单涉及UI,交互，校验，接口，回填等各种坑点，设计表单模块时需要有一个统一的设计思想，在queryUI项目中，我们统一了表单的结构，丰富了表单的API，赋予了各种表单的联动支持配置化表单统一的表单结构丰富的API，简化出错，提示等操作支持任一表单元素之间的联动原生微信所有表单组件支持如何使用表单组件首先需要引入queryUI的核心库，请参考GITHUB示例代码https://github.com/webkixi/aotoo-xquery

2020-06-23 17:29:40 799

原创小程序导航栏之导航面板

导航面板导航系统起着组织内容和功能的作用，让它们按照产品的信息架构图进行连接，展现在在用户面前，导航将零散的内容和功能组织成了一个完成的有结构的系统，有时我们需要把更多的内容放置在导航栏的位置，因此需要一个导航面板导航面板是导航栏的一个扩展，从导航栏部分拖拽出导航面板，展示更多的入口支持自定义面板内容示例代码https://github.com/webkixi/aotoo-xquery => pages/navpad 配置说明const Pager = require

2020-06-14 00:55:38 311

原创小程序如何实现定位城市，定位搜索，附近1公里

一、request封装先申明一个api封装方法，为小程序get/post的promise封装，免得下面代码一团雾水rq.js/* * url {String} 请求地址接口 * data {Object} 请求参数 * param {Object} request参数 * method {String} 指定使用post或者是get方法*/export function request(url, data={}, param={}, method='POST') { retu.

2020-06-14 00:50:05 1032

原创微信小程序swiper的自适应高度

小程序组件swiper需要指定固定高度，但在某些场景中我们需要动态设置swiper的高度以完整展示swiper中的内容，比如高度不同的图片，笔者最近项目中的日历组件(31号有时会多出一行)等等，如何使swiper组件自适应高度呢？翻阅了一些网上的例子，一般的解决方法是通过设置style.height来解决<swiper style="{{style}}"> <swiper-item></swiper-item></swiper> Page

2020-05-24 00:00:14 701 1

原创微信小程序开发多形态日历组件

接受日历组件开发之前，本来是拒绝的，日历组件，表单组件绝逼是前端开发的一个噩梦，尤其要做好一个旅游项目的日历，产品的收货标准只有一条，你看携程都实现了哦, MMP的。要在小程序中实现携程app的日历，即要兼顾性能问题，还要实现很多产品非常非常合理的需求。携程的酒店系统需要日历组件确定入住时间，离店时间。需要日历组件满足以下条件横向日历纵向日历日历单选，多选，区间选择支持节假日支持数据回填难点懒加载保证渲染性能通过配置实现纵向日历和横向日历阳历节日与农历节日与节气交互，尤其是区

2020-05-21 01:20:15 561

原创小程序悬浮按钮，悬浮导航球

一个开源的悬浮按钮组件，小程序原生支持。一直很喜欢华为的导航按钮，能够完美适合大屏手机，自由停放位置，不论是左手习惯还是右手习惯，都很方便(可能我手比较小，左右上角够不着）。支持功能支持自由拖动，停放支持自定义事件(单击，双击，长按)支持自定义导航球中间的文字/图片开发难点使用wxs悬浮球的开发思路比较简单，一个view，样式position:fixed，支持拖动。在web开发中，我们能够比较容易实现这样的功能。要想在小程序中实现高性能的交互动画(touch类)，一定要了解如何使用页面.

2020-05-21 00:55:07 1676