安装? npm install weixin-js-sdk
引入
import wx from 'weixin-js-sdk'<template>
? ? <div class="circle_box">
? ? ? ? <div id="content"></div>
? ? ? ? ?<img class="img_0" src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">
? ? ? ? ?<img @click="changeType" class="img_1" v-show="playbool" src="@/assets/decompression/pressure_audio_play.png" alt="">
? ? ? ? ?<img @click="changeType" class="img_1" v-show="!playbool" src="@/assets/decompression/pressure_audio_pause.png" alt="">
? ? ? ? ?<div v-show="false">
? ? ? ? ? ? <audio ref="audio" controls @timeupdate="updateTime">
? ? ? ? ? ? ?<source src="@/assets/decompression/tiankong.mp3" type="audio/mpeg">
? ? ? ? ? ? </audio>
? ? ? ? ?</div>
? ? </div>
</template>
<script>
import wx from "weixin-js-sdk";
export default {
? ? data(){
? ? ? ? return{
? ? ? ? ? ? value:'',
? ? ? ? ? ? outColor:'',
? ? ? ? ? ? playbool:true,
? ? ? ? ? ? second:0,
? ? ? ? ? ? than:''
? ? ? ? }
? ? },
? ? mounted(){
? ? ? ? this.init()
? ? ? ? this.main()
? ? },
? ? methods:{
? ? ? ? init(){
? ? ? ? ? ? let that = this
? ? ? ? ? ? let u = navigator.userAgent;
? ? ? ? ? ? //ios手机
? ? ? ? ? ? var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
? ? ? ? ? ? if(isIOS){
? ? ? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? ? ? ? this.autoPlayAudio();
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? ? let time = setTimeout(function () {
? ? ? ? ? ? ? ? ? ? ? ? let audio = that.$refs.audio;
? ? ? ? ? ? ? ? ? ? ? ? //音频总时长 秒
? ? ? ? ? ? ? ? ? ? ? ? that.second = audio.duration;
? ? ? ? ? ? ? ? ? ? ? ? that.than = 100/audio.duration;
? ? ? ? ? ? ? ? ? ? ? ? that.$parent.calculationTime(audio.duration);
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(time);
? ? ? ? ? ? ? ? ? ? }, 500)
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? autoPlayAudio() {
? ? ? ? ? ? let ua = window.navigator.userAgent.toLowerCase();
? ? ? ? ? ? let that = this;
? ? ? ? ? ? let audio = this.$refs.audio;
? ? ? ? ? ? if(ua.match(/MicroMessenger/i) == 'micromessenger'){
? ? ? ? ? ? ? ? //微信浏览器
? ? ? ? ? ? ? ? wx.config({
? ? ? ? ? ? ? ? ? ? debug: false,
? ? ? ? ? ? ? ? ? ? appId: '',
? ? ? ? ? ? ? ? ? ? timestamp: 1,
? ? ? ? ? ? ? ? ? ? nonceStr: '',
? ? ? ? ? ? ? ? ? ? signature: '',
? ? ? ? ? ? ? ? ? ? jsApiList: []
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ?wx.ready(function() {
? ? ? ? ? ? ? ? audio.play();
? ? ? ? ? ? ? ? audio.pause();
? ? ? ? ? ? ? ? let time = setTimeout(function () {
? ? ? ? ? ? ? ? ? ? ? ? if(audio.duration>0){
? ? ? ? ? ? ? ? ? ? ? ? ? ? //音频总时长 秒
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.second = audio.duration;
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.than = 100/audio.duration;
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.$parent.calculationTime(audio.duration);
? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.autoPlayAudio();
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(time);
? ? ? ? ? ? ? ? ? ? }, 500)
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? let time = setTimeout(function () {
? ? ? ? ? ? ? ? ? ? if(audio.duration>0){
? ? ? ? ? ? ? ? ? ? ? ? //音频总时长 秒
? ? ? ? ? ? ? ? ? ? ? ? that.second = audio.duration;
? ? ? ? ? ? ? ? ? ? ? ? that.than = 100/audio.duration;
? ? ? ? ? ? ? ? ? ? ? ? that.$parent.calculationTime(audio.duration);
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? that.autoPlayAudio();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? clearInterval(time);
? ? ? ? ? ? ? ? }, 500)
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? //监测播放进度
? ? ? ? updateTime(){
? ? ? ? ? ?let audio = this.$refs.audio;
? ? ? ? ? ?let time = Number(this.second)-Number(audio.currentTime);
? ? ? ? ? ?this.$parent.calculationTime(time);
? ? ? ? ? ?this.draw(this.than*audio.currentTime);
? ? ? ? },
? ? ? ? changeType(){
? ? ? ? ? this.playbool = !this.playbool;
? ? ? ? ? let audio = this.$refs.audio;
? ? ? ? ? if(this.playbool){
? ? ? ? ? ? //暂停
? ? ? ? ? ? ?audio.pause()
? ? ? ? ? }else{
? ? ? ? ? ? audio.play()
? ? ? ? ? }
? ? ? ? },
? ? ? ? event(dom) { ?//事件绑定
? ? ? ? ? ? if(this.isMobile){
? ? ? ? ? ? ? ? dom.addEventListener("touchstart", this.OnMouseDown.bind(this), false);
? ? ? ? ? ? ? ? dom.addEventListener("touchmove", this.throttle(this.OnMouseMove.bind(this)), false);
? ? ? ? ? ? ? ? dom.addEventListener("touchend", this.OnMouseUp.bind(this), false);
? ? ? ? ? ? ? ? return
? ? ? ? ? ? }
? ? ? ? ? ? dom.addEventListener("mousedown", this.OnMouseDown.bind(this), false);
? ? ? ? ? ? dom.addEventListener("mousemove", this.throttle(this.OnMouseMove.bind(this)), false);
? ? ? ? ? ? dom.addEventListener("mouseup", this.OnMouseUp.bind(this), false);
? ? ? ? },
? ? ? ? OnMouseDown(evt) {
? ? ? ? ? ? let audio = this.$refs.audio;
? ? ? ? ? ? //暂停音频
? ? ? ? ? ? audio.pause()
? ? ? ? ? ? this.clearLocation(evt);
? ? ? ? ? ? let range = 10;
? ? ? ? ? ? let X = this.getx(evt);
? ? ? ? ? ? let Y = this.gety(evt);
? ? ? ? ? ? let P = this.P
? ? ? ? ? ? let minX = P.x - this.slider - range;
? ? ? ? ? ? let maxX = P.x + this.slider + range;
? ? ? ? ? ? let minY = P.y - this.slider - range;
? ? ? ? ? ? let maxY = P.y + this.slider + range;
? ? ? ? ? ? if (minX < X && X < maxX && minY < Y && Y < maxY) { ? //判断鼠标是否在滑块上
? ? ? ? ? ? this.isDown = true;
? ? ? ? ? ? } else {
? ? ? ? ? ? this.isDown = false;
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? main(){
? ? ? ? ? ? const dom = document.getElementById("content")
? ? ? ? ? ? const obj = {
? ? ? ? ? ? ? ? el: dom,
? ? ? ? ? ? ? ? startDeg:1.5 ? ?,
? ? ? ? ? ? ? ? endDeg: 3.5,
? ? ? ? ? ? ? ? outColor: 'rgba(50, 50, 70, .2)',
? ? ? ? ? ? ? ? counterclockwise: false
? ? ? ? ? ? }
? ? ? ? ? ? this.constructor(obj)
? ? ? ? },
? ? ? ? constructor(param) {
? ? ? ? ? ? this.initParam(param)
? ? ? ? ? ? this.draw(this.value)
? ? ? ? },
? ? ? ? initParam(param) {
? ? ? ? ? ? const {
? ? ? ? ? ? el,
? ? ? ? ? ? startDeg = 1.5,
? ? ? ? ? ? endDeg = 3.5,
? ? ? ? ? ? outColor = "rgba(50, 50, 70, .2)",
? ? ? ? ? ? innerLineWidth = 1,
? ? ? ? ? ? outLineWidth = 5,
? ? ? ? ? ? counterclockwise = true,
? ? ? ? ? ? slider = 8,
? ? ? ? ? ? color = ["#ffffff", "#ffffff"],
? ? ? ? ? ? sliderColor = "#fff",
? ? ? ? ? ? sliderBorderColor = "#33aaff",
? ? ? ? ? ? value = 0,
? ? ? ? ? ? change = (v)=> { ?},
? ? ? ? ? ? textShow = true
? ? ? ? ? ? } = param;
? ? ? ? ? ? this.el = el;
? ? ? ? ? ? this.width = el.offsetWidth;
? ? ? ? ? ? this.height = el.offsetHeight;
? ? ? ? ? ? this.center = this.width / 2
? ? ? ? ? ? this.radius = this.width / 2 - 30; //滑动路径半径
? ? ? ? ? ? this.initCanvas(el);
? ? ? ? ? ? this.startDeg = startDeg;
? ? ? ? ? ? this.endDeg = endDeg;
? ? ? ? ? ? this.outColor = outColor;
? ? ? ? ? ? this.innerLineWidth = innerLineWidth;
? ? ? ? ? ? this.outLineWidth = outLineWidth;
? ? ? ? ? ? this.counterclockwise = counterclockwise;
? ? ? ? ? ? this.slider = slider;
? ? ? ? ? ? this.color = color;
? ? ? ? ? ? this.sliderColor = sliderColor;
? ? ? ? ? ? this.sliderBorderColor = sliderBorderColor;
? ? ? ? ? ? this.value = value;
? ? ? ? ? ? this.textShow = textShow;
? ? ? ? ? ? this.change = change;
? ? ? ? ? ? this.isDown = false;
? ? ? ? ? ? this.event(el)
? ? ? ? },
? ? ? ? OnMouseMove(evt) {
? ? ? ? ? ? if (!this.isDown) return;
? ? ? ? ? ? let evpoint = {};
? ? ? ? ? ? evpoint.x = this.getx(evt);
? ? ? ? ? ? evpoint.y = this.gety(evt);
? ? ? ? ? ? let point = this.spotchangeXY(evpoint);
? ? ? ? ? ? let deg = this.XYToDeg(point.x, point.y);
? ? ? ? ? ? deg = this.counterclockwise ? deg : Math.PI * 2 - deg;
? ? ? ? ? ? let val = (deg/ Math.PI - this.startDeg) / (this.endDeg - this.startDeg) ?* 100
? ? ? ? ? ? if(val<0) val = 100 + val;
? ? ? ? ? ? if(val >= 100) val = 100;
? ? ? ? ? ? if(val <= 0) val = 0;
? ? ? ? ? ? if(Math.abs (val - this.value) > 10) return;
? ? ? ? ? ? //音频定位播放
? ? ? ? ? ? let time = val/this.than;
? ? ? ? ? ? let audio = this.$refs.audio;
? ? ? ? ? ? audio.currentTime = time
? ? ? ? ? ? this.animate = requestAnimationFrame(this.draw.bind(this,val));
? ? ? ? ? ? if(this.value != Math.round(val)){
? ? ? ? ? ? ? ? this.value = Math.round(val);
? ? ? ? ? ? ? ? this.change(this.value)
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? OnMouseUp(evt) { ?//鼠标释放
? ? ? ? ? ? const _this = this
? ? ? ? ? ? cancelAnimationFrame(_this.animate);
? ? ? ? ? ? this.isDown = false;
? ? ? ? ? ? if(this.distance(evt)){
? ? ? ? ? ? ? ? this.playbool = false;
? ? ? ? ? ? ? ? let audio = this.$refs.audio;
? ? ? ? ? ? ? ? //播放音频
? ? ? ? ? ? ? ? audio.play()
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? distance(evt){
? ? ? ? ? ? let x = this.getx(evt);
? ? ? ? ? ? let y = this.gety(evt);
? ? ? ? ? ? let distance = Math.abs(Math.sqrt(Math.pow(x - 135, 2) + Math.pow(y - 135, 2)));
? ? ? ? ? ? if(0<distance && distance<130){
? ? ? ? ? ? ? ? return true
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? return false
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? //点击定位
? ? ? ? clearLocation(evt){
? ? ? ? ? ? let evpoint = {};
? ? ? ? ? ? evpoint.x = this.getx(evt);
? ? ? ? ? ? evpoint.y = this.gety(evt);
? ? ? ? ? ? let point = this.spotchangeXY(evpoint);
? ? ? ? ? ? let deg = this.XYToDeg(point.x, point.y);
? ? ? ? ? ? deg = this.counterclockwise ? deg : Math.PI * 2 - deg;
? ? ? ? ? ? let val = (deg/ Math.PI - this.startDeg) / (this.endDeg - this.startDeg) ?* 100
? ? ? ? ? ? if(val<0) val = 100 + val;
? ? ? ? ? ? if(val >= 100) val = 100;
? ? ? ? ? ? if(val <= 0) val = 0;
? ? ? ? ? ? if(this.distance(evt)){
? ? ? ? ? ? ? ? this.animate = requestAnimationFrame(this.draw.bind(this,val));
? ? ? ? ? ? ? ? //音频定位播放
? ? ? ? ? ? ? ? let time = val/this.than;
? ? ? ? ? ? ? ? let audio = this.$refs.audio;
? ? ? ? ? ? ? ? audio.currentTime = time
? ? ? ? ? ? ? ? audio.play()
? ? ? ? ? ? ? ? audio.pause()
? ? ? ? ? ? ? ? if(this.value != Math.round(val)){
? ? ? ? ? ? ? ? ? ? this.value = Math.round(val);
? ? ? ? ? ? ? ? ? ? this.change(this.value)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? //绘图
? ? ? ? draw(value) {
? ? ? ? ? ? this.ctx.clearRect(0, 0, this.width, this.width);
? ? ? ? ? ? this.ctx.save();
? ? ? ? ? ? let startDeg = this.counterclockwise ? Math.PI * (2 - this.startDeg) : Math.PI * this.startDeg
? ? ? ? ? ? let endDeg = this.counterclockwise ? Math.PI * (2 - this.endDeg) : Math.PI * this.endDeg
? ? ? ? ? ? // 绘制外侧圆弧
? ? ? ? ? ? this.ctx.beginPath();
? ? ? ? ? ? this.ctx.arc(this.center, this.center, this.radius, startDeg, endDeg, this.counterclockwise); // 绘制外侧圆弧
? ? ? ? ? ? this.ctx.strokeStyle = this.outColor;
? ? ? ? ? ? this.ctx.lineCap = "round";
? ? ? ? ? ? this.ctx.lineWidth = this.outLineWidth;
? ? ? ? ? ? this.ctx.stroke();
? ? ? ? ? ? let Deg = this.valToDeg(value)
? ? ? ? ? ? // 绘制可变圆弧
? ? ? ? ? ? let themeColor = (typeof this.color == 'String') ? this.color : this.setLinearGradient()
? ? ? ? ? ? this.ctx.beginPath();
? ? ? ? ? ? this.ctx.arc(this.center, this.center, this.radius, startDeg, Deg, this.counterclockwise); // 可变圆弧
? ? ? ? ? ? this.ctx.strokeStyle = ?themeColor;
? ? ? ? ? ? this.ctx.lineCap = "round";
? ? ? ? ? ? this.ctx.lineWidth = this.outLineWidth;
? ? ? ? ? ? this.ctx.stroke();
? ? ? ? ? ? // 绘制滑块
? ? ? ? ? ? this.P = this.DegToXY(Deg)
? ? ? ? ? ? this.ctx.beginPath();
? ? ? ? ? ? this.ctx.moveTo(this.center, this.center);
? ? ? ? ? ? this.ctx.arc(this.P.x, this.P.y, this.slider, 0, Math.PI * 2, false); // 绘制滑块
? ? ? ? ? ? this.ctx.fillStyle = this.sliderColor;;
? ? ? ? ? ? this.ctx.fill();
? ? ? ? },
? ? ? ? initCanvas(dom) {
? ? ? ? ? ? this.canvas = document.createElement("canvas");
? ? ? ? ? ? this.canvas.setAttribute("id", "dragArc");
? ? ? ? ? ? this.canvas.setAttribute("width", this.width);
? ? ? ? ? ? this.canvas.setAttribute("height", this.width);
? ? ? ? ? ? dom.appendChild(this.canvas);
? ? ? ? ? ? this.ctx = this.canvas.getContext("2d");
? ? ? ? ? ? this.isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
? ? ? ? },
? ? ? ? //将值转化为弧度
? ? ? ? valToDeg(v) {
? ? ? ? ? ? let range = this.endDeg - this.startDeg;
? ? ? ? ? ? let val = range / 100 * v;
? ? ? ? ? ? if(this.counterclockwise && (val !=0) ) val = 2 -val;
? ? ? ? ? ? let startDeg = this.counterclockwise ? (2 - this.startDeg) : this.startDeg;
? ? ? ? ? ? return (startDeg + val) * Math.PI;
? ? ? ? },
? ? ? ? // 弧度转化为对应坐标值
? ? ? ? DegToXY(deg) {
? ? ? ? ? ? let d = 2 * Math.PI - deg;
? ? ? ? ? ? return this.respotchangeXY({
? ? ? ? ? ? x: this.radius * Math.cos(d),
? ? ? ? ? ? y: this.radius * Math.sin(d)
? ? ? ? ? ? })
? ? ? ? },
? ? ? ? //canvas坐标转化为中心坐标
? ? ? ? spotchangeXY(point) {
? ? ? ? ? ? const spotchangeX = (i) => {
? ? ? ? ? ? return i - this.center
? ? ? ? ? ? }
? ? ? ? ? ? const spotchangeY = (i) => {
? ? ? ? ? ? return this.center - i
? ? ? ? ? ? }
? ? ? ? ? ? return {
? ? ? ? ? ? x: spotchangeX(point.x),
? ? ? ? ? ? y: spotchangeY(point.y)
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? //中心坐标转化为canvas坐标
? ? ? ? respotchangeXY(point) {
? ? ? ? ? ? const spotchangeX = (i) => {
? ? ? ? ? ? return i + this.center
? ? ? ? ? ? }
? ? ? ? ? ? const spotchangeY = (i) => {
? ? ? ? ? ? return this.center - i
? ? ? ? ? ? }
? ? ? ? ? ? return {
? ? ? ? ? ? x: spotchangeX(point.x),
? ? ? ? ? ? y: spotchangeY(point.y)
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? setLinearGradient(){
? ? ? ? ? ? const grad ?= this.ctx.createLinearGradient(0,0, 0,this.width);
? ? ? ? ? ? this.color.forEach((e, i) => {
? ? ? ? ? ? ? ? if(i == 0){
? ? ? ? ? ? ? ? ? ? grad.addColorStop(0, e)
? ? ? ? ? ? ? ? }else ?if(i == this.color.length - 1){
? ? ? ? ? ? ? ? ? ? grad.addColorStop(1, e)
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? grad.addColorStop(1/this.color.length * (i+1), e);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? return grad;
? ? ? ? },
? ? ? ? // 将坐标点转化为弧度
? ? ? ? XYToDeg(lx, ly) {
? ? ? ? ? ? let adeg = Math.atan(ly / lx)
? ? ? ? ? ? let deg;
? ? ? ? ? ? if (lx >= 0 && ly >= 0) {
? ? ? ? ? ? deg = adeg ;
? ? ? ? ? ? }
? ? ? ? ? ? if (lx <= 0 && ly >= 0) {
? ? ? ? ? ? deg = adeg + Math.PI;
? ? ? ? ? ? }
? ? ? ? ? ? if (lx <= 0 && ly <= 0) {
? ? ? ? ? ? deg = adeg + Math.PI;
? ? ? ? ? ? }
? ? ? ? ? ? if (lx > 0 && ly < 0) {
? ? ? ? ? ? deg = adeg + Math.PI * 2;
? ? ? ? ? ? }
? ? ? ? ? ? return deg
? ? ? ? },
? ? ? ? //获取鼠标在canvas内坐标x
? ? ? ? getx(ev) {
? ? ? ? ? ? if(!this.isMobile) return ev.clientX - this.el.getBoundingClientRect().left;
? ? ? ? ? ? if(ev.touches.length){
? ? ? ? ? ? ? ? return ev.touches[0].pageX - this.el.getBoundingClientRect().left;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? return ev.changedTouches[0].pageX - this.el.getBoundingClientRect().left;
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? //获取鼠标在canvas内坐标y
? ? ? ? gety(ev) {
? ? ? ? ? ? if(!this.isMobile) return ev.clientY - this.el.getBoundingClientRect().top;
? ? ? ? ? ? if(ev.touches.length){
? ? ? ? ? ? ? ? ?return ev.touches[0].pageY - this.el.getBoundingClientRect().top;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? return ev.changedTouches[0].pageY - this.el.getBoundingClientRect().top;
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? //节流
? ? ? ? throttle(func) {
? ? ? ? ? ? let previous = 0;
? ? ? ? ? ? return function() {
? ? ? ? ? ? ? ? let now = Date.now();
? ? ? ? ? ? ? ? let context = this;
? ? ? ? ? ? ? ? let args = arguments;
? ? ? ? ? ? ? ? if (now - previous > 10) {
? ? ? ? ? ? ? ? ? ? func.apply(context, args);
? ? ? ? ? ? ? ? ? ? previous = now;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? }
}
</script>
<style scoped>
.circle_box{
? ? ?position: relative;
? ? ?padding-top: 130px;
? ? ?top: 0;
? ? ?left: 0;
? ? ?width: 100%;
? ? ?height: 245px;
}
#content{
? position: absolute;
? left: 50%;
? transform: translateX(-50%);
? height: 240px;
? width: 270px;
}
.img_0{
? position: absolute;
? top: 175px;
? left: 50%;
? transform: translateX(-50%);
? width: 180px;
? height: 180px;
? border-radius: 50%;
? z-index: 5;
}
.img_1{
? position: absolute;
? left: 50%;
? transform: translateX(-50%);
? top: 243px;
? width: 34px;
? height: 46px;
? z-index: 10;
}
.posi{
? ? position: absolute;
? ? left: 0;
? ? top: 10px;
? ? z-index: 1000;
}
</style>