<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/kkndyyrolf</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; kkndyyrolf]]></copyright><item><title><![CDATA[webpack4编译vue样式时错误]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/111641618</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/111641618</guid><author>kkndyyrolf</author><pubDate>Fri, 25 Dec 2020 00:53:14 +0800</pubDate><description><![CDATA[最近升级了脚手架的编译层的代码，vue同学反馈过来说编译样式出现警告，记录下问题及解决方法
错误信息
WARNING in ../vueSample/js/index/_pages/app.vue?vue&amp;type=style&amp;index=0&amp;lang=stylus&amp; 1:469-472
"export 'default' (imported as 'mod') was not found in '-!../../../../../node_modules/mini-css.]]></description><category></category></item><item><title><![CDATA[解决webpack打包样式url()背景图片问题]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/111473933</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/111473933</guid><author>kkndyyrolf</author><pubDate>Mon, 21 Dec 2020 14:15:08 +0800</pubDate><description><![CDATA[定位错误
项目使用webpack4进行编译，打包后的样式中使用url方法指定的背景图片不能够正常显示
.bgurl{
  background-image: url('/images/abc.jpeg')
}

上述样式在webpack中编译出错，配置如下
// stylus
[
  loader: MiniCssExtractPlugin.loader,
  {
    loader: 'css-loader',
    options: {
      importLoaders: 2,
    }
 ]]></description><category></category></item><item><title><![CDATA[支持多项目并行开发的前端脚手架]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/111351444</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/111351444</guid><author>kkndyyrolf</author><pubDate>Fri, 18 Dec 2020 01:10:54 +0800</pubDate><description><![CDATA[一套通用型前端脚手架，无技术栈依赖，聚焦于多人协作及工程化。可以帮助开发者快速产出项目。前端使用webpack4编译，node端使用koa2提供服务。hub可独立运行作为前端编译工具，也可配合node端部署线上服务]]></description><category></category></item><item><title><![CDATA[监听浏览器的前进和后退按钮]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/108623144</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/108623144</guid><author>kkndyyrolf</author><pubDate>Wed, 16 Sep 2020 15:27:20 +0800</pubDate><description><![CDATA[项目需要兼容PC/H5，需要监听浏览器的前进和后退按钮点击并分别处理逻辑
监听popstate
对popstate关键字做监听方法，能够实时拦截用户点击前进按钮和后退按钮的操作，但不能够区分用户到底点击的是前进按钮还是后退按钮
监听popstate
window.addEventListener("popstate", function (evt) {
  callback(evt)
}, false)

pushState推送历史记录
window.history.pushState({}, '页面标题']]></description><category></category></item><item><title><![CDATA[把react组件封装成JS对象]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/108446059</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/108446059</guid><author>kkndyyrolf</author><pubDate>Mon, 07 Sep 2020 13:14:51 +0800</pubDate><description><![CDATA[aotoo
aotoo是一个react的封装库，将react组件js实例化，方便组件间通信
GITHUB源码
INSTALL
yarn add @aotoo/aotoo
#
npm install @aotoo/aotoo

USAGE 1
将原生React组件封装成JS对象
import createComponent from '@aotoo/aotoo'

class Test extends React.Component {
  render(){
    return (
      &lt;d]]></description><category></category></item><item><title><![CDATA[用javascript简单构建一个类数组对象]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/108357887</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/108357887</guid><author>kkndyyrolf</author><pubDate>Wed, 02 Sep 2020 10:55:04 +0800</pubDate><description><![CDATA[最近在重写web核心库文件(基于React)，预期新框架开发模式上贴近小程序原生架构(开发性一致)，组件操作便利性贴近JQUERY。
JQUERY有一个非常方便的特性即元素查找，能够返回一个JQUERY封装的对象，是一个类数组对象，可以批量处理查找到的所有元素及定义一系列的方法，新框架中需要用到这样的元素查找能力。
什么是类数组对象
看下面的列子
function test(){
  console.log(arguments[0])  // a
  console.log(arguments[1])  /]]></description><category></category></item><item><title><![CDATA[小程序使用Grid和css变量实现瀑布流布局]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/107961265</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/107961265</guid><author>kkndyyrolf</author><pubDate>Wed, 12 Aug 2020 16:51:17 +0800</pubDate><description><![CDATA[前言
要实现如下瀑布流效果，动态图片，动态高度

我知道使用JS能够实现完美瀑布流，但小程序不比web，坑点会比较多，因此我决定先使用CSS看能不能解决，最后实在不行在使用JS来实现
根据网上的教程尝试使用css的方式(column和flex)实现效果，但排列顺序都是竖排而不是横排，不符合产品需求，实现效果如下

GRID瀑布流
如此看来只剩grid这一条路了，还好成功了
基础版
下列摘自网上使用GRID实现瀑布流的实例
模板
&lt;view class="waterfall"&gt;
  &lt;vie]]></description><category></category></item><item><title><![CDATA[小程序的超级组件(二)，list组件]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/107408323</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/107408323</guid><author>kkndyyrolf</author><pubDate>Fri, 17 Jul 2020 14:53:07 +0800</pubDate><description><![CDATA[queryui是我们在项目中沉淀的小程序组件库，汲取了jquery的一些特性，使小程序更易于开发(微信原生)
github
小程序demo

queryui中ui-item/ui-list/ui-tree这三个非常重要的组件，我们称之为超级组件，超级组件依据标准化的数据，产出标准化的结构，赋予其样式形成不同的组件，queryui的绝大部分组件均由超级组件构成。

《queryui的超级组件ITEM》

超级组件LIST
这一篇介绍queryui中另一个非常重要的组件ui-list，ui-list组件是ITE]]></description><category></category></item><item><title><![CDATA[小程序的超级组件(一)，item组件]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/107206527</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/107206527</guid><author>kkndyyrolf</author><pubDate>Wed, 08 Jul 2020 15:13:25 +0800</pubDate><description><![CDATA[queryui是我们在项目中沉淀的小程序组件库，汲取了jquery的一些特性，使小程序更易于开发(微信原生)
github
小程序demo

queryui中ui-item/ui-list/ui-tree这三个非常重要的组件，我们称之为超级组件，超级组件依据标准化的数据，产出标准化的结构，赋予其样式形成不同的组件，queryui的绝大部分组件均由超级组件构成。
超级组件ITEM
item组件为组件的最小单位
wxml
&lt;ui-item item="{{config}}" /&gt;

js
Pager]]></description><category></category></item><item><title><![CDATA[小程序下拉菜单组件(含多层筛选)]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/106928413</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/106928413</guid><author>kkndyyrolf</author><pubDate>Tue, 23 Jun 2020 17:37:31 +0800</pubDate><description><![CDATA[图例中筛选是另外一个组件

一般在筛选的场景中需要使用下拉菜单，动态设置筛选条件，比如淘宝，京东的产品筛选列表，携程的旅游目的地的筛选列表。
支持

配置化设置弹层内容
支持动态刷新弹层内容
支持动态修改分类标题
支持遮罩层
支持api关闭弹层

配置
wxml模板
&lt;view class="container"&gt;
  &lt;ui-list list="{{dropdownConfig}}" /&gt;
&lt;/view&gt;

js
const Pager = require('....]]></description><category></category></item><item><title><![CDATA[小程序的表单的组件化封装及使用]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/106928247</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/106928247</guid><author>kkndyyrolf</author><pubDate>Tue, 23 Jun 2020 17:29:40 +0800</pubDate><description><![CDATA[表单示例
表单一直是类web项目中开发的难点，表单涉及UI,交互，校验，接口，回填等各种坑点，设计表单模块时需要有一个统一的设计思想，在queryUI项目中，我们统一了表单的结构，丰富了表单的API，赋予了各种表单的联动支持

配置化表单
统一的表单结构
丰富的API，简化出错，提示等操作
支持任一表单元素之间的联动
原生微信所有表单组件支持

如何使用表单组件
首先需要引入queryUI的核心库，请参考GITHUB
示例代码
https://github.com/webkixi/aotoo-xquery ]]></description><category></category></item><item><title><![CDATA[小程序导航栏之导航面板]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/106741067</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/106741067</guid><author>kkndyyrolf</author><pubDate>Sun, 14 Jun 2020 00:55:38 +0800</pubDate><description><![CDATA[导航面板
导航系统起着组织内容和功能的作用，让它们按照产品的信息架构图进行连接，展现在在用户面前，导航将零散的内容和功能组织成了一个完成的有结构的系统，有时我们需要把更多的内容放置在导航栏的位置，因此需要一个导航面板
导航面板是导航栏的一个扩展，从导航栏部分拖拽出导航面板，展示更多的入口
  

支持自定义面板内容


示例代码
https://github.com/webkixi/aotoo-xquery  
=&gt; pages/navpad  

配置说明
const Pager = require]]></description><category></category></item><item><title><![CDATA[小程序如何实现定位城市，定位搜索，附近1公里]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/106741023</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/106741023</guid><author>kkndyyrolf</author><pubDate>Sun, 14 Jun 2020 00:50:05 +0800</pubDate><description><![CDATA[一、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.]]></description><category></category></item><item><title><![CDATA[微信小程序swiper的自适应高度]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/106308554</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/106308554</guid><author>kkndyyrolf</author><pubDate>Sun, 24 May 2020 00:00:14 +0800</pubDate><description><![CDATA[小程序组件swiper需要指定固定高度，但在某些场景中我们需要动态设置swiper的高度以完整展示swiper中的内容，比如高度不同的图片，笔者最近项目中的日历组件(31号有时会多出一行)等等，如何使swiper组件自适应高度呢？
翻阅了一些网上的例子，一般的解决方法是通过设置style.height来解决
&lt;swiper
  style="{{style}}"
&gt;
  &lt;swiper-item&gt;&lt;/swiper-item&gt;
&lt;/swiper&gt;

  Page]]></description><category></category></item><item><title><![CDATA[微信小程序开发多形态日历组件]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/106248041</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/106248041</guid><author>kkndyyrolf</author><pubDate>Thu, 21 May 2020 01:20:15 +0800</pubDate><description><![CDATA[接受日历组件开发之前，本来是拒绝的，日历组件，表单组件绝逼是前端开发的一个噩梦，尤其要做好一个旅游项目的日历，产品的收货标准只有一条，你看携程都实现了哦, MMP的。要在小程序中实现携程app的日历，即要兼顾性能问题，还要实现很多产品非常非常合理的需求。


携程的酒店系统需要日历组件确定入住时间，离店时间。需要日历组件满足以下条件

横向日历
纵向日历
日历单选，多选，区间选择
支持节假日
支持数据回填

难点

懒加载保证渲染性能
通过配置实现纵向日历和横向日历
阳历节日与农历节日与节气
交互，尤其是区]]></description><category></category></item><item><title><![CDATA[小程序悬浮按钮，悬浮导航球]]></title><link>https://blog.youkuaiyun.com/kkndyyrolf/article/details/106248005</link><guid>https://blog.youkuaiyun.com/kkndyyrolf/article/details/106248005</guid><author>kkndyyrolf</author><pubDate>Thu, 21 May 2020 00:55:07 +0800</pubDate><description><![CDATA[一个开源的悬浮按钮组件，小程序原生支持。
一直很喜欢华为的导航按钮，能够完美适合大屏手机，自由停放位置，不论是左手习惯还是右手习惯，都很方便(可能我手比较小，左右上角够不着）。
支持功能

支持自由拖动，停放
支持自定义事件(单击，双击，长按)
支持自定义导航球中间的文字/图片

开发难点
使用wxs
悬浮球的开发思路比较简单，一个view，样式position:fixed，支持拖动。在web开发中，我们能够比较容易实现这样的功能。要想在小程序中实现高性能的交互动画(touch类)，一定要了解如何使用页面.]]></description><category></category></item></channel></rss>