- 博客(86)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 利用canvas截取图片再转成base64图片流【解决图片跨域问题】
0.最重要的话：后端设置！！！//后端支持：图片要是cdn上的地址，并且允许图片跨域，header头中设置应为Access-Control-Allow-Origin: *1.在index.html中cdn引入 <!-- 图片生成 --> <script src="https://cdn.bootcss.com/html2canvas/0...
2019-08-31 21:53:24
1347
原创 获取微信天气方法封装成一个mixin文件，需要时引用
1.getWeather.jsimport wx from 'weixin-js-sdk'//Vuex公共状态动作import { mapActions } from 'vuex'//执行成功const ERROR_CODE = "ERRORCODE0000";//微信分享import wxapi from '@/commonJS/wxapi'export default {...
2019-08-29 22:09:05
90
原创 【VConsole】移动端使用console
1.引入index.html<script src="https://raw.githubusercontent.com/Tencent/vConsole/dev/dist/vconsole.min.js"></script>2.使用main.js中使用【通过自定义环境变量来判断是否使用移动端console】if(process.env.VUE_AP...
2019-08-29 21:32:22
274
原创 Object.keys(obj)的使用
// simple arrayvar arr = ['a', 'b', 'c'];console.log(Object.keys(arr)); // console: ['0', '1', '2']// array like objectvar obj = { 0: 'a', 1: 'b', 2: 'c' };console.log(Object.keys(obj)); // con...
2019-08-29 14:45:50
343
原创 mixin的使用案例分享【操作 tab路由跳转、清除对象的指定 key 值、获取功能菜单、获取分页数据、页数统一统计、返回指定属性、清除tab栏】
1.add-nav.js【操作 tab，路由跳转】export default { methods: { /** * 统一处理 tab 页操作 * 路由跳转，并同步 store 中 pageTab 数据 * * @param {*} obj */ addNav(obj) { this.$router.push(...
2019-08-29 11:38:23
279
原创 Vue高级用法之mixin的使用【实用案例讲解】
一、使用场景：有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性，二、用法0.变量一定要在mixin中定义【切记！切记！切记！】import wx from 'weixin-js-sdk'//Vuex公共状态动作import { mapActions } from 'vuex'//执行成功const ERROR_CODE = "ERROR...
2019-08-29 11:27:12
1375
原创 前端实现图片压缩的方法
一、思路：图片可以canvas的重绘制下,再转Base64,大小会比原来小很多二、上代码window["html2canvas"](shareContent, opts).then(function (canvas){ document.body.appendChild(canvas); let buc=(<HTMLCanvasElement>canv...
2019-08-29 11:09:37
533
原创 消除CSS中box-sizing对padding的影响
原因：.box{ box-sizing: border-box;}设置后计算的规则改变为高度和宽度包括padding。处理方法：法一、把收到影响的padding改为margin，搞定法二、把设置的（之前高度）改为（设定高度加上padding的高度）...
2019-08-29 10:09:30
1675
原创 vue中使用vue-easytable【强大的表格工具】
1.cdn引入<link rel="stylesheet" href="https://unpkg.com/vue-easytable/umd/css/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/vue-easytable/umd/js/index.js"></scrip...
2019-08-28 21:42:21
6567
2
原创 小程序性能优化方案
setDatasetData是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。在介绍常见的错误用法前，先简单介绍一下setData背后的工作原理。工作原理小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的...
2019-08-28 10:53:15
325
原创 小程序页面初始化加载时利用openid去请求数据
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(appInstance.globalData.openid) var that = this; that.setData({ id: options.id }); this.getArticle(th...
2019-08-27 22:48:46
1064
原创 小程序中rich-text的使用
1.index.wxml<view class="page-body"> <view class="page-section"> <view class="page-section-title">传入html字符串</view> <view class="rich-text-wrp"> <ric...
2019-08-27 22:43:19
4838
原创 微信小程序点击item栏跳转页面
1.index.wxml <view class="list" data-para="2" bindtap="tapItem"> 点我跳转2 </view>2.index.js//单项的点击事件 tapItem: function(event) { var that = this; //参数获取 var index...
2019-08-27 22:34:53
599
原创 小程序触底加载更多
onReachBottom: function() { wx.showLoading({ title: '加载更多文章', }) var that = this; this.getFeeds(that.data.page); }, getFeeds: function(page) { if (page == 1) { wx....
2019-08-27 22:20:12
2722
原创 微信小程序获取用户openid
//app.jsApp({ onLaunch: function () { var that = this wx.login({ success: function (res) { if (res.code) { //发起网络请求 wx.request({ url: 'https:/...
2019-08-27 21:46:43
198
原创 微信小程序中页面加载完成获取用户参数
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //查看是否授权 wx.getSetting({ success: function (res) { if(res.authSetting['scope.userInfo']){ //已经授权，可以直接调用get...
2019-08-27 16:01:42
2764
原创 小程序用户中心布局样式
1.usercenter.wxml<!-- pages/usercenter/usercenter.wxml --><view> <view class="userinfo"> <view class="userinfo-avatar"> <open-data type="userAv...
2019-08-27 15:50:38
939
原创 小程序中flex兼容性布局参考weui源码
1.example.wxml<!--pages/usercenter/usercenter.wxml--><view class="weui-cells__title"> 带说明的列表项</view><view class="weui-cells"> <view class="weui-cell"> ...
2019-08-27 15:23:17
471
原创 CSS中::before和::after
1.定义The CSS ::before(::after)::before和::after匹配一个虚拟元素，主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的“content”属性，默认是内联元素。其实::after和::before被引入css中，最核心的目的，还是为了实现语义化。在我们实际开发时候经常有这样的经历，为了实现一些效果，在文档中创建了一些没有实际内容的节点，...
2019-08-27 15:16:46
667
原创 echarts中雷达图的封装和使用
1.radarEcharts.vue<style lang="scss" scoped> .investmentAnalysisAadar { margin: 11px 14px 11px; padding: 0px 9px 12.5px; background: #fff; } .investmentAnalysisAadarOne{ ...
2019-08-22 18:09:29
852
原创 加载屏三个圆圈动画
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=d...
2019-08-22 17:03:09
325
原创 页面布局中出现找不到的一部分空白处理方案
原因分析：内部子div设置margin，把外部div顶出一部分，导致出现空白。处理方法：找到设置了margin 的子div,去除margin即可
2019-08-22 10:13:02
572
原创 通过微信公众号实现H5音频自动播放
<template> <audio src="../audio/one.mp3" id="audioPlay"></audio></template><script> wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 appId: d...
2019-08-20 19:26:59
7737
原创 用雷达图时报错：Component series.radar not exists.
处理方式：<script src="https://cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script>用雷达图要用完整的库。
2019-08-20 16:13:43
1288
1
原创 H5在微信端自动播放音乐
<template> <audio style="display:none; height: 0" id="bg-music" preload="auto" src="${staticPath}/img/breakEgg/img/beijingyinyue.mp3" loop="loop"> </audio>...
2019-08-20 11:59:53
2229
2
原创 js实现一个bind函数
// 思路：类似call，但返回的是函数Function.prototype.mybind = function (context) { if (typeof this !== 'function') { throw new TypeError('Error') } let _this = this let arg = [...arguments].slice(1) ...
2019-08-19 11:05:47
250
原创 js中instanceof的原理
// 思路：右边变量的原型存在于左边变量的原型链上function instanceOf(left, right) { let leftValue = left.__proto__ let rightValue = right.prototype while (true) { if (leftValue === null) { return false ...
2019-08-19 11:05:42
426
原创 Object.create的基本实现原理
// 思路：将传入的对象作为原型function create(obj) { function F() {} F.prototype = obj return new F()}
2019-08-19 11:05:36
1491
原创 js中方new本质
function myNew (fun) { return function () { // 创建一个新对象且将其隐式原型指向构造函数原型 let obj = { __proto__ : fun.prototype } // 执行构造函数 fun.call(obj, ...arguments) // 返回该对象 return...
2019-08-19 11:05:29
74
原创 js实现一个基本的Promise
// 未添加异步处理等其他边界情况// ①自动执行函数，②三个状态，③thenclass Promise { constructor (fn) { // 三个状态 this.state = 'pending' this.value = undefined this.reason = undefined let resolve = value =&g...
2019-08-19 11:05:21
108
原创 js实现深拷贝和浅拷贝
1.浅拷贝// 1.实现浅拷贝实现let copy1 = {...{x:1}}// 2. Object.assign实现let copy2 = Object.assign({}, {x:1})2.深拷贝// 1. JOSN.stringify()/JSON.parse()let obj = {a: 1, b: {x: 3}}JSON.parse(JSON.string...
2019-08-19 11:05:12
232
原创 js使用setTimeout模拟setInterval
// 可避免setInterval因执行时间导致的间隔执行时间不一致setTimeout (function () { // do something setTimeout (arguments.callee, 500)}, 500)
2019-08-19 10:43:57
601
原创 js实现一个继承方法// 借用构造函数继承实例属性
// 借用构造函数继承实例属性function Child () { Parent.call(this)}// 寄生继承原型属性(function () { let Super = function () {} Super.prototype = Parent.prototype Child.prototype = new Super()})()...
2019-08-19 10:43:42
293
原创 js实现一个基本的Event Bus
// 组件通信，一个触发与监听的过程class EventEmitter { constructor () { // 存储事件 this.events = this.events || new Map() } // 监听事件 addListener (type, fn) { if (!this.events.get(type)) { this...
2019-08-19 10:43:36
1828
原创 js实现一个双向数据绑定
let obj = {}let input = document.getElementById('input')let span = document.getElementById('span')// 数据劫持Object.defineProperty(obj, 'text', { configurable: true, enumerable: true, get() { ...
2019-08-19 10:43:30
90
原创 js实现一个简单路由
// hash路由class Route{ constructor(){ // 路由存储对象 this.routes = {} // 当前hash this.currentHash = '' // 绑定this，避免监听时this指向改变 this.freshRoute = this.freshRoute.bind(this) // ...
2019-08-17 09:39:45
604
原创 js实现懒加载
<ul> <li><img src="./imgs/default.png" data="./imgs/1.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/2.png" alt=""></li> <li>&l...
2019-08-17 09:39:34
150
原创 rem实现原理
// 原始配置function setRem () { let doc = document.documentElement let width = doc.getBoundingClientRect().width let rem = width / 75 doc.style.fontSize = rem + 'px'}// 监听窗口变化addEventListener...
2019-08-17 09:39:07
934
原创 js手写实现AJAX
// 1. 简单流程// 实例化let xhr = new XMLHttpRequest()// 初始化xhr.open(method, url, async)// 发送请求xhr.send(data)// 设置状态变化回调处理请求结果xhr.onreadystatechange = () => { if (xhr.readyStatus === 4 &&am...
2019-08-17 09:38:59
757
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人