open-index/open-npm huggingface dataset:
npm package: @ka-utils/compare-version
Description: compare-version
Author: 徒言
Latest version: 1.0.0

# compare-version

![](https://img.shields.io/npm/v/@ka-utils/compare-version.svg?style=flat) ![](https://img.shields.io/npm/dt/@ka-utils/compare-version.svg?style=flat)

> compare-version

## 使用


```js
import compareVersion from "@ka-utils/compare-version";

// 0 相等，1 较大，-1 较小
compareVersion('1.2.3', '2.1.1');
```


## 开发

1. `yarn` 或者 `ayarn`（[阿里内网](https://web.npm.alibaba-inc.com/package/@ali/yarn)）安装依赖
2. 小程序 IDE 打开组件（[下载地址](https://opendocs.alipay.com/mini/ide/download)）

## 更多命令

* `miapp newbranch`: 新建分支
* `miapp push`: 提交代码
* `miapp prepub`: 预发（发布 beta 版本）
* `miapp publish`: 正式发布
npm package: @ka-utils/hexcolor-rgba
Description: hexcolor-rgba
Author: 洛汐
Latest version: 1.0.0

# hexcolor-rgba

![](https://img.shields.io/npm/v/@ka-utils/hexcolor-rgba.svg?style=flat) ![](https://img.shields.io/npm/dt/@ka-utils/hexcolor-rgba.svg?style=flat)

> hexcolor-rgba

## 使用


```js
import colorRgba from "@ka-utils/hexcolor-rgba";

const color = colorRgba('#ffffff', 0.5)
```


## 开发

1. `yarn` 或者 `ayarn`（[阿里内网](https://web.npm.alibaba-inc.com/package/@ali/yarn)）安装依赖
2. 小程序 IDE 打开组件（[下载地址](https://opendocs.alipay.com/mini/ide/download)）

## 更多命令

* `miapp newbranch`: 新建分支
* `miapp push`: 提交代码
* `miapp prepub`: 预发（发布 beta 版本）
* `miapp publish`: 正式发布
npm package: @ka-utils/qrcode
Description: 二维码
Author: wb-zh822907
Latest version: 3.0.0

# qrcode

![](https://img.shields.io/npm/v/@ka-utils/qrcode.svg?style=flat) ![](https://img.shields.io/npm/dt/@ka-utils/qrcode.svg?style=flat)

> 用于支付宝小程序的二维码组件
## 使用

```html
<canvas id="my-canvas"></canvas>
```

```javascript
import Qrcode from "@ka-utils/qrcode";

Page({
   // 页面加载
    console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
    const size = this.setCanvasSize({ uiWidth: 210 })
    const logoSize = this.setCanvasSize({ uiWidth: 48 })
    const maginSize = this.setCanvasSize({ uiWidth: 24 })
    // 要使用整数，否则会虚
    const width = Math.round(size.w - maginSize.w);
    const xoffset = Math.round(maginSize.w / 2);
    const imgOffset = Math.round((size.w - logoSize.w) / 2);
    const logoWidth = Math.round(logoSize.w);
    drawQrcode({
      width: width,
      height: width,
      canvasId: 'mycanvas',
      qrcode: 'http://www.baidu.com',
      $this: this,
      x: xoffset,
      y: xoffset,
      image: {
        imageResource: 'https://img.alicdn.com/imgextra/i2/O1CN01DACTtH1aXJCowpB5x_!!6000000003339-2-tps-72-72.png',
        dx: imgOffset,
        dy: imgOffset,
        dWidth: logoWidth,
        dHeight: logoWidth,
      }
    })
});



  //适配不同屏幕大小的canvas，scale 中为设计稿宽度除以二维码宽度得到的比例，返回的值为二维码实际的宽 === 高
   //适配不同屏幕大小的canvas,width 为设计稿宽度
  setCanvasSize({ uiWidth }) {
    let size = {};
    try {
      const res = my.getSystemInfoSync();
      console.log('res is', res)
      const scale = 375 / uiWidth; //不同屏幕下canvas的适配比例；设计稿是750宽
      const width = res.windowWidth / scale;
      const height = width; //canvas画布为正方形
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error
      console.log("获取设备信息失败" + e);
    }
    console.log('size is', size)
    return size;
  },

```

| 属性 | 是否必传 | 解释 | 类型 |
| --- | --- | --- | --- |
| qrcode | 是 | 绘制的二维码所对应的 url | string |
| canvasId | 是 | axml 上的 canvas 标签的 id | string |
| width | 是 | 绘制出的二维码的宽 | number |
| height | 是 | 绘制出二维码的高 | number |
| image | 否 | 中间logo标志 | obj |
| x | 否 | 偏移量 | number |
| y | 否 | 偏移量 | number |
| $this | 是 | 该页面的 this 指向 | object |

## 开发


1. `yarn` 或者 `ayarn`（[阿里内网](https://web.npm.alibaba-inc.com/package/@ali/yarn)）安装依赖
1. 小程序 IDE 打开组件（[下载地址](https://opendocs.alipay.com/mini/ide/download)）



## 更多命令


- `miapp newbranch`: 新建分支
- `miapp push`: 提交代码
- `miapp prepub`: 预发（发布 beta 版本）
- `miapp publish`: 正式发布
npm package: @ka-utils/region
Description: region
Author: 洛汐
Latest version: 1.1.0

# region

![](https://img.shields.io/npm/v/@ka-utils/region.svg?style=flat) ![](https://img.shields.io/npm/dt/@ka-utils/region.svg?style=flat)

> region

## 使用


```js
import {isInArea, getDistance} from "@ka-utils/region";

//判断当前是否在某个区域范围内
isInArea(latitude, longitude, areaMinLat, areaMinLong, areaMaxLat, areaMaxLong) // （当前纬度，当前经度，区域最小纬度，区域最小经度，区域最大纬度，区域最大经度）

//当前位置距离终点距离
getDistance(lat1, lng1, lat2, lng2) //（终点纬度，终点经度，当前纬度，当前经度）

```


## 开发

1. `yarn` 或者 `ayarn`（[阿里内网](https://web.npm.alibaba-inc.com/package/@ali/yarn)）安装依赖
2. 小程序 IDE 打开组件（[下载地址](https://opendocs.alipay.com/mini/ide/download)）

## 更多命令

* `miapp newbranch`: 新建分支
* `miapp push`: 提交代码
* `miapp prepub`: 预发（发布 beta 版本）
* `miapp publish`: 正式发布
npm package: @ka-utils/safety-bottom
Description: ios底部安全区
Author: 洛汐
Latest version: 1.0.1

# safety-bottom

![](https://img.shields.io/npm/v/@ka-utils/safety-bottom.svg?style=flat) ![](https://img.shields.io/npm/dt/@ka-utils/safety-bottom.svg?style=flat)

> ios底部安全区

## 使用


```js
import SafetyBottom from "@ka-utils/safety-bottom";

SafetyBottom.alert();
```


## 开发

1. `yarn` 或者 `ayarn`（[阿里内网](https://web.npm.alibaba-inc.com/package/@ali/yarn)）安装依赖
2. 小程序 IDE 打开组件（[下载地址](https://opendocs.alipay.com/mini/ide/download)）

## 更多命令

* `miapp newbranch`: 新建分支
* `miapp push`: 提交代码
* `miapp prepub`: 预发（发布 beta 版本）
* `miapp publish`: 正式发布
npm package: @ka-utils/select-group
Description: 多项选择组
Author: wb-zh822907
Latest version: 1.0.0

# select-group

![](https://img.shields.io/npm/v/@ka-utils/select-group.svg?style=flat) ![](https://img.shields.io/npm/dt/@ka-utils/select-group.svg?style=flat)

> 多项选择组

## 使用

    
在页面的 `page.json` 中配置：

```json
{
  "usingComponents": {
    "select-group": "@ka-utils/select-group/lib/index"
  }
}
```

在页面的 `page.axml` 中直接使用：

```html
<select-group />
```


## 开发

1. `yarn` 或者 `ayarn`（[阿里内网](https://web.npm.alibaba-inc.com/package/@ali/yarn)）安装依赖
2. 小程序 IDE 打开组件（[下载地址](https://opendocs.alipay.com/mini/ide/download)）

## 更多命令

* `miapp newbranch`: 新建分支
* `miapp push`: 提交代码
* `miapp prepub`: 预发（发布 beta 版本）
* `miapp publish`: 正式发布