- 博客(154)
- 资源 (2)
- 收藏
- 关注
原创 019-Vuex状态管理
一、Vuex简介vue应用程序的状态管理模式。他采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex包含部分ViewActionsMutationsState一句话总结上图:Vuex模块间可以共享状态。vue组件dispatch发送事件触发Actions,Actions可以进行异步请求,再去触发Mutations,Mutation...
2019-08-02 17:49:49
250
原创 018-Vue项目生成模拟数据
开发过程中,与后端未搭建好联调环境时,没有数据。此时前端无法进行测试,开发起来就比较头疼了。使用mockjs,拦截Ajax请求,并且随机生成和后端协商好的数据格式,这样即使服务端环境无法使用,前端也可以愉快的coding了。接下来聊聊它的使用方法吧:一、node环境1、在项目中初始化mock.jsnpm i mockjs2、创建mock数据文件// 引入Mock对象import...
2019-07-24 15:34:11
282
原创 010-微信小程序支付
微信小程序支付流程:上图摘自官方文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3微信小程序支付其实很简单,我把他拆成以下几个简单的步骤:1、登录获取code;2、用code向服务端换取openid;3、向服务端获取数据签名;4、调用小程序API唤起支付弹窗;data ...
2019-07-23 14:49:07
236
原创 009-用户分享(点击按钮分享)
button组件,在小程序中是一个功能强大的组件。其中有些原生组件所没有的功能。这就要归功于open-type属性。可以打开会话、获取用户信息、打开APP、打开授权设置页、分享等功能。// 1、点击去分享<button open-type="share">分享</button>// 2、监听分享:页面Page的onShareAppMessage事件处理函数。on...
2019-07-23 14:19:31
454
原创 017-vue项目config中index.js配置解析
1、build对象 对于 生产环境 的配置: index:配置打包后入口.html文件的名称以及文件夹名称 assetsRoot:配置打包后生成的文件名称和路径 assetsPublicPath:配置 打包后 .html 引用静态资源的路径,一般要设置成 "./" productionGzip:是否开发 gzip 压缩,以提升加载速度2、dev 对象下 对于 开发环境 的配置:po...
2019-07-18 17:35:22
698
原创 BFC(Block Formatting Context)
是什么,从哪里来BFC,拥有独立渲染(排版)规则来约束盒模型的块级区域。IFC(Inline Formatting Context)同样管理inline元素排布规则的就是IFC。那么,他们是从何而来呢?CSS2.1+中规定一下方式可以生成BFC:1、根元素;2、float值不为none;3、overflow不为visible;4、display值为flex、inline-block...
2019-07-05 11:21:56
195
原创 jq请求数据时,cookie丢失问题
解决:$.ajax({ url: `${process.env.BASE_API}/offical/rw-recruit/list?pageNum=1&pageSize=2`, type: "GET", xhrFields: { // 详情查看jq官方文档 withCredentials: true }, succe...
2019-06-18 18:02:35
1128
原创 antd-mobile采坑
1、SearchBar 在第一次进入页面或者刷新页面时,样式错乱;当聚焦再离焦之后样式正常。解决办法:.am-search-input{ max-width: 100%;}问题样式图片:
2019-04-08 15:11:07
1279
原创 fetch实现跨域问题
CORScors是"Cross-Origin Resource Sharing"的简称,是实现跨域的一种方式,相对于其他跨域方式,比较灵活,而且不限制发请求使用的method。const Headers = new Headers({ 'Access-Control-Allow-Origin':'*', "Content-Type":'text/plain'})fetch(`h...
2019-04-03 16:28:07
13593
5
原创 钉钉微应用---导航栏(页面分享功能)
const isdingding = () => { //判断是不是钉钉 var ua = navigator.userAgent.toLowerCase(); return ua.indexOf("dingtalk") >= 0;};if (isdingding()){ // 右侧导航点击 dd.biz.navigation.setRight({ sh...
2019-04-03 11:11:33
4944
原创 图片等比例展示
/** * 图片等比例缩放 * @param boxW 容器宽 * @param boxH 容器高 * @param imgOriW 原始图片宽 * @param imgOriH 原始图片高 * @return {w: width,h: height} */const imgScale = (boxW, boxH ,imgOriW, imgOriH) => { ...
2019-03-27 17:37:49
614
原创 context使用(组件通信方式之一)
context 通过组件树进行数据传递的方式。优点:跨级组件不需要一级一级的传递props,比如孙组件可以直接访问到祖组件的数据。缺点:旧版使用方式// 一、父级组件import React, { Component } from 'react';import PropTypes from 'prop-types';import RouterCom from './router';...
2019-01-20 17:22:58
1274
原创 函数节流
按钮的重复点击、keyup事件、页面的resize、元素的拖拽等都有可能在极短的时间内,频繁调用处理函数。这样高频率的调用可能会使程序卡慢,更甚可能导致浏览器直接崩溃。因此,函数节流是一种解决办法。函数节流原理函数节流原理很简单,就是通过定时器来控制事件处理函数的调用。第一次事件响应之后,添加延迟定时器,等时间结束之后再次响应处理程序,并清理掉定时器。在第一次事件响应和第二次事件响应间...
2019-01-15 17:26:51
914
原创 回调地狱
异步回调地狱,通常的表现为:JS函数从上至下的层层嵌套,前面函数是后面函数的所需参数。$.ajax({ type:'post', url:'/index/jquerydata', dataType:'json', success:(res)=&amp;gt;{ if (res.success) { ...
2018-12-10 16:19:39
603
原创 DOM自定义事件简用
自定义事件,就是有别于浏览器、系统特定的行为事件(类似于click、mouseover、touchstart、keydown等),事件名称可以随意定义,可以通过特定的方法进行添加,触发以及删除。const handler = (event) => { console.log(event);}// 1、注册事件对象,传递事件数据const timeOutEvent = new Cu...
2018-12-10 15:38:13
445
原创 回调函数
定义通过函数指针调用的函数。若函数(或者改函数的指针)作为参数传递给另一个函数,且改函数被调用了,那么这个函数就是回调函数。异步操作之后常执行回调函数,比如文件的下载、数据的读取等相关操作。与不同函数的不同a、不同函数被调用之后会立即执行;b、回调函数必须等到程序执行完成之后才会调用。var url= 'http://jiekou';var xhr = new XMLHttpRequ...
2018-12-08 16:18:00
227
原创 内存泄漏
是什么一块内存不在被应用程序所使用时,由于某些原因这块内存没有返还给操作系统或者空闲内存池的现象。会导致什么运行缓慢,崩溃,高延迟,甚至一些与其他应用相关的问题。常见的内存泄漏1、意外的全局变量// 在函数作用域中使用未声明的变量,该变量就是全局变量。function foo(arg) { // 变量bar相当于window.bar bar = "this is a hidden...
2018-11-30 14:22:13
160
原创 复杂判断简单化
条件判断还在使用if-else或者switch?是时候换换口味了。一、一元判断A、if-elseif (status == 'signIn') { sendLog('processing'); loadScene('hall');} else if (status == 'init') { sendLog('processing'); loadScene('hall');} el...
2018-11-29 10:56:56
261
原创 new 绑定
在JS中常用new关键字来调用构造函数,创建对象。那么new之后执行了哪些操作:var obj = new Fn();1、var obj = {};在堆空间中开辟一块区域,存放空对象、空数组等;2、obj.proto = Fn.prototype;将空对象的原型指向new对象的构造函数;(设置原型链)3、Fn.call(obj);让Fn的this指向obj,并执行Fn的函数体。温馨...
2018-11-28 18:05:13
305
原创 016、双向绑定实现
通过 Object.defineProperty 实现。自定义双向绑定:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head>&a
2018-11-14 15:55:57
290
原创 017-使用PropTypes进行类型校验
PropTypes 是React内置类型检查功能,可以检查组件的属性等。PropTypes包含了一套验证器,以确保接收的数据是正确的有效的。若接收的值是无效的就会在控制台打印出警告(只在开发模式下进行检查)。温馨提示:v15.5+用prop-types代替了PropTypes。import React,{Component} from 'react';import PropTypes f...
2018-10-30 11:41:45
325
原创 url、href、src
一、url(uniform resource locator)统一资源定位器即网页地址1、格式:协议类型:[// 服务器地址[:端口号]][资源层级文件路径]文件名?查询2、语法:scheme://host.domain:port/path/filenamea、scheme:网络协议类型;http、https、ftp(文件传输协议)、fileb、host:定义域主机(http的默认主机...
2018-10-29 17:40:09
228
原创 010-JSX表达式
React中的JSX在react中使用JSX来代替常规的JS,像XML的JS语法拓展。使用JSX// 1、JS表达式// a1、标签属性render () { var flag = true; return ( &amp;amp;lt;input type='button' value='默认按钮' disabled={flag} /&amp;amp;gt; )}// a2、innerHTML&amp;amp;lt;p...
2018-10-16 00:04:26
320
原创 011-state属性
是什么是 一个UI数据模型,是组件渲染时的数据依据;是页面组件的支撑属性。工作原理state属性对组件进行更新之后,会自动将状态反应到虚拟DOM上,最后将信息更新到DOM上。如何使用import React,{Component} from 'react';class StateComponent extends Component { constructor ( ) { /*...
2018-10-15 22:43:51
232
原创 004-react-devtools安装和使用
在运行react项目时,安装react-devtools使调试更方便。1、下载.crx文件;2、打开拓展程序点击上图所指图标,找到菜单中的‘更多工具’—‘拓展程序’;页面如下:3、将.crx文件拖拽到拓展程序所在页面,显示如图信息即为添加成功;4、运行react项目之后,打开控制台,若出现如下情况则为正常,若没有显示“React”属性,则进行拓展程序中查看插件相应权限是否开启。...
2018-10-12 17:27:36
3331
1
翻译 多分辨率、自适应控件
一、Widget实现多分辨率自适应排版基础。在运行时每帧都按照设置的对齐策略进行对齐,组件所在节点的位置(position)和尺寸(width,height)属性可能会被限制,不能通过 API 或动画系统自由修改。top、right、bottom、left值可以像素也可以是百分比。参考:http://docs.cocos.com/creator/manual/zh/components/w...
2018-09-19 18:42:30
248
原创 判断运行平台(终端)的操作系统
1、js获取系统var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端2、js获取浏览器内...
2018-08-22 11:02:30
2766
原创 时间转换
1、时间戳转为xxxx-xx-xx xx-xx-xx格式function timestampToTime(timestamp) { var date = new Date(timestamp);//时间戳为10位需*1000,时间戳为13位的话不需乘1000 Y = date.getFullYear() + '-'; M = (date.getMonth()+1 &lt...
2018-08-16 11:51:40
194
原创 cocos 原生打包报错问题
1、项目配置问题* What went wrong:A problem occurred configuring project ':implementation'.&amp;gt; ABIs [armeabi] are not supported for platform. Supported ABIs are [armeabi-v7a, arm64-v8a, x86, x86_64]....
2018-08-07 19:36:59
848
原创 坐标转换
cocos-crator节点的坐标都是相对于父节点而言的,即以父节点为参照物。 若需要获取节点在场景中的坐标,在不改变层级关系的前提下需要借助convertToNodeSpaceAR方法来进行转换。// 需要转换坐标的节点let node = cc.find("Canvas/tab/sub_tab");/* cc.v2(x,y)创建cc.Vec2对象(即2D向量和坐标)例...
2018-07-04 17:14:07
531
原创 全局变量的使用
若需要使用全局变量时,那么就尝试再window对象下进行定义。若该变量值可能在cocos中用到,那么可以在window.cc对象下添加属性和方法。 在命名变量名称时,需要注意: 1.使用前初始化并赋值; 2.命名时防止和已存在的变量名冲突; 3.若未定义可能会抛出异常。onLoad: function () { // 定...
2018-07-03 18:07:53
295
原创 截图
分享功能在游戏中是很常见的一种功能模块,分享进行时添加游戏图片会更加形象,增加游戏的吸引力。那么,今天我们就来聊聊cocos的截图功能。思路:创建一个虚假截图对象;创建一个新的精灵图节点,用来接收截到的图像资源;反转图像(截到的图片时倒转的);保存精灵图片到本地。(上传或者传递到android端)代码// 1、 //1.1、虚假截图对象的大小 ...
2018-07-02 20:55:35
358
原创 cocos creator---动画制作
温馨提示:标准动画为24帧/秒;(即每秒播放画面24张) 1、创建节点(该节点必须有Sprite组件) 2、在1中创建的节点上添加动画组件,并创建动画保存动画 3、开始编辑动画 4、添加动画属性(添加图片) 5、播放动画let anim = cc.find('Canvas/test');// 步骤1中创建的节点anim = anim.getComponent(c...
2018-06-14 14:39:54
5260
原创 cocos creator---颜色的设置和更改
var colorCode = cc.color(255,255,255,255);/*cc.color参数分别代表颜色值:red、green、blue、alpha*/生成的颜色值如下:
2018-05-11 14:51:54
30219
原创 ES6---Promise简析和请求封装
1、Promise的特点 a、Promise是异步编程的一种解决方案。 b、Promise的状态不受外部影响,一旦建立就会立即执行,无法中途取消; c、一旦状态发生改变之后就不会改变。2、Promise状态 &n
2018-04-25 18:34:16
7185
1
原创 001、element-ui前言
前言element-ui是饿了么团队开发的一款功能强大前端UI框架。1、不仅有基于vue框架的版本,还有基于react和angular的ele-ui版本;2、当认为只有中国程序员才会用element-ui,那么你就打错特错了。目前,element-ui已经推出了中文在内的3种语言开发文档;3、内置语言包含了中文、英文、德文、法文、西班牙文等主要语言在内的40多种语言。可以根据不...
2018-04-20 18:51:47
955
原创 015、计算属性(computed)
一、计算属性设计的初衷是为了进行简单的运算,以此来减少模板中逻辑的维护。当模板中用到了运算逻辑,建议使用运算属性(computed来代替methods中的方法)。2、基本写法HTML:&lt;div&gt;{{this.num1}} + {{this.num2}} = {{endNum}}&lt;/div&gt;JS:data () { return { ...
2018-04-20 15:09:24
296
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅