分类 JavaScript 下的文章

使用 Lodash 过滤 Object 值为 undefind、null

作者: Chuwen
时间: 2023-03-31
分类: JavaScript
评论

Shopify Partner 使用 JS 一键创建店铺

作者: Chuwen
时间: 2022-12-28
分类: JavaScript
评论

# Shopify Partner 使用 JS 一键创建店铺

免去繁琐的操作步骤

### 第 1 步

打开 https://partners.shopify.com/organizations

> 如果没有登录需要先登录

### 第 2 步

打开浏览器**开发者工具**，以 Chrome 为例，按 F12 即可打开

### 第 3 步

> 请注意修改代码的 `subdomain` 和 `storeName` 值

在**开发者工具**找到 `Console` Tab，然后粘贴以下代码，按 `Enter` 键运行即可

### 第 4 步

等待大概 20s 左右，因为创建店铺需要比较长的时间，创建成功后，会自动打开你新创建的店铺

```js
var organizationID = window.RailsData.user.organizationID
var subdomain = 'test-008'
var storeName = subdomain.replaceAll("-", " ").toUpperCase()

fetch(`https://partners.shopify.com/${organizationID}/api/graphql`, {
  headers: {
    'content-type': 'application/json',
    'x-csrf-token': document.querySelector(`meta[name="csrf-token"]`).content
  },
  body: JSON.stringify({
    operationName: "ShopCreate",
    variables: {
      input: {
        storeType: "PARTNER_TEST_STORE",
        developerPreviewHandle: "checkout_extensibility",
        storeName,
        address: {
          countryCode: 'US'// 国家
        },
        subdomain,
        signupSourceDetails: 'test_app_or_theme'
      }
    },
    query: "mutation ShopCreate($input: ShopCreateInput!) {\n  shopCreate(input: $input) {\n    redirectUrl\n    userErrors {\n      field\n      message\n      __typename\n    }\n    __typename\n  }\n}\n"
  }),
  method: 'POST',
  mode: 'cors',
  credentials: 'include'
})
    .then((response) => response.json())
    .then((data) => {
      console.log('创建店铺成功！', data);
      window.open(data.shopifyCreate.redirectUrl, "_blank")
    })
    .catch((error) => {
      console.error('创建店铺失败！', error);
      alert(`创建店铺失败！${error}`)
    });
```

---

Gist: https://gist.github.com/PrintNow/067f1d494a2f723e1486d9527997942ca

Laravel mix + TailwindCSS 运行 npm run watch 无限重新编译 CSS

作者: Chuwen
时间: 2022-05-21
分类: JavaScript
评论

先说答案，参考的是：https://github.com/laravel-mix/laravel-mix/issues/1942

## 序言

最近在筹划着本博客新主题设计，想运用现代化前端技术，再加之对 Laravel mix 有一定的使用经验，所以选择了 Laravel mix 作为脚手架

## 问题

`webpack.mix.js` 配置：

```js
const mix         = require('laravel-mix');
require('mix-tailwindcss');

mix.disableSuccessNotifications()
    .ts('src/app.ts', 'theme/assets')
    .setPublicPath('theme/assets')
    .sass("src/assets/sass/app.scss", "theme/assets")
    .tailwind('./tailwind.config.js')
    .webpackConfig({
      module: {
        rules: [
          {
            test:    /\.tsx?$/,
            loader:  "ts-loader",
            exclude: /node_modules/
          }
        ]
      }
    })

mix.browserSync({
  proxy: '127.0.0.1:3792',
  files: ["theme/**/*.php", "src/*.js", "src/*.css"],
  open:  false
})
```

`tailwind.config.js` 配置：
```js
module.exports = {
  content: require('fast-glob').sync([
    './src/**/*.{html,js,ts}',
    './node_modules/tw-elements/dist/js/**/*.js',
    './theme/**/*.php'
  ]),
  theme:   {
    extend: {},
  },
  plugins: [
    require('tw-elements/dist/plugin')
  ],
}
```

使用上述的配置，然后运行 `npm run watch`，就看到终端一直闪烁着编译结果，然后电脑风扇呼呼狂啸：
![](https://cdn.nowtime.cc/2022/05/21/912061657.png)

## 解决方案

还好我用 Google + 英文搜索（用的蹩脚英文 ?），然后找到了这个 **issues**：
https://github.com/laravel-mix/laravel-mix/issues/1942

翻啊翻，发现这个人给出的解决方案是可行的：https://github.com/laravel-mix/laravel-mix/issues/1942#issuecomment-998148038

1. 首先安装 `glob`
 - npm：`npm install fast-glob -D`
 - yarn：`yarn add fast-glob -D`

2. 然后将 `tailwind.config.js` 改为：

```js
module.exports = {
    // 看这里
    content: require('fast-glob').sync([
    './src/**/*.{html,js,ts}',
    './node_modules/tw-elements/dist/js/**/*.js',
    './theme/**/*.php'
    ]),
    theme: {
        extend: {},
    },
    plugins: [],
}
```

然后就完美解决了

Swiper.js 报错: Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd

作者: Chuwen
时间: 2021-11-30
分类: JavaScript
评论

解决 Swiper.js 无限滚动（跑马灯）手动滑动后会干扰移动效果

作者: Chuwen
时间: 2021-11-30
分类: JavaScript
评论

### 预期效果

向左、向右滑动后，松开鼠标/手，必须按照初始移动方向移动，并且移动速度不能有太大的变化

### 解决办法就是：

设置 `freeMode.momentumRatio` 设置的小一点，比如 `0.01`
设置 `freeMode.momentumBounce` 为 `false`

在线预览：https://codepen.io/printnow/pen/ZEXEajW

** freeMode** 参数：

| 参数                                                         | 类型                        | 默认值 | 备注                                                         |
| ------------------------------------------------------------ | --------------------------- | ------ | ------------------------------------------------------------ |
| [enabled](https://swiperjs.com/swiper-api#param-freeMode-enabled) | `boolean | FreeModeOptions` |        启用自由模式功能。对象的自由模式参数或布尔值为 `true` 以启用默认设置。 |
| [minimumVelocity](https://swiperjs.com/swiper-api#param-freeMode-minimumVelocity) | `number`                    | 0.02   | 触发自由模式动量所需的最小接触移动速度                       |
| [momentum](https://swiperjs.com/swiper-api#param-freeMode-momentum) | `boolean`                   | true   | 如果启用，则在释放滑块后，滑块将继续移动一段时间             |
| **[momentumBounce](https://swiperjs.com/swiper-api#param-freeMode-momentumBounce)** | `boolean`                   | true   | 如果要在自由模式下禁用动量反弹，请设置为 `false`             |
| [momentumBounceRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumBounceRatio) | `number`                    | 1      | 值越大，动量反弹效应越大                                     |
| **[momentumRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumRatio)** | `number`                    | 1      | 释放滑块后，该值越大，动量距离越大                           |
| [momentumVelocityRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumVelocityRatio) | `number`                    | 1      | 释放滑块后，该值越高，动量速度越大                           |
| [sticky](https://swiperjs.com/swiper-api#param-freeMode-sticky) | `boolean`                   | false  | 设置为 `true` 可在自由模式(`freeMode`)下启用捕捉幻灯片位置   |

### JS 代码：

> 如果你是按照模块导入的，一定要导入 `FreeMode` 模块！

```js
import 'swiper/css';
import Swiper, {Autoplay, FreeMode} from 'swiper';

Swiper.use([Autoplay, FreeMode]);

let itemCount = parseInt(u('.swiper-wrapper').data('item-count'));

const swiper = new Swiper("#reviews-list", {
  width: window.innerWidth,
  resistanceRatio: 0,
  speed: 10000,
  observer: true,
  observeParents: true,
  slidesPerGroup: 1,

// autoplay
  autoplay: {
    delay: 0, // 每个图片移动完成后间隔
    disableOnInteraction: false // 触摸后是否停止自动移动
  },

freeMode: {
    enabled: true,
    momentumBounce: false,//主要是这2个参数
    momentumRatio: 0.01//主要是这2个参数
  }, // 不贴合

// loop
  loop: true, // 循环

// grid
  centeredSlides: true,
  slidesPerView: 'auto',//5
  spaceBetween: 25,
  loopedSlides: itemCount,
  loopAdditionalSlides: itemCount,
});
```

#### HTML 代码例子：
```html
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Swiper.js 无限跑马灯</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@7.3.1/swiper-bundle.min.css"/>
  <script src="https://cdn.jsdelivr.net/npm/swiper@7.3.1/swiper-bundle.min.js"></script>
  <style>
    #review-list {
      width: 100%;
      height: 100%;
    }

.review-item {
      width: 300px;
      height: 180px;
      background-color: #ff4081;
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  </style>
</head>
<body>

// autoplay
    autoplay: {
      delay: 0, // 每个图片移动完成后间隔
      disableOnInteraction: false // 触摸后是否停止自动移动
    },

freeMode: {
      enabled: true,
      momentumBounce: false,
      momentumRatio: 0.01,
      momentumVelocityRatio: 0.01
    }, // 不贴合

// loop
    loop: true, // 循环

// grid
    centeredSlides: true,
    slidesPerView: 'auto',//5
    spaceBetween: 25,
  });
</script>
</body>
</html>
```

使用 Lodash 过滤 Object 值为 undefind、null

Shopify Partner 使用 JS 一键创建店铺

Laravel mix + TailwindCSS 运行 npm run watch 无限重新编译 CSS

Swiper.js 报错: Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd

解决 Swiper.js 无限滚动（跑马灯）手动滑动后会干扰移动效果

最新文章

最近回复

分类

归档

其它