姚辉乾-CSDN博客

原创 vue支付宝pc支付的扫码支付和跳转支付两种支付方式

支付宝的PC支付分为两种前置模式支付和跳转模式支付前置模式和跳转模式，需要后台在支付宝的api中配置（无关前端）跳转模式。前置模式是将二维码前置到商户的订单确认页的模式。需要商户在自己的页面中以 iframe 方式请求支付宝页面。具体分为以下几种： 0：订单码-简约前置模式，对应 iframe 宽度不能小于600px，高度不能小于300px； 1：订单码-前置模式，对应iframe 宽度不能小于 300px，高度不能小于600px； 3：订单码-迷你前置模式，对应...

2020-05-12 10:29:45 11352 3

原创 mpvue使用vuex基本步骤以及如何使用

第一步，肯定先加载VUEX呀在根目录创建store.js在里面引入vue vuex 从'vue'导入Vue 从'vuex'导入Vuex Vue.use（Vuex）;开始工作已经完成我们先来了解一下Vuex的核心Vuex用来状态管理。Vuex的五大核心就是state, getters, mutations, actions, ...

2018-10-23 11:28:12 7992 7

原创 1111111111

<!DOCTYPE html><!-- saved from url=(0500)http://localhost:8081/crm-api/html/pay/pricePolicyBestNew?param=eyJzaWduYXR1cmVUaW1lIjoiMjAyMjA0MTUxNTQ5NTYiLCJub25jZSI6IjgzODgwOCIsInBhdGll%0D%0AbnRJZCI6IjExOTE5MiIsImVtcGlJZCI6IjExOTE5MiIsImhvc3BpdGFsSW.

2022-04-18 15:49:58 557

原创多行 ==== 展开

// 获取字符串省略号 substring(str, len, flow) { if ( !str) return ''; str = str.toString(); var newStr = "", strLength = str.replace(/[^\x00-\xff]/g, "**").length, flow = typeof(flow) == 'undefined' ? '...' : flow; if (strLength <=...

2022-03-02 15:00:05 253

原创 Vue相关API盘点

数据相关APIVue.set向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。使用方法：vue.set(target, propertyName/index, value)范例：批量设置商品价格<template><p><i nput v-model.number="pri ce">vbutton @click="batchupdate"> 批量更新价格 </bu

2021-08-11 09:55:46 447

原创 Vue组件化的理解

组件化是Vue的精髓，Vue应用就是由一个个组件构成的。Vue的组件化涉及到的内容非常多.当面试时被问到：谈一下你对Vue组件化的理解。这时候有可能无从下手，可以从以下几点进行阐述：定义：组件是可复用的Vue实例，准确讲它们是V ueComponent的实例，继承自Vue。优点：从上面案例可以看出组件化可以增加代码的复用性、可维护性和可测试性。使用场景：什么时候使用组件？以下分类可作为参考：通用组件：实现最基本的功能，具有通用性、复用性，例如按钮组件、输入框组件、布局...

2021-08-09 16:14:01 745 1

原创声网微信小程序一对一语音通话

微信小程序目前开通的live-player和live-pusher可以在微信小程序中进行一对一和一对多聊天我们可以去声网中注册一个的appid，https://docs.agora.io/cn声网Api地址开发和融云的IM即时通讯非常相似视频聊天的基本流程<live-player id="player" src="{{rtmp 播放地址}}" mode="RTC" bindstatechange="playerStateChange" object-fit="fillCro.

2021-03-15 12:45:12 1670

原创即时通讯 emj.js文件

export const emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/'export const emojiMap = { '[NO]': 'emoji_0@2x.png', '[OK]': 'emoji_1@2x.png', '[下雨]': 'emoji_2@2x.png', '[么么哒]': 'emoji_3@2x.png', '[乒乓]': 'emoji_4@2x.png', '[便便]'.

2020-11-30 14:10:19 1432

原创 react中props属性传值以及props传递函数

react中父子组件传值以及调用方法props传值以及传递方法父组件传值给子组件：如果我需要把contatcFrom里面的值传给子组件，可以这样做： <Contact contatcForm={this.state.contatcForm} />子组件接收contatcFrom，可以这样做：this.props.contatcForm 或者解构赋值const Contact = ({ contatcForm}) => { console.log(cont...

2020-11-22 17:18:08 8392 2

原创 React组件卸载后的问题

状态改变容易问题第一种解决方式：componentWillUnmount(){ //组件将要卸载this.setState = () =>{ return}}第二种解决方式：加开关_onOff

2020-08-12 14:08:30 745

原创 react动态路由传值和get

路径传参：可以用<Route path='/newsdeta/:id' component={Newsdeta}></Route>在组件里面就可以用:this.props.match.params.idimport React, { Component } from 'react';class newsdeta extends Component { render() { const id = this.props conso

2020-08-12 12:44:38 663

原创 react 404 和重定向

cnpm i react-router-dom -Simport React from 'react';import Home from './component/home/index.jsx';import New from './component/home/new.jsx';import User from './component/home/user.jsx';import { BrowserRouter } from 'react-router-dom'fu.

2020-08-11 15:52:18 783

原创 react的生命周期以及快捷键 Mounting 初始化阶段过程

组件创建到首次渲染到页面1.constructor() 构造函数，在创建组件的时候调用一次2.componentWillmount()在组件即将被挂载的时候调用一次。组件还没渲染出来但是js逻辑已经开始执行了，一般异步的方法（ajax）请求数据3.render渲染4.componentDidMount()在组件被挂载完成的时候调用一次可以在这里使用refs 组件已经被渲染出来了...

2020-08-04 11:52:42 601

原创 vue css刻度尺找到对应节点

vue css刻度尺找到对应节点<template> <div class="a"> <div class="b"> <div class="b1"> <div class="b2" v-for="(item,index) in list" :key="index"> <span class="b22">{{item.nam.

2020-06-29 17:31:25 1173 1

原创 vue 客服腾讯云即时通讯IM 小demo

第一步按照即时通讯IM文档来安装第二步在main.js 引入第三步找一个空页面粘贴过去就可以了具体效果图：业务逻辑代码如下：<template> <div class="box" v-loading="loading"> <div class="t_left"> <div class="seek"> <el-input placeho...

2020-06-28 19:00:04 3564 33

原创 canvas 保存图片长按保存

let qian = canvas.toDataURL("image/png"); document.getElementById('cc').src = qian;

2020-06-21 13:44:49 1818

原创 VUE移动端浏览器分享事件（微信，QQ，新浪微博）NativeShare.js

先看一下效果图：点击右上角的分享按钮，触发百度浏览器的分享事件，来实现分享。目前只支持UC浏览器百度浏览器等主流浏览器。使用NativeShare.js 来达到上述功能的实现如何在Vue中使用：第一步：安装依赖：npm installnativeshare第二步：在需要的vue组价或页面引入import NativeShare from 'nativeshare'第三步：在点击分享的地方创建方法：@click="onSelect()"第四步：在...

2020-05-18 15:40:21 4411

转载 Moment.js常见用法总结

Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。接下来，我将按照这些操作对Moment.js中的Doc进行整理分类，方便学习和日后的查阅。获取时间 Start of Time moment().startOf(S...

2020-04-28 15:31:03 544

原创 H5 和 APP交互 h5调用app方法传参

今天遇到一个需求，是点击分享按钮，需要调用app的原生分享app那边写好了一个方法是onShare( )我们第一步就是点击分享好友触发第二步：onShare () { if(this.isAndroid_ios()) { console.log('安卓') window.local_obj.onShare('1') }else { console...

2020-04-10 18:10:44 4729

原创 js vue保留两位小数函数(0.00)格式

// 保留两位小数函数function toDecimal2(x) { var f = parseFloat(x); if (isNaN(f)) { return false; } var f = Math.round(x*100)/100; var...

2020-04-06 17:06:21 3185

原创 vue渲染数据给前三个和后三个的盒子添加不同样式

:class="index>2&&Number(index+3)<ztlist.length?'qian':'qian redd'"

2020-01-29 23:03:00 1283

原创 vue中如何调用iframe的方法传值和iframe如何给vue传值

iframe给Vue页面传值第一步：需要在iframe的index.html 的js 加入下面代码<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>PHPWord</...

2020-01-15 18:56:23 12170 4

原创 vue订单倒计时

写一个组件代码<template> <span :endTime="endTime" :callback="callback" :endText="endText"> <slot> {{content}} </slot> </span></templat...

2020-01-07 16:20:51 1968

原创 VUE微信公众号签名错误 invalid signature 有时OK 有时报错

做项目的时候，需要用到微信的jsdk 但是有的时候可以wx.config是Ok的，有的时候是错误的有百分之90的几率是路径导致的，不要再去看是否签名错误了。路径这样获得:location.href.split('#')[0]才可以。我之前用的是location.href。这样反而会出现奇怪的bug。当时是一次就过，就没有发现错误。let urla = location...

2019-12-04 10:20:37 1198

原创 vue单页面，在微信公众号支付中遇到的URL未注册BUG解决方法

今天在做微信公众号支付的时候，遇到一个bug，在当前支付页面点击支付，就会报错，提示当前页面的URL未注册。如下图：但是，这个URL我们是在后台微信公众号配置了的，所以说不会出错。但是我们刷新一次当前页面，再点击立即充值就会成功。我就在里面写了一个刷新当前页面的方式，来进行支付。但是试了好几种刷新当前页面的方法，都不可以。在了解到，vue在微信里的刷新方式是不生效的。最终发现了...

2019-11-21 11:13:55 5209 2

原创 vue登录，滑动验证码

第一步：npm install --save vue-monoplasty-slide-verify第二步：main.js配置import Vue from 'vue';import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVerify);第三步：vue页面或组件：// template&...

2019-11-20 10:25:35 6524 2

原创 vue登录注册如何实现图像验证码

先来上图，看一下最终效果图公司的一个新项目，需要用到图形验证码进行判断。第一步：需要把identify放到所需要的组件里面，把下面的代码塞进去即可。<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="content...

2019-11-04 18:55:40 13750 2

原创 vue跨域proxytable

xios vue 反向代理跨域1.config 下面的index.js找到proxytable进行替换proxyTable: { '/api': { //使用"/api"来代替"http://f.apiplus.c" target: 'http://www.dajiwuhui.com', //源地址 changeOrigin: true, //...

2019-10-11 17:44:57 359

原创 vue根据id进行排序，一行代码搞定

这是后台返回的数据这是升序self.shopList = data.data.content.list.sort( (pre, cur) => pre.id - cur.id);这是降序self.shopList = data.data.content.list.sort( (pre, cur) => cur.id - pre.i...

2019-10-09 15:19:43 2835 2

原创 H5页面分享到朋友圈，自定义标题描述封面图前端+php代码

2019-09-30 11:02:27 1440

原创原生微信小程序使用setData修改数组中的指定下标的属性值

Component({ data: { list: [{ id: '1', name: '5', price: 'Coupon', show: true, }, { id: '2', name: '10', price: 'Coupon', show: false, }, ...

2019-08-29 16:33:31 951

原创 js去掉json中重复的id 重新push新的对象属性

2019-08-26 09:54:49 1414

原创微信小程序里面的图片自适应

微信小程序里面的img width：100%；height：auto；在微信小程序里面是不会显示的在mpvue里面 img 或者原生小程序 image 里面 mode='widthFix' 加入这个属性给图片一个宽度100% 图片就会自适应例如下面的：<img mode='widthFix' :src="imgUrls.dimage" /><...

2019-08-13 11:20:30 453

原创 js去除base前缀，前几位

fmg.replace(/^data:image\/\w+;base64,/, "")fmg 就是去除前缀后的base64格式<template> <div class="info"> <div class="infoLive"> <div class="infoTop"> ...

2019-06-13 16:19:52 5340

原创【VUE】vue-awesome-swiper 在vue中不自动轮播的.需要触发一下才自动轮播的问题

1.首先安装vue-awesome-swiper(安装前首先按照nodejs,vue)npm install vue-awesome-swiper --save2.在main.js中引入安装的依赖import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport 'swiper/dis...

2019-06-11 14:30:13 4492

原创 vue只渲染前几个数据

<ulid="example"><liv-for="(item,index)initems"v-if='index<2'>{{index}}-{{item.message}}</li></ul>

2019-06-06 17:14:51 5346 7

原创 js实时监听input框的字数变化

<textarea oninput="aa()" onpropertychange="aa()" maxlength="140" id="a"></textarea> <script> function aa(){ console.log(document.getEle...

2019-06-03 16:43:09 2481

原创 vue多个列表点击一次选中，双击取消

遍历出data里面的数据 v-for给li加点击事件绑定class样式怎么控制样式的显示通过 class的控制v:bind:class={class:index==变量}下标和class变量是否相等控制truefalse代码：<div id="app"> <ul> ...

2019-05-24 11:02:50 2111

原创 vue-video-player 如何for循环遍历多个视频options="playerOptions"

直接上代码，按照正常逻辑走，只能遍历一个。目前项目遇到这个问题，度娘很久没有找到，只能自己手动解决了上代码<div class="reply_con" v-for="(item,index) in reply" :key="index" ><video-player class="video-player-box ovideo" ref="vi...

2019-05-07 16:05:28 11097 6