用小程序的 animation 属性实现循环动画的开启与暂停，并封装到组件。 实现一个字体图标组件的循环旋转动画开启/暂停用于点击图标，字体颜色变换，开始循环旋转动画，并刷新内容刷新结束，停止动画，并设置字体颜色为原来的主要利用 setInterval 定时器循环执行动画首先，组件写出来添加点击事件，动画属性， style 属性（用来动态修改样式） src/components/refresh.vue<template><div><divclass="iconfont icon-shuaxin":animati...
问题描述Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动，触发相应的方法，比如queryData: {name: ,creator: ,selectedStatus: ,time: [],}, 第一种解决方案：直接对象现在我需要监听这个queryData，我可以这样做： watch: {queryData: {handler: function() {//do something},deep: true} } 第二种解决方案：deep里面的deep设为了true，这样的话，如果修改了这个queryData中的任何一个属性，都会执行handler这个方...
项目需求写完有一段时间了，但是还是想回过来总结一下，一是对项目的回顾优化等，二是对坑的地方做个记录，避免以后遇到类似的问题。 需求 利用微信强大的社交能力通过小程序达到裂变的目的，拉取新用户。 生成的海报如下需求分析 1、利用小程序官方提供的api可以直接分享转发到微信群打开小程序 2、利用小程序生成海报保存图片到相册分享到朋友圈，用户长按识别二维码关注公众号或者打开小程序来达到裂变的目的 实现方案 一、分析...
前言：应项目要求，需要使用微信小程序做支付，写完后告知手续费太高方案不予通过（宝宝心里苦，但宝宝不说）。此次开发在因站在巨人的肩膀上顺利完成。 微信支付文档传送门：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3 1.开发工具： Eclipse+Tomcat+微信web开发工具 2.开发环境： java+maven 3.开发前准备： 3.1 所需材料 小程序的appid，APPsecret，支付商户号（mch_id），商户密钥(key)，付款用户的o...
现在的网站开发，都绕不开微信登录（毕竟微信已经成为国民工具）。虽然文档已经写得很详细，但是对于没有经验的开发者还是容易踩坑。 所以，专门记录一下微信网页认证的交互逻辑，也方便自己日后回查： 加载微信网页sdk绘制登陆二维码：新tab页面绘制 / 本页面iframe绘制用户扫码登陆，前端跳入回调网址回调网址进一步做逻辑处理，如果是页内iframe绘制二维码，需要通知顶级页微信网页SDK加载在多人团队协作中，加载资源的代码需要...
fetch的由来和定义 fetch的由来 众所周知，传统 Ajax （指 XMLHttpRequest）是最早出现的发送异步请求技术，其核心是使用XMLHttpRequest对象。但是它也存在一些令人头疼的问题：XHR 是一个设计粗糙的 API，不符合关注分离的原则；配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。而Fetch 的出现就是为了解决 XHR 存在的问题。 fetch的定义和使用 MDN中的描述...
微信小程序官方是没有提供退出的API的，但是在navigator这个组件中，是有退出这个功能的：详情参考官方文档：navigator。 示例代码：<navigator open-type="exit" target="miniProgram">关闭小程序</navigator>不过这个功能最低支持版本时 2.1.0 ，如果一定要使用这个功能，那么最好在小程序管理后台中设置最低基础库版本不低于2.1.0，如果对小程序支持的最低基础库低于2.1.0，那么可以对小程序基础库版本进行判断，支持小程序退出...
以前做这种操作就是简单的display：block，但现在用户的要求也越来越高，需要美观和动画感。 现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单。 看下效果图：点开效果：其实原理比较简单，就是通过子菜单的 max-height: 0;和 max-height: 2000px来实现子菜单的显示和关闭。加上css3的 transition: max-height .3s;来实现动画效果。 子菜单的样式：.tree-son-menu{background-color: #FFF;.menu-body {z-index: 20;positio...
文字比较难解释，直接看图应该就懂是要做什么了。需求 工作中遇到的，需求就是超过四行得有个展开按钮，点击展开显示所有内容，不超过四行的话就不需要这个按钮并显示所有内容。 思路首先得判断文本自否超过四行，因为这些一般都是是前端异步请求然后后端发送过来，在组长的指导下，使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化。接下来主要是 css 上的思路，其实上图可以分为两部分，如下图，标号1的部分展示前面三行，标号...
组件的通信一般常见的组件之间的通信有以下几种情况，A和B，B和C，B和D之间都是父子关系，C和D之间是兄弟组件关系。常用的通信手段有两种：1.ref：给元素或组件注册引用信息2.children:访问父级组件和子组件的实例。这两种方式都是直接通过实例的方式获取的方式。示例如下：//comA组件A export default {data () {return {title: 测试通信}},methods: {sayHello () {window.alert(你好);}} } 这里引用组件A<template><comA ref="co...
前言随着前端技术的飞速发展，前端开发也从原始的刀耕火种，向着工程化效率化的方向发展。在各种开发框架之外，打包编译等技术也是层出不穷，开发体验也是越来越好。例如HMR，让我们的更新可以即时可见，告别了手动F5的情况。其实现就是监听文件变化自动调用构建过程。下面就关注下如何实现node监听文件变化。场景假定要监听index.js，每当内容更改重新编译。我们就用简单的console来标识执行编译。下面就是实现该功能。 node原生A...
写在前面vue-cli 3.x 的beta版本已经发布了一段时间，很早就像体验一番一直找不到时间。这些日子刚好有空就想着依照网上的一些例子练下手，刚一上手就踩到坑了。3.x 版本对整个项目的构建都有很大的改动，项目的默认配置整个都转移到CLI service里去了，从而所有的配置文件在初始化的项目中并没有生成。初次生成项目的时候可谓是完全懵的，无论是baidu还是google，对于3.x的介绍几乎就没有，仅有的一些也只是项目的一些生成流程，那...
前言下班前，20分钟，发一篇。。。简单介绍，使用keep-alive的时候，返回前一页，没有保持滚动条位置。事实上，就算不使用keep-alive，位置也没有被记录。但是，在不适用keep-alive的时候，页面内容会刷新，所以就随他去了……就是这么任性…… 思路官方有推荐一个scrollBehavior，链接，但是上面标注，只在history.pushState的浏览器生效，不知道是不是只能开启history.pushState才可以使用，看了下实现，挺不友好的，还是自己搞一...
解决微信小程序调豆瓣电影（小说）api时显示400、403问题 以获取豆瓣热映电影为例： 请求接口： 我这里使用的是uni-app框架（多端发布的一款框架，基于vue语法，正在踩坑中） onLoad() {uni.request({url: http://api.douban.com/v2/movie/in_theaters,method: GET,data: {},success: res => {console.log(res)},fail: () => {},complete: () => {}});},来看看返回了什么：原因是豆瓣那边设置了对小程序的访问权限 解决办法总是有的...
在项目中遇到了一个性能问题 vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下 2、如果我不想分页，又想在一页显示全部数据呢？这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据当将滚动条拉到低的时候，就会再加载31条数据，如果剩下的数据不足31，那就加载剩下的 根据项目需求，这...