1

App.vue

@@ -2,13 +2,13 @@
     import {useAppStore} from "@/store";
     import website from "@/config/index";
     import userApi from '~api/user/index';
-    import {getStorage, setStorage} from "@/utils/storage";
+    import {getStorage, setStorage, delStorage} from "@/utils/storage";
     import {calcDate, getObjValue, isNullES, isString} from "js-fast-way";
     import {getWssApiUrl} from "@/config/envApi";
 	export default {
         data() {
             return {
-                userInfo: {}, refreshLock: false, isSocket: false
+                userInfo: {}, refreshLock: false, isSocket: false, timeId: null,
             }
         },
 		onLaunch() {
@@ -69,25 +69,28 @@
             },
             //长连接
             setInitSocket() {
-                const _this = this
-                const timeId = setInterval(() => {
-                    if (_this.isSocket) {
-                        clearInterval(timeId)
+                this.timeId = setInterval(() => {
+                    if (this.isSocket) {
+                        clearInterval(this.timeId)
                     } else {
-                        _this.setAppSocket(timeId)
+                        this.setAppSocket()
                     }
+                    console.log('setInterval')
                 }, 3000)
             },
             setAppSocket() {
                 const {user_id} = this.userInfo
-                if (user_id) this.initWebSocket(user_id)
+                if (user_id) {
+                    this.initWebSocket(user_id)
+                }
             },
             initWebSocket(user_id) {
-                const _this = this
-                const store = useAppStore()
+                const _this = this, store = useAppStore()
+                let startTime = 0;
                 uni.connectSocket({
                     url: getWssApiUrl() + user_id,
                     complete: ()=> {
+                        startTime = new Date()
                         _this.isSocket = true
                         console.log('websocket链接成功')
                     }
@@ -97,14 +100,17 @@
                     _this.sendSocketMessage();
                 });
                 uni.onSocketError((res) => {
-                    _this.isSocket = false
-                    console.log('WebSocket连接打开失败，请检查！');
+                    console.log('WebSocket连接失败，请检查！');
                 });
                 uni.onSocketClose((res) => {
-                    _this.isSocket = false
                     console.log('WebSocket 已关闭！');
                     //关闭后在连接
-                    _this.setInitSocket()
+                    const endTime = new Date()
+                    const duration = endTime - startTime
+                    if(duration > 1000) {
+                        _this.isSocket = false
+                        //_this.setAppSocket()
+                    }
                 });
                 //收到的消息
                 uni.onSocketMessage(({data}) => {

components/hc-sys/index.vue

@@ -5,6 +5,9 @@
         </hc-nav-bar>
         <slot></slot>
         <hc-tabbar v-if="tabbar"/>
+
+        <!--检测升级-->
+        <hc-update/>
     </view>
 </template>
 

components/hc-update/index.vue

@@ -0,0 +1,40 @@
+<template>
+    <view class="hc-update-app-box" v-if="isShow">
+        <view class="update-head-bar">
+            <view class="head-bar">
+                <image class="head-img" src="/static/update/1.png"/>
+                <view class="relative flex">
+                    <view class="flex-1 text-white hc-p">
+                        <view class="text-34">发现新版本</view>
+                        <view class="mt-2">v1.0.0</view>
+                    </view>
+                    <view class="relative top--60 right-40">
+                        <c-lottie src='/static/update/2.json' width="240rpx" height='240rpx' :loop="true"/>
+                    </view>
+                </view>
+            </view>
+            <view class="update-content-bar hc-p">
+                <scroll-view scroll-y>
+                    <view>更新内容: </view>
+                    <view class="mt-2 text-gray-6">1111</view>
+                </scroll-view>
+            </view>
+            <view class="update-action-bar">
+                <view class="hc-flex hc-p">
+                    <button class="cu-btn bg-blue-5 text-white flex-1 mr-2">立即更新</button>
+                    <button class="cu-btn bg-gray-4 text-white flex-1 ml-2">下次再说</button>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import {ref} from "vue";
+
+const isShow = ref(false)
+</script>
+
+<style scoped lang="scss">
+@import "./style.scss";
+</style>

components/hc-update/style.scss

@@ -0,0 +1,43 @@
+.hc-update-app-box {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    pointer-events: all;
+    background: rgba(0, 0, 0, .3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .update-head-bar {
+        position: relative;
+        background: white;
+        height: 60%;
+        width: 80%;
+        border-radius: 20rpx;
+        .head-bar {
+            position: relative;
+            width: 100%;
+            height: 240rpx;
+            .head-img {
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                width: 100%;
+                height: 200rpx;
+                border-radius: 18rpx 18rpx 0 0;
+            }
+        }
+    }
+    .update-content-bar {
+        position: relative;
+        background: white;
+        height: calc(100% - 355rpx);
+    }
+    .update-action-bar {
+        position: relative;
+        background: white;
+    }
+}

components/index.js

@@ -11,6 +11,7 @@ import HcTree from './hc-tree/hc-tree.vue'
 import HcTreeNode from './hc-tree/tree-node.vue'
 import HcPopup from './hc-popup/index.vue'
 import HcBreadcrumb from './hc-breadcrumb/index.vue'
+import HcUpdate from './hc-update/index.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
@@ -27,4 +28,5 @@ export const setupComponents = (App) => {
     App.component('HcTreeNode', HcTreeNode)
     App.component('HcPopup', HcPopup)
     App.component('HcBreadcrumb', HcBreadcrumb)
+    App.component('HcUpdate', HcUpdate)
 }

uni_modules/c-lottie/changelog.md

@@ -0,0 +1,18 @@
+## 1.0.8（2023-07-14）
+新增加载成功事件dataReady  加载失败事件 dataFailed
+## 1.0.7（2023-07-14）
+新增加载成功事件dataReady  加载失败事件 dataFailed
+## 1.0.6（2023-04-18）
+优化实现细节
+## 1.0.5（2023-04-18）
+修复已知问题
+## 1.0.4（2023-04-18）
+修复条件编译导致的编译异常
+## 1.0.3（2023-04-04）
+修复vue2编译到H5平台加载异常的问题
+## 1.0.2（2023-03-29）
+兼容vue2
+## 1.0.1（2023-03-08）
+修复props响应性丢失问题
+## 1.0.0（2023-03-02）
+init

uni_modules/c-lottie/components/c-lottie/c-lottie.vue

@@ -0,0 +1,272 @@
+<template>
+	<!-- #ifdef H5||APP-PLUS -->
+	<view class="c-lottie" :style="{width,height}" :lottieData="lottieData" :change:lottieData="lottie.render" :fun='fun'
+		:change:fun='lottie.callPlayer'>
+		<div :id='myCanvasId'></div>
+	</view>
+	<!-- #endif -->
+	<!-- #ifdef MP -->
+	<view class="c-lottie" :style="{width,height}">
+		<canvas class="canvas" :id="myCanvasId" type="2d"></canvas>
+	</view>
+	<!-- #endif -->
+</template>
+<script>
+	/**
+	 * c-lottie Lottie组件
+	 * @property {String} canvasId 画布id
+	 * @property {String} width 图像宽度 默认750rpx 单位rpx/px
+	 * @property {String} height 图像高度 默认750rpx 单位rpx/px
+	 * @property {String} src Lottie文件地址 小程序只支持网络地址
+	 * @property {String} data Lottie文件data
+	 * @property {Boolean} autoPlay 是否自动播放 默认true
+	 * @property {Boolean} loop 是否循环播放 默认值为 true
+	 * @property {String} renderer 渲染模式 默认值为canvas 可选值 svg|canvas 小程序不支持
+	 * @property {Boolean} isOnChange 是否开启播放进度监听 默认false false时不触发EnterFrame
+	 * @event {Function()} Complete 监听动画播放完成
+	 * @event {Function()} LoopComplete 监听当前循环播放完成
+	 * @event {Function()} EnterFrame 监听动画播放进度
+	 * @event {Function()} SegmentStart 监听开始播放一个动画片段
+	 * @event {Function()} dataReady 当动画的所有部分都已加载时触发
+	 * @event {Function()} dataFailed 当部分动画无法加载时触发
+	 * 组件内方法统一使用 call(funName, args) 调用player实例方法 详见文档
+	 * */
+	import uuid from './js/uuid.js'
+	// #ifdef MP&VUE3
+	import lottie from 'lottie-miniprogram'
+	// #endif
+	// #ifdef MP&VUE2
+	import lottie from '../../node_modules/lottie-miniprogram'
+	// #endif
+	// #ifdef MP
+	let player, context, myCanvas;
+	// #endif
+	export default {
+		props: {
+			canvasId: {
+				type: String
+			},
+			width: {
+				type: String,
+				default: '750rpx'
+			},
+			height: {
+				type: String,
+				default: '750rpx'
+			},
+			src: {
+				type: String,
+			},
+			data: {
+				type: String,
+			},
+			autoPlay: { //是否自动播放
+				type: Boolean,
+				default: true
+			},
+			loop: { //是否循环播放 默认值为 true
+				type: Boolean,
+				default: true
+			},
+			renderer: { //渲染模式 默认值为canvas 可选值 svg
+				type: String,
+				default: 'canvas',
+			},
+			isOnChange: {
+				type: Boolean,
+				default: false
+			}
+		},
+		emits: ['Complete', 'LoopComplete', 'EnterFrame', 'SegmentStart','dataReady','dataFailed'],
+		data() {
+			return {
+				fun: {}
+			}
+		},
+		computed: {
+			myCanvasId() {
+				if (!this.canvasId) {
+					return 'c' + uuid(18)
+				} else {
+					return this.canvasId
+				}
+			},
+			lottieData() {
+				return {
+					myCanvasId: this.myCanvasId,
+					width: this.width,
+					height: this.height,
+					src: this.src,
+					data: this.data,
+					autoPlay: this.autoPlay,
+					loop: this.loop,
+					renderer: this.renderer,
+					isOnChange: this.isOnChange
+				}
+			}
+		},
+		watch: {
+			lottieData() {
+				// #ifdef MP
+				this.render()
+				// #endif
+			}
+		},
+		methods: {
+			call(name, args) {
+				this.fun = {name,args}
+				// #ifdef MP
+				this.callPlayer(this.fun)
+				// #endif
+			},
+			// #ifdef MP
+			getContext() {
+				return new Promise((resolve) => {
+					const {
+						pixelRatio
+					} = uni.getSystemInfoSync()
+					uni.createSelectorQuery()
+						.in(this)
+						.select(`#${this.myCanvasId}`)
+						.fields({
+							node: true,
+							size: true
+						})
+						.exec(res => {
+							const {
+								width,
+								height
+							} = res[0]
+							const canvas = res[0].node
+							resolve({
+								canvas,
+								width,
+								height,
+								pixelRatio
+							})
+						})
+				})
+			},
+			async render() {
+				if (player) {
+					// console.log(player);
+					// call('stop')
+					this.call('destroy', player)
+				}
+				let {
+					canvas,
+					width,
+					height,
+					pixelRatio
+				} = await this.getContext()
+				myCanvas = canvas
+				context = canvas.getContext('2d')
+				//避免出现锯齿问题
+				context.scale(pixelRatio, pixelRatio)
+				canvas.width = width * pixelRatio
+				canvas.height = height * pixelRatio
+				lottie.setup(myCanvas)
+				player = lottie.loadAnimation({
+					loop: this.loop,
+					autoplay: this.autoPlay,
+					// 动画json的本地数据
+					animationData: this.data,
+					//远程动画。一定要把json格式的文件放到服务器中，并且注意域名是合法的
+					path: this.src,
+					rendererSettings: {
+						context,
+					},
+				})
+				player.addEventListener('data_ready',(val)=>{ //当动画的所有部分都已加载时
+					this.$emit('dataReady', val)
+				})
+				player.addEventListener('data_failed',(val)=>{ //当部分动画无法加载时
+					this.$emit('dataFailed', val)
+				})
+				player.onComplete = (val) => { //动画播放完成触发
+					// console.log('动画播放完成触发',val);
+					this.$emit('Complete', val)
+				}
+				player.onLoopComplete = (val) => { //当前循环播放完成触发
+					// console.log('当前循环播放完成触发',val);
+					this.$emit('LoopComplete', val)
+				}
+				if (this.isOnChange) {
+					player.onEnterFrame = (val) => { //播放动画的时候触发
+						// console.log('播放动画的时候触发',val);
+						this.$emit('EnterFrame', val)
+					}
+				}
+				player.onSegmentStart = (val) => { //开始播放一个动画片段的时候触发
+					// console.log('开始播放一个动画片段的时候触发',val);
+					this.$emit('SegmentStart', val)
+				}
+
+			},
+			callPlayer(val) {
+				if (!val.name) return;
+				let {name,args} = val
+				// console.log(name, args);
+				if (Array.isArray(args)) {
+					player[name](...args)
+				} else {
+					player[name](args)
+				}
+			},
+			// #endif
+			// #ifndef MP
+			receiveRenderData(val) {
+				// console.log(val);
+				this.$emit(val.name, val.val)
+			}
+			// #endif
+		},
+		mounted() {
+			// #ifdef MP
+			this.render()
+			// #endif
+		},
+		beforeDestroy() {
+			// 组件卸载销毁实例
+			this.call('destroy')
+		}
+
+	}
+</script>
+
+<!-- #ifndef MP -->
+	
+	<!-- #ifdef VUE3 -->
+	<script lang="renderjs" src='./js/render.js' module='lottie'></script>
+	<!-- #endif -->
+	
+	<!-- #ifdef VUE2 -->
+	<script lang="renderjs" module='lottie'>
+		import lottieRender from "./js/render.js"
+		export default {
+			mixins:[lottieRender],
+		}
+	</script>
+	<!-- #endif -->
+<!-- #endif -->
+
+
+<style lang="scss" scoped>
+	.c-lottie {
+		// width: v-bind(width);
+		// height: v-bind(height);
+
+		/* #ifndef MP */
+		div {
+			width: 100%;
+			height: 100%;
+		}
+
+		/* #endif */
+
+		.canvas {
+			width: 100%;
+			height: 100%;
+		}
+	}
+</style>

uni_modules/c-lottie/components/c-lottie/js/getfile.js

@@ -0,0 +1,67 @@
+export default function getfile(e,isIosDown=false) {
+	// #ifdef APP-PLUS
+	let isIOS = plus.os.name==='iOS'
+	let url = plus.io.convertLocalFileSystemURL(e)
+	return new Promise((resolve, reject) => {
+		if (/(http|https):\/\/([\w.]+\/?)\S*/.test(url)) {
+			if(!isIosDown||!isIOS){
+				resolve(e)
+				return
+			}
+			if(isIOS){
+				let dtask = plus.downloader.createDownload(url, {}, function(d, status) {
+					// 下载完成
+					if (status == 200) {
+						let newurl = plus.io.convertLocalFileSystemURL(d.filename);
+						// console.log("Download success: " + newurl);
+						plus.io.resolveLocalFileSystemURL(newurl, entry => {
+							let reader = null;
+							entry.file(file => {
+								reader = new plus.io.FileReader();
+								reader.onloadend = (read) => {
+									resolve(read.target.result)
+								};
+								reader.readAsDataURL(file);
+							}, function(error) {
+								 console.log(error.message);
+							});
+						}, err => {
+							resolve(e)
+						})
+
+					} else {
+						console.log("Download failed: " + status);
+						reject(status)
+					}
+				})
+				dtask.start();
+			}
+		} else {
+
+			plus.io.resolveLocalFileSystemURL(url, entry => {
+				let reader = null;
+				entry.file(file => {
+					reader = new plus.io.FileReader();
+					reader.onloadend = (read) => {
+						resolve(read.target.result)
+					};
+					reader.readAsDataURL(file);
+				}, function(error) {
+					 console.log(error.message);
+				});
+			}, err => {
+				resolve(e)
+			})
+
+		}
+
+	})
+	// #endif
+	// #ifdef H5
+
+	return new Promise((resolve, reject) => {
+		resolve(e)
+	})
+
+	// #endif
+}

uni_modules/c-lottie/components/c-lottie/js/render.js

@@ -0,0 +1,79 @@
+// #ifdef VUE3
+ import lottie from 'lottie-web'
+// #endif
+// #ifdef VUE2
+ import lottie from '../../../node_modules/lottie-web'
+// #endif
+ import getfile  from './getfile.js'
+ export default {
+	 data() {
+		return {
+			player: null,
+			pdata:{}
+		}
+	 },
+	 methods: {
+		 async render(val,oldValue,vm) {
+			 this.$nextTick(async()=>{
+				 let data,player;
+				 // console.log(val);
+				 if(val){
+					data =val
+					this.pdata=data
+				 }else{
+					data=this.pdata
+				 }
+				 // console.log(data); 				
+				 if(this.player){
+					this.player.destroy()
+				 }
+				 player = lottie.loadAnimation({
+					container:document.getElementById(data.myCanvasId), // the dom element
+					renderer: data.renderer,
+					loop: data.loop,
+					autoplay: data.autoPlay,
+					// 动画json的本地数据
+					animationData: data.data, 
+					// 动画json的网络路径
+					path: data.src?await getfile(data.src):''
+				 }) 
+				 player.addEventListener('data_ready',(val)=>{ //当动画的所有部分都已加载时
+					 vm.callMethod('receiveRenderData',{name:'dataReady',val})
+				 })
+				 player.addEventListener('data_failed',(val)=>{ //当部分动画无法加载时
+					 vm.callMethod('receiveRenderData',{name:'dataFailed',val})
+				 })
+				 player.onComplete=(val)=>{ //动画播放完成触发
+					//console.log('动画播放完成触发',val);
+					vm.callMethod('receiveRenderData',{name:'Complete',val})
+				 }
+				 player.onLoopComplete=(val)=>{ //当前循环播放完成触发
+					//console.log('当前循环播放完成触发',val);
+					vm.callMethod('receiveRenderData',{name:'LoopComplete',val})
+				 }
+				 if(data.isOnChange){
+					player.onEnterFrame=(val)=>{ //播放动画的时候触发
+						//console.log('播放动画的时候触发',val);
+						vm.callMethod('receiveRenderData',{name:'EnterFrame',val})
+					} 
+				 }
+				 player.onSegmentStart=(val)=>{ //开始播放一个动画片段的时候触发
+					//console.log('开始播放一个动画片段的时候触发',val);
+					vm.callMethod('receiveRenderData',{name:'SegmentStart',val})
+				 }
+				 this.player=player
+			 })
+		 },
+		 async callPlayer(val){
+			if(!val.name)return;
+			let {name, args} = val
+			// console.log(name, args);
+			if(Array.isArray(args)){
+				this.player[name](...args)
+			}else{
+				this.player[name](args)
+			}
+		}
+		 
+	 },
+ }

uni_modules/c-lottie/components/c-lottie/js/uuid.js

@@ -0,0 +1,23 @@
+
+export default (len = 32, radix = null) => {
+	let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+	let uuid = [];
+	radix = radix || chars.length;
+	if (len) {
+		// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
+		for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
+	} else {
+		let r;
+		// rfc4122标准要求返回的uuid中,某些位为固定的字符
+		uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+		uuid[14] = '4';
+
+		for (let i = 0; i < 36; i++) {
+			if (!uuid[i]) {
+				r = 0 | Math.random() * 16;
+				uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
+			}
+		}
+	}
+	return uuid.join('');
+}

uni_modules/c-lottie/package.json

@@ -0,0 +1,87 @@
+{
+  "id": "c-lottie",
+  "displayName": "c-lottie",
+  "version": "1.0.8",
+  "description": "c-design c-lottie动画 支持app h5 微信小程序",
+  "keywords": [
+    "lottie",
+    "动画",
+    "微信lottie"
+],
+  "repository": "https://gitee.com/wangziwl/c-designc",
+  "engines": {
+    "HBuilderX": "^3.7.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "u",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u",
+          "钉钉": "u",
+          "快手": "u",
+          "飞书": "u",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  },
+  "dependencies": {
+    "lottie-miniprogram": "^1.0.12",
+    "lottie-web": "^5.10.2"
+  }
+}

uni_modules/c-lottie/readme.md

@@ -0,0 +1,220 @@
+# c-lottie
+
+### 
+- c-lottie lottie动画
+
+### c-design交流群号：330647926
+
+### 示例预览
+
+[https://cloud.vuedata.wang/cdesign/#/pages/lottie/lottie](https://cloud.vuedata.wang/cdesign/#/pages/lottie/lottie)
+####
+![微信小程序预览](https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/dca3227b-0028-47f6-b576-cb89def67177.png?x-oss-process=image/resize,m_fixed,w_240)
+
+### 一、使用示例
+#### vue2/vue3
+```html
+<template>
+	<view>
+		<c-lottie
+			ref="cLottieRef"
+			:src='src'
+			@LoopComplete="onLoopComplete" 
+			width="750rpx" height='750rpx' :loop="true"></c-lottie>
+		<view class="content">
+			<view>切换图像</view>
+			<view class="btnBox">
+				<button @click="src='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/7b538fb7-d2d5-4524-bf21-6c20e3b5ce6f.json'" size="mini">热销</button>
+				<button @click="src='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/c42b5f05-06b9-43e7-8436-c1029eee610a.json'" size="mini">字母</button>
+			</view>
+			<view>播放暂停</view>
+			<view class="btnBox">
+				<button @click="this.$refs.cLottieRef.call('play')" size="mini">播放</button>
+				<button @click="this.$refs.cLottieRef.call('setDirection',-1)" size="mini">反向播放</button>
+				<button @click="this.$refs.cLottieRef.call('pause')" size="mini">暂停播放</button>
+				<button @click="this.$refs.cLottieRef.call('stop')" size="mini">停止播放</button>
+			</view>
+			<view>播放速度</view>
+			<view class="btnBox">
+				<button @click="this.$refs.cLottieRef.call('setSpeed',1)" size="mini">播放速度1x</button>
+				<button @click="this.$refs.cLottieRef.call('setSpeed',2)" size="mini">播放速度2x</button>
+			</view>
+			<view>播放其它设置</view>
+			<view class="btnBox">
+				<button @click="this.$refs.cLottieRef.call('goToAndStop',[2000,false])" size="mini">跳转到2s并暂停</button>
+				<button @click="this.$refs.cLottieRef.call('goToAndPlay',[2000,false])" size="mini">跳转到2s并播放</button>
+			</view>
+			<view class="btnBox">
+				<button @click="this.$refs.cLottieRef.call('goToAndStop',[2,true])" size="mini">跳转到第2帧并暂停</button>
+				<button @click="this.$refs.cLottieRef.call('goToAndPlay',[2,true])" size="mini">跳转到第2帧并播放</button>
+			</view>
+			<view class="btnBox">
+				<button @click="this.$refs.cLottieRef.call('playSegments',[[10,20],false])" size="mini">播放完之前的片段，播放10-20帧</button>
+			</view>
+			<view class="btnBox">
+				<button @click="this.$refs.cLottieRef.call('playSegments',[[[0,5],[10,18]],true])" size="mini">直接播放0-5帧和10-18帧</button>
+			</view>
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				src: 'https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/7b538fb7-d2d5-4524-bf21-6c20e3b5ce6f.json'
+			}
+		},
+		methods: {
+			onLoopComplete(val) {
+				// console.log('当前循环播放完成',val);
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.page{
+		width: 100vw;
+		overflow-x: hidden;
+	}
+	.content{
+		padding: 20rpx;
+		font-size: 28rpx;
+	}
+	.btnBox{
+		width: 100%;
+		display: flex;align-items: center;
+		margin-top: 20rpx;
+		margin-bottom: 30rpx;
+	}
+</style>
+```
+#### vue3
+```html
+<template>
+	<view>
+		<c-lottie
+			ref="cLottieRef"
+			:src='src'
+			@LoopComplete="onLoopComplete" 
+			width="750rpx" height='750rpx' :loop="true"></c-lottie>
+		<view class="content">
+			<view>切换图像</view>
+			<view class="btnBox">
+				<button @click="src='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/7b538fb7-d2d5-4524-bf21-6c20e3b5ce6f.json'" size="mini">热销</button>
+				<button @click="src='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/c42b5f05-06b9-43e7-8436-c1029eee610a.json'" size="mini">字母</button>
+			</view>
+			<view>播放暂停</view>
+			<view class="btnBox">
+				<button @click="cLottieRef.call('play')" size="mini">播放</button>
+				<button @click="cLottieRef.call('setDirection',-1)" size="mini">反向播放</button>
+				<button @click="cLottieRef.call('pause')" size="mini">暂停播放</button>
+				<button @click="cLottieRef.call('stop')" size="mini">停止播放</button>
+			</view>
+			<view>播放速度</view>
+			<view class="btnBox">
+				<button @click="cLottieRef.call('setSpeed',1)" size="mini">播放速度1x</button>
+				<button @click="cLottieRef.call('setSpeed',2)" size="mini">播放速度2x</button>
+			</view>
+			<view>播放其它设置</view>
+			<view class="btnBox">
+				<button @click="cLottieRef.call('goToAndStop',[2000,false])" size="mini">跳转到2s并暂停</button>
+				<button @click="cLottieRef.call('goToAndPlay',[2000,false])" size="mini">跳转到2s并播放</button>
+			</view>
+			<view class="btnBox">
+				<button @click="cLottieRef.call('goToAndStop',[2,true])" size="mini">跳转到第2帧并暂停</button>
+				<button @click="cLottieRef.call('goToAndPlay',[2,true])" size="mini">跳转到第2帧并播放</button>
+			</view>
+			<view class="btnBox">
+				<button @click="cLottieRef.call('playSegments',[[10,20],false])" size="mini">播放完之前的片段，播放10-20帧</button>
+			</view>
+			<view class="btnBox">
+				<button @click="cLottieRef.call('playSegments',[[[0,5],[10,18]],true])" size="mini">直接播放0-5帧和10-18帧</button>
+			</view>
+			
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref } from "vue";
+	const cLottieRef = ref()
+	let src=ref('https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/7b538fb7-d2d5-4524-bf21-6c20e3b5ce6f.json')
+	const onLoopComplete=(val)=>{
+		// console.log('当前循环播放完成',val);
+	}
+</script>
+
+<style lang="scss">
+	.page{
+		width: 100vw;
+		overflow-x: hidden;
+	}
+	.content{
+		padding: 20rpx;
+		font-size: 28rpx;
+	}
+	.btnBox{
+		width: 100%;
+		display: flex;align-items: center;
+		margin-top: 20rpx;
+		margin-bottom: 30rpx;
+	}
+</style>
+```
+
+### 二、Props
+
+| 字段				| 类型		| 必填	| 默认值				| 描述																																							|
+| -----------		| --------	| ----	| ----------------------| -------------------------------	
+| canvasId	| String	| 否|  'c'+uuid(18)	| canvasId 画布id 可不填此项			|
+| width		| String	| 否|  750rpx		| 图像宽度 单位rpx/px					|
+| height	| String	| 否|  750rpx		| 图像高度 单位rpx/px					|
+| src		| String	| 是|				| Lottie文件地址 小程序只支持网络地址	|
+| data		| String	| 否|				| Lottie文件data						|
+| autoPlay	| Boolean	| 否|  true			| 是否自动播放							|
+| loop		| Boolean	| 否|  true			| 是否循环播放							|
+| renderer	| String	| 否|  canvas		| 可选值 svg,canvas 小程序不支持		|
+| isOnChange| Boolean	| 否|  false		|false时不触发 EnterFrame监听			|
+
+### 三、Event
+| 字段			| 描述						|
+| ---------		| ------------------------	|
+| Complete		| 监听动画播放完成			|
+| LoopComplete	| 监听当前循环播放完成		|
+| EnterFrame	| 监听动画播放进度			|
+| SegmentStart	| 监听开始播放一个动画片段	|
+| dataReady		| 加载完成事件				|
+| dataFailed	| 加载失败事件				|
+
+### 四、Methods
+
+#### 组件内方法统一使用 call(funName, args) 调用
+
+```js
+	this.$refs.cLottieRef.call('play')
+	//or
+	const cLottieRef = ref()
+	cLottieRef.value.call('play')
+```
+
+#### funName args入参为array类型 单个参数可传入string类型 
+
+* play(); - 播放
+* stop(); - 停止播放
+* pause(); - 暂停播放
+* setSpeed(speed); -播放速度 speed: 1 为正常速度.
+* goToAndStop(value, isFrame); -暂停到某一时间点或帧 value:数值  isFrame:定义第一个参数是基于时间的值还是基于帧的值（默认为false)
+* goToAndPlay(value, isFrame); -从某一时间点或帧开始播放 value:数值  isFrame:定义第一个参数是基于时间的值还是基于帧的值（默认为false)
+* setDirection(direction); - direction: 1 为正向, -1 为反向.
+* playSegments(segments,forceFlag) - 播放选定的片段 segments:array.可以包含2个数值，它们将用作动画的第一帧和最后一帧。或者可以包含一个数组序列，每个数组带有2个数值。 forceFlag:boolean.如果设置为false，它将等待当前段完成。如果为真，则它将立即更新值。
+* setSubframe(useSubFrames); - useSubFrames: 如果为false，它将遵循原始的AE fps。如果为true，它将更新每个请求动画帧的中间值。默认值为true。
+* destroy(); - 销毁实例
+* ...
+
+### 方法与lottie-web 方法保持一致 [详情可参考](http://airbnb.io/lottie/#/web?id=usage)
+### 微信小程序端会提示’发现 Lottie 动态创建 canvas 组件，但小程序不支持动态创建组件，接下来可能会出现异常‘ 组件内部已进行处理忽略即可
+### 暂不支持nvue nvue请使用性能更好的原生插件
+### 注意：由于Hbuilderx上传插件无法上传node_odules依赖 导入插件后进入插件目录/uni_modules/c-lottie   使用npm i 进行依赖安装 

uni_modules/c-lottie/yarn.lock

@@ -0,0 +1,13 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+lottie-miniprogram@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.npmjs.org/lottie-miniprogram/-/lottie-miniprogram-1.0.12.tgz#637a315c6a3df2e908012fb2771ab47a342ca55e"
+  integrity sha512-2ITtXAyeDXbftvYYe5w0ayl8jTV8laylWMCdJofpka1q205NkjRNj7kX+iIZZ/YjKh1f8plWxb9gSFHkC7BLUQ==
+
+lottie-web@^5.10.2:
+  version "5.12.2"
+  resolved "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5"
+  integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==