# uniapp-utils

**Repository Path**: ifredom/uniapp-utils

## Basic Information

- **Project Name**: uniapp-utils
- **Description**: uniapp工具封装
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-06
- **Last Updated**: 2024-02-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uniapp 工具包封装

复制单一文件到 项目根目录/utils 下调用

## 工具

- 1.【http请求封装】utils/request
- 2.【封装 localstorage】utils/store
- 3.【下载图片】utils/downloadImage
- 4.【下载海报】downloadPlacard.vue
- 5.【获取图片主色调并设置为页面背景】imagecolor.vue
- 6.【分享给朋友/朋友圈】imagecolor.vue
- 7.【获取前一页参数】getPrevParams.vue
- 8.【socket长连接通信】 libs/chat.js
- 9.【电商接口流程封装】 libs/order.js
- 10.【微信支付流程封装】 libs/wechat.js

## 使用示例

### 【下载图片】使用示例

> 微信权限：填写用户隐私协议 以及 用户手机开启图片下载权限
```html
<template>
  <view class="text" @click="saveImage">下载图片</view>
</template>
<script>
  import { downloadImage } from "@/utils/downloadImage.js";

  export default {
    methods: {
      saveImage() {
        const url =
          "https://img2.baidu.com/it/u=122597597,132720790&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";
        downloadImage(url);
      },
    },
  };
</script>
```

### 【封装 localstorage】使用示例

```html
<template>
  <view>
    <view class="text" @click="setStorage">保存</view>
    <view class="text" @click="delStorage">删除</view>
    <view class="text" @click="clearStorage">清空</view>
  </view>
</template>
<script>
  import cookie from "@/utils/store/cookie";

  export default {
    methods: {
      setStorage() {
        const userinfo = {
          username: "张三",
          age: 18,
        };
        cookie.set("userinfo", userinfo);
      },
      delStorage() {
        cookie.remove("userinfo");
      },
      clearStorage() {
        cookie.clearAll();
      },
    },
  };
</script>
```

### 【http请求封装】使用示例

> 1.使用示例：
```js
import request from '@/utils/request'

export function getGoods(data) {
	return request({
		url: '/dict/getGoodsList',
		method: 'post',
		data: data
	});
}
```
### 【分享给朋友/朋友圈】使用示例
> 1.引入
```js
import Vue from 'vue'
import App from './App'
import share from "./utils/share.js"

// 混入mixin 分享
Vue.mixin(share)

const app = new Vue({
	...App
})
app.$mount()
```
> 2.使用示例： pages/shareExample.vue


### 【获取前一页参数】使用示例

> 1.引入
```js
import Vue from 'vue'
import App from './App'

const prePage = () => {
	let pages = getCurrentPages();
	let prePage = pages[pages.length - 2];
	// #ifdef H5
	return prePage;
	// #endif
	return prePage.$vm;
}

Vue.config.productionTip = false
Vue.prototype.$fire = new Vue();
Vue.prototype.$api = {
	prePage
};

const app = new Vue({
	...App
})
app.$mount()
```
>  2.使用示例： pages/getPrevParams.md


## 【微信支付流程封装】

> npm install wechat-jssdk@^5.0.4