imaxing

imaxing 查看完整档案

其它编辑  |  填写毕业院校  |  填写所在公司/组织 imaxing.github.io/blog/ 编辑
编辑

快快乐乐写 bug ^_^

个人动态

imaxing 赞了回答 · 6月19日

解决vue axios 的同步问题

哈哈,看几年前的问题,那 个时候是前端新手。现在这种问题已经不是问题了。

关注 4 回答 4

imaxing 关注了标签 · 2019-11-13

flutter

clipboard.png

Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量原生 UI 的移动 SDK。

Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Flutter 官网:https://flutter.dev/
Flutter 中文资源:https://flutter-io.cn/
Flutter Github:https://github.com/flutter/fl...

关注 948

imaxing 关注了用户 · 2019-10-18

骆驼祥子 @luotuoxiangzi

http://www.wx1234.cn 基于微信第三方开发平台,辅助公众号运营,关注后回复多条消息,免开发推送模版消息,自定义菜单,粉丝管理,公众号运营活动,微信支付,运营红包,营销管理

关注 13

imaxing 关注了标签 · 2019-09-17

taro

Taro是一套遵循React语法规范的多端开发解决方案。

项目地址:https://taro.aotu.io/

现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用Taro,我们可以只书写一套代码,再通过Taro的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等)运行的代码。

React 语法风格

Taro遵循React语法规范,它采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时支持使用JSX 语法,让代码具有更丰富的表现力,使用Taro进行开发可以获得和 React 一致的开发体验。

代码示例

import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'

export default class Index extends Component {
  constructor () {
    super(...arguments)
    this.state = {
      title: '首页',
      list: [1, 2, 3]
    }
  }

  componentWillMount () {}

  componentDidMount () {}

  componentWillUpdate (nextProps, nextState) {}

  componentDidUpdate (prevProps, prevState) {}

  shouldComponentUpdate (nextProps, nextState) {
    return true
  }

  add = (e) => {
    // dosth
  }

  render () {
    return (
      <View className='index'>
        <View className='title'>{this.state.title}</View>
        <View className='content'>
          {this.state.list.map(item => {
            return (
              <View className='item'>{item}</View>
            )
          })}
          <Button className='add' onClick={this.add}>添加</Button>
        </View>
      </View>
    )
  }
}
由于微信小程序端的限制,有极少数 JSX 的优秀用法暂时不能得到很好地支持,同时,为了遵循 React 语法,Taro 在写法上也有一些自己的规范,具体可以参考:Taro 开发最佳实践

快速开发微信小程序

Taro 立足于微信小程序开发,众所周知小程序的开发体验并不是非常友好,比如小程序中无法使用 npm 来进行第三方库的管理,无法使用一些比较新的 ES 规范等等,针对小程序端的开发弊端,Taro 具有以下的优秀特性

✅ 支持使用 npm/yarn 安装管理第三方依赖

✅ 支持使用 ES7/ES8 甚至更新的 ES 规范,一切都可自行配置

✅ 支持使用 CSS 预编译器,例如 Sass 等

✅ 支持使用 Redux 进行状态管理

✅ 支持使用 MobX 进行状态管理

✅ 小程序 API 优化,异步 API Promise 化等等

支持多端开发转化

Taro 方案的初心就是为了打造一个多端开发的解决方案。目前 Taro 代码可以支持转换到微信/百度/支付宝/字节跳动/QQ小程序快应用H5 端以及移动端(React Native)

关注 42

imaxing 回答了问题 · 2019-08-26

如何在antd的modal组件添加自定义按钮

<Modal footer={[<Button key='test'>测试</Button>]}></Modal>

关注 4 回答 2

imaxing 赞了文章 · 2019-08-15

Vue小说阅读器(仿追书神器)

一个vue阅读器项目,目前已升级到2.0,阅读器支持横向分页并滑动翻页(没有动画,需要动画的可以自己设置,增加transitionDuration即可)

技术栈

vue全家桶+mint-ui

github

Fakin-Reader

部署

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

实现功能

  • 小说书架
  • 分类查询
  • 书单查询
  • 排行榜
  • 搜索
  • 小说详情
  • 小说换源
  • 阅读历史记录

截图

图片描述图片描述
图片描述图片描述
图片描述

提示

换源功能已经实现,但是由于每个书源返回的书籍信息在解析的时候不会完全相同,所以在进行换源的时候,无法记录当前章节的当前页,只会记录当前章节(例如你看到了第一章第二页,当你换源阅读的时候,只会显示第一章第一页)

查看原文

赞 5 收藏 1 评论 0

imaxing 关注了标签 · 2019-07-12

next.js

next.js是一个基于React的通用JavaScript框架,next.js为React组件模型提供了扩展,支持基于服务器的组件渲染,同时也支持在客户端继续进行渲染

关注 32

imaxing 赞了文章 · 2019-07-09

我为什么要用oop去写redux业务

烦恼

是这么回事,笔者刚入门的时候就觉得写redux太难受了。写action,写types,写reducer,然后在action和reducer中注入type,等写完一个redux,可能5分钟就过去了。但是好像又没有什么办法。

const prepare = 'profile_prepare';
const success = 'profile_success';
const fail = 'profile_fail';

const getProfile = (id) => {
  return {
    [CALL_API]: {
      uri: `/profile/${id}`,
      method: 'GET',
      types: [prepare, success, fail],
    }
  };
};

const reducer = (state = {}, action) => {
    switch (action.type) {
      case prepare:
          return {
            ...state,
            loading: true,
          };
          break;
      case success:
          return {
            ...state,
            loading: false,
            action.response,
          };
          break;
      case fail:
          return {
            ...state,
            loading: false,
          };
    }
};

这种代码充斥在每一个action和reducer中。在实际项目中,可能会比这段demo更加复杂。

爆发

2018年,笔者开始尝试在项目中使用typescript,用是用上了,但是发现一个问题,那就是redux这一块的代码量增加了一倍。为什么?因为要写类型啊,reducer的类型,action的类型,各种类型都得定义。东西一多起来,整个reducer文件不堪入目。于是我就想着是否要把与业务无关的代码全部抽出来?说干就干

改革

经过几个月的打磨,总算是把代码抽出来了。对的,用面向对象的方式。
项目地址:redux-model-ts

可以这么说吧,代码减了50%,不需要再写type了。用ts的话还有100%的代码提示。

import { Model } from 'redux-model-ts';

interface Response {
  name: string;
  age: number;
}

type Data = Partial<Response>;

class Profile extends Model<Data> {
  manage = this.actionRequest({
    action: () => {
      return this.get<Response>('/api/profile');
    },
    onSuccess: (state, action) => {
      return {
        ...state,
        ...action.response,
      };
    },
    meta: true,
  });

  protected initReducer(): Data {
    return {};
  }
}

export const profile = new Profile();

这段代码包含了哪些信息?

  • 没有死角的静态代码提示
  • 定义了一个action
  • 定义了一个reducer
  • 自带loading判断 (profile.manage.useLoading())
  • action下自带reducer更新,不需要再写case
  • 一个模型能同时写多个action
  • type是内置的,已经自动对应
  • type可以通过接口取到 (profile.manage.getSuccessType())

是的,几行代码就完成了一组数据存储。不再写重复的代码,同时还有100%的提示,一旦你对reducer的操作有误,立马就报错。


没错,这是一篇软文,推荐我自己写的库。欢迎试用redux-model-ts

查看原文

赞 4 收藏 1 评论 0

imaxing 赞了文章 · 2019-02-26

前端 CSS : 5# 纯 CSS 实现24小时超市

介绍

原文链接

感謝 comehope 大佬的 [前端每日实战]

效果预览

图片描述

github.io 浏览

源代码地址

https://github.com/shanyuhai1...

代码解读

1. html 结构

命名规则使用了 BEM

<figure class="street">
  <div class="market">
  </div>
</figure>

常规样式初始化

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden;
}

2. 街道背景

街道背景分为两部分

  1. 深蓝色的天空

    .street {
      height: 100vh;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      background-color: #0b2e4e;
      overflow: hidden;
    }
  2. 黑色的地面

    .street::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 25vh;
      background-color: #000000;
    }

3. 超市

超市, 首先创建一个长方形代表超市

.market {
  position: relative;
  display: flex;
  width: 520px;
  height: 270px;
  background-color: #fffecc;
  border: 4px solid #333333;
}

接着给超市增加 24 HOURS 的标识, 需要在 market 下增加一个 span 标签

<div class="market">
  <span class="market__name">24 hours</span>
</div>

生意好的超市必然亮堂堂

.market {
  box-shadow: 0 22px 110px 12px #f5efa1;
}

增大超市(正方形的上 border ), 用于存放标识

.market {
  border-top-width: 50px;
}

将标识定位到上 border, 并给其添加发光样式

.market__name {
  position: absolute;
  top: -38px;
  left: 20px;
  font-family: sans-serif;
  font-size: 1.4em;
  letter-spacing: 0.4em;
  color: #bdf8ff;
  text-transform: uppercase;
  text-shadow: 0px 0px 9px #95cfef;
}

再给该标识添加闪烁动画

.market__name {
    animation: signboardFlashes 5s infinite alternate linear;
}

/* keyframes */
@keyframes signboardFlashes {
  0% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  37% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  72% {
    opacity: 0;
  }
  73% {
    opacity: 1;
  }
  74% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

接着需要给超市增加 4 扇门, 并基于基础的样式

<div class="market">
  <span class="market__name">24 hours</span>
  <span class="market__fold"></span>
  <span class="market__fold"></span>
  <span class="market__fold"></span>
  <span class="market__fold"></span>
</div>
.market__fold {
  position: relative;
  width: 25%;
  border: 8px solid #000000;
}
/* 此处无法在 .market__fold 使用 inset 替代 */
.market__fold::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 2px 1px #f3f1d5;
}

门是感应门, 当有生物靠近才会打开, 所以打开的动画等一下完成

4. 月亮

market 中添加 moon

<div class="market">
  <span class="moon"></span>
</div>

通过绝对定位将其移动到超市的上方, 并添加动画效果

.moon {
  position: absolute;
  top: -125px;
  left: -50px;
  width: 40px;
  height: 40px;
  background-color: #ffffc9;
  border-radius: 50%;
  box-shadow: 0 0 20px 1px #ffffc9;
  animation: moonMoves 360s infinite alternate linear;
}

@keyframes moonMoves {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(300px, -10px);
  }
  100% {
    transform: translate(600px, 0);
  }
}

5. 原地踏步的猫

market 添加 cat

<div class="market">
 <section class="cat"></section>
</div>

首先给予一个轮廓方便观察

.cat {
  --cat-color: red;
  position: absolute;
  left: -200px;
  bottom: -24px;
  width: 46px;
  height: 30px;
  margin: auto;
  color: var(--cat-color);
  background-color: var(--cat-color);
  border-radius: 30px;
}

修改猫的 DOM 结构, 添加头, 尾巴, 四肢

<section class="cat">
  <div class="cat__head"></div>
  <span class="cat__tail"></span>
  <span class="cat__leg"></span>
  <span class="cat__leg"></span>
  <span class="cat__leg"></span>
  <span class="cat__leg"></span>
</section>

然后依次给予其样式

首先是头部, 头部使用伪元素形成耳朵, 并添加头部晃动效果

.cat__head {
  position: absolute;
  right: -10px;
  top: -8px;
  width: 24px;
  height: 24px;
  background-color: inherit;
  border-radius: 50%;
  animation: catMovesHead 0.3s infinite linear;
}
.cat__head::before, .cat__head::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  background-color: inherit;
  border-radius: 2px;
}
.cat__head::before {
  left: 2px;
  transform: rotate(16deg);
}
.cat__head::after {
  right: 2px;
  transform: rotate(-16deg);
}

@keyframes catMovesHead {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2px);
  }
  100% {
    transform: translateY(0);
  }
}

添加尾巴及动画效果(尾巴由椭圆形的一半构成)

.cat__tail {
  position: absolute;
  left: -18px;
  top: -22px;
  width: 30px;
  height: 42px;
  border-radius: 50%;
  border: 7px solid var(--cat-color);
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform-origin: right;
  animation: catMovesTail 0.3s infinite linear;
}

@keyframes catMovesTail {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0);
  }
}

猫咪的四肢

.cat__leg {
  position: absolute;
  bottom: -12px;
  width: 6px;
  height: 20px;
  background-color: inherit;
  border-radius: 3px;
  transform-origin: top;
}

将四肢分开和添加动画

<span class="cat__leg cat__leg--1"></span>
<span class="cat__leg cat__leg--2"></span>
<span class="cat__leg cat__leg--3"></span>
<span class="cat__leg cat__leg--4"></span>
.cat__leg--1, .cat__leg--2 {
  left: 5px;
}
.cat__leg--3, .cat__leg--4 {
  right: 5px;
}
.cat__leg--1, .cat__leg--3 {
  transform: rotate(24deg);
  animation: catMovesLegs 0.6s infinite linear;
}
.cat__leg--2, .cat__leg--4 {
  transform: rotate(-24deg);
  animation: catMovesLegs 0.6s infinite -0.3s linear;
}


@keyframes catMovesLegs {
  0% {
    transform: rotate(36deg);
  }
  50% {
    transform: rotate(-36deg);
  }
  100% {
    transform: rotate(36deg);
  }
}

6. 猫过门开

给予猫一个整体的动画

.cat {
  animation: catRuns 20s infinite linear;
}

@keyframes catRuns {
  0% {
    transform: translateX(0) rotateY(0);
  }
  70% {
    transform: translateX(800px) rotateY(0);
  }
  71% {
    transform: translateX(1000px) rotateY(180deg);
  }
  100% {
    transform: translateX(0) rotateY(180deg);
  }
}

修改超市门的 DOM 上的 class

<span class="market__fold"></span>
<span class="market__fold market__fold--left"></span>
<span class="market__fold market__fold--right"></span>
<span class="market__fold"></span>

再增加开关门的效果, 根据上方猫的花费时间进行计算, 取一样的时间更方便一些

.market__fold--left {
  animation: doorMovesLeft 20s infinite linear;
}

.market__fold--right {
  animation: doorMovesRight 20s infinite linear;
}

@keyframes doorMovesLeft {
  0% {
    transform: translateX(0);
  }
  28% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-90%);
  }
  54% {
    transform: translateX(-90%);
  }
  56% {
    transform: translateX(0);
  }
  83% {
    transform: translateX(0);
  }
  85% {
    transform: translateX(-90%);
  }
  97% {
    transform: translateX(-90%);
  }
  99% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes doorMovesRight {
  0% {
    transform: translateX(0);
  }
  28% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(90%);
  }
  54% {
    transform: translateX(90%);
  }
  56% {
    transform: translateX(0);
  }
  83% {
    transform: translateX(0);
  }
  85% {
    transform: translateX(90%);
  }
  97% {
    transform: translateX(90%);
  }
  99% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

最后就这样大功告成了

不过记得把猫的颜色改回来

/* 猫 */
.cat {
  --cat-color: #000000;
}

7. 补充

最后切换为移动端时注意到 超市会横向占满, 通过 padding 设置一个空隙即可

.street {
  padding: 0 6vw 115px;
}

感想

最近忙着学习 Koa, 结果 CSS 感觉忘得差不多了,唉

查看原文

赞 57 收藏 37 评论 9

imaxing 回答了问题 · 2019-02-25

在Vue的SSR中,如何保存用户登录状态?

登录成功后首先将 token 存到 cookie

clipboard.png

在 nuxtServerInit action 中 更新服务端的 store 状态

clipboard.png

这个时候页面中的登录状态就可以检测到了, 亲测有效

关注 4 回答 1

认证与成就

  • 获得 82 次点赞
  • 获得 21 枚徽章 获得 1 枚金徽章, 获得 6 枚银徽章, 获得 14 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-12-20
个人主页被 705 人浏览