- 博客(53)
- 收藏
- 关注
RSS订阅
原创 uni-app小程序生成海报，支持各种机型
效果演示 源码发布在插件市场了 https://ext.dcloud.net.cn/plugin?id=586或者 gitee： https://gitee.com/huangchunhongzZ/poster使用方法（主要看pages/hch-poster页面的例子里面有详细说明）<hchPoster ref="hchPoster" @cancel="canvasCancel" :simpleFlag="simpleFlag" :posterBgFlag="posterBgFla
2020-08-09 17:54:58
1015
原创 VuePress的博客搭建并自动部署页面到码云（Gitee）
一、VuePress 简介VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。二、快速搭建
2020-07-19 19:17:43
1650
原创 微信小程序，定位位附近门店
微信小程序，定位位附近门店首先看下效果图在uni-app插件市场有发布插件，详情代码可以去下载链接: https://ext.dcloud.net.cn/plugin?id=615使用方法1、在manifest.json中授权 permissionwx.getLocation的方法需要在 manifest.json 微信小程序中授权 微信接口描述 传统的在pages.json 配置一下信息不生效。"permission": { "scope.userLocation": {
2020-07-19 19:10:13
3375
原创 webpack 按需打包vue项目，根据不同业务模块打包成不同包
需求开发的项目需要每个页面打包成一个项目，给第三方平台上线实现原理把router.js分成好几个不同的路由。问题：入口main.js引用了router.js 也要每次都切换router.js来打包，这样main.js的代码并不好维护。解决方案1.我们可以同样把main.js 拆成 main_page1.js 和 main_page2.js,注意不同的main.js里面引用不同的router.js，然后使用webpack的特性mode来读取不同的main.js2.首先在package.json
2022-05-19 09:56:51
6197
9
原创 package.json依赖版本号的含义
在package.json的一些依赖的版本号中，我们还会看到^、~或者>=这样的标识符，或者不带标识符的，这都代表什么含义呢？没有任何符号：完全百分百匹配，必须使用当前版本号对比符号类的：>(大于) >=(大于等于) <(小于) <=(小于等于)波浪符号～：固定主版本号和次版本号，修订号可以随意更改，例如~2.0.0，可以使用 2.0.0、2.0.1 、2.0.6的版本。插入符号^：固定主版本号，次版本号和修订号可以随意更改，例如 ^2.0.0，可以使用 2.0.1
2022-04-26 15:22:44
998
原创 vue项目使用可选链操作符编译报错问题
vue项目使用可选链操作符编译报错问题const a = b?.c?.d报错如下：Support for the experimental syntax ‘optionalChaining’ isn’t currently enabled解决方案：需要安装babel依赖@babel/plugin-proposal-optional-chaining,并添加到babel.config.js中yarn add @babel/plugin-proposal-optional-chaining在
2022-04-26 10:33:35
5454
1
原创 git报错
Git 执行 git pull 命令是报错或者换电脑后如下：remote: HTTP Basic: Access deniedfatal: Authentication failed for 'http://仓库.git/'问题原因：账号密码验证不通过，密码或者权限不对，导致 Git 操作失败。解决方案：输入：git config --system --unset credential.helper再次进行 Git 操作，输入正确的用户名，密码即可。...
2022-03-04 10:13:50
136
原创 支付宝小程序使用uView控制台报错Cannot read property ‘title-all‘ of undefined
报错如图解决方式启用支付宝小程序的component2编译模式.启用方法:1.在支付宝小程序开发工具的项目开发界面点击"文件"菜单–点击"项目详情",在中间打开的"详情"标签内容中"项目配置"大项下勾选"启用 component2 编译"小项即可.2.如果是uni-app项目,打开manifest.json文件,选择源码视图,找到"mp-alipay"项,如果没有自己添加,加上"component2" : true ,如下:"mp-alipay" : {"usingComponents"
2021-10-26 10:05:13
10665
原创 git commit之后，想撤销commit
一、情景git add . //添加所有文件git commit -m “本功能全部完成”执行完commit后，想撤回commit，怎么办？二、解决办法git reset --soft HEAD^说明：HEAD^的意思是上一个版本，也可以写成HEAD~1如果你进行了2次commit，想都撤回，可以使用HEAD~2三、参数–mixed不删除工作空间改动代码，撤销commit，并且撤销git add . 操作这个为默认参数,git reset --mixed HEAD^ 和 git re
2021-10-25 16:17:46
104
原创 element-ui table浏览器打印宽度没办法自适应，太短问题
问题如图没有办法正常撑开宽度解决办法加入如下css<style lang="scss">@media print { .el-table{ .el-table__body{ width:100%!important; } th{ display: table-cell !important; } .cell{ width:100%!important; } }}</style
2021-07-23 11:13:55
1341
2
原创 安装插件失败，getaddrinfo ENOENT raw.githubusercontent.com 报错
报错如图解决方法：查看raw.githubusercontent.com的真实IP地址点开网址 https://www.ipaddress.com/ ，输入raw.githubusercontent.com，点击查询：复制以下的ip修改hosts文件找到这个文件夹： C:\Windows\System32\drivers\etc 下的hosts以管理员身份运行笔记本打开hosts，在最后一行编辑185.199.108.133 raw.githubusercontent.com185.
2021-07-13 16:19:24
11109
1
原创 Element UI 表单resetFields()，form表单没办重置的原因及解决方法
场景1、用dialog【新增】、【修改】数据2、先点击了【修改】，弹出弹窗，此时弹窗的form表单已经赋值3、再点击新增按钮，此时调用resetFields()方法是没有办法使form清空的原因：resetFields是将form表单重置到初始值，而这个初始值是form表单mounted后的值，也就是点击了【修改】时赋的值。解决方法：dialog的form表单清空，this.formData = this.$options.data().call(this).formData //弹窗表
2021-04-23 16:56:05
1213
原创 @antv/l7绘制地图，添加图例，修改地图上颜色，是否允许地图拖拽，是否滚动缩放等
html<div class="charts-box"> <div style="min-height: 300px; justify-content: center;position: relative" id="map"/></div>引入组件import { Scene, Control } from '@antv/l7'import { CountryLayer } from '@antv/l7-district'import { Mapbo
2021-04-09 15:32:09
3879
原创 antv/l7 设置图例
引入Control 基类import { Control } from "@antv/l7";初始化基类 const legend = new Control({ position: "bottomright" });设置Control 展示的内容,通过扩展Control 的onAdd 方法我们自由定制control 需要展示内容和交互。legend.onAdd = function () { let el = document.createElemen
2021-04-09 15:22:00
1318
原创 卡片列表动画
卡片列表动画想实现的效果方案https://animista.net/play/entrances/slide-in/slide-in-left 加上后面的卡片比前面的延迟个0.1代码 /** * 左滑 start */ .slide-in-left { -webkit-animation: slide-in-left 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-l
2021-02-02 10:52:30
183
1
原创 vue-cli 4.x 创建项目
vue-cli创建项目1、vue create 项目名称2、配置询问，上下建选择，空格键选择/反选,i建反选，A建全选3、是否按照history的方式创建路由（选择history历史模式还是hash模式）4、选择css预处理器5、配置保存位置：配置文件是单独放在一个package.json中还是分开放，我选第一项分开放，回车下一步6、结构目录...
2021-01-28 17:48:13
215
1
原创 国产sm2，sm3，sm4加解密兼容ie问题，解决国密算法sm-crypto有ie兼容问题
解决国密算法sm-crypto有ie兼容问题解决ie兼容问题插件包sm-crypto本身不兼容ie浏览器通过以下配置解决ie浏览器兼容问题在vue.config.js的transpileDependencies中把我们的包添加进去，让babel-loader能够帮我们转译sm-crypto包中的内容：module.exports = { // ... transpileDependencies: [ 'sm-crypto' ]}babel.config.js中对应
2021-01-28 16:39:10
6252
原创 vue-cli开发插件
1、 创建文件名创建一个空的文件夹，名字最好就是你的插件的名字。为了让一个 CLI 插件在 Vue CLI 项目中被正常使用，它必须遵循 vue-cli-plugin- 或者 @scope/vue-cli-plugin- 这样的命名惯例。这样你的插件才能够：被 @vue/cli-service 发现；被其他开发者通过搜索发现；通过 vue add 或者 vue invoke 安装。这里我用vue-cli-plugin-test2、 项目初始化npm init每行命令代表什么意思
2021-01-26 14:17:31
890
原创 npm init
package name: 你的项目名字version: 版本号description: 对项目的描述entry point: 项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）test command: 项目启动的时候要用什么命令来执行脚本文件（默认为no
2021-01-26 11:20:12
339
原创 Mockjs
Mockjs介绍Mock官网首页是这么定义的：生成随机数据，拦截 Ajax 请求。demo项目mock例子:https://gitee.com/huangchunhongzZ/vue-mock-test1、在项目中应用引入js依赖npm install mockjs建一个mock文件夹来统一管理我们的mock数据在mock文件夹下建一个demo.js尝试一下在mock/demo.js中写下如下代码：import Mock from 'mockjs'//随机生成一个20-40条的数组
2021-01-25 14:52:48
288
原创 将canvas生成图片或者签名背景透明变为白色背景
将canvas生成图片或者签名背景透明变为白色背景toWhite () { var imageData = this.context.getImageData(0, 0, w, h) for (var i = 0; i < imageData.data.length; i += 4) { // 当该像素是透明的，则设置成白色 if (imageData.data[i + 3] === 0) { imageData.data[
2020-12-28 18:08:38
3610
原创 uni-app小程序sdk 调用第三方地图
小程序调用第三方地图1、js方法如下function openMapByDefault(latitude, longitude, name) { uni.openLocation({ latitude: latitude, longitude: longitude, name: name, fail: () => { uni.showModal({ content: '打开地图失败,请重' }) }, })}function openMapByAnd
2020-12-18 21:14:05
1177
1
原创 给app用的 小程序wgt包，调用uni.openLocation 页面空白
调用uni.openLocation 页面空白页面如图方法成功但是没有地图出来，需要原生app集成地图
2020-12-18 13:51:17
1037
4
原创 js树形结构递归
js树形结构递归1、过滤数据// 菜单列表const menuList = [{ name: '系统管理', code: 'system_manage', children: [{ name: '字典管理', code: 'code_manage', children: [{ name: '添加字典', code: 'add_code' }, {
2020-11-18 14:19:32
2219
1
原创 svg生成页面水印
svg生成页面水印1、生成svg通过这个通道快捷生成快速通道使用安全转义后的2、使用.content{ background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill-opacity='0.5' text-anchor='middle' domina
2020-11-18 13:48:19
785
原创 ios与android移动端input输入框disabled样式不一致问题
ios与android移动端input输入框disabled样式不一致问题主要原因：ios会在input框为disabled时做透明度的设置解决方法如下input.disabled { -webkit-text-fill-color: #909399;//填充字体颜色 这个生效的时候 设置的color就不生效 opacity: 1 ;//设置透明度 background-color: transparent ;//去掉安卓背景色}...
2020-11-17 11:00:24
478
1
原创 vue项目，百度地图自定义标注marker
vue项目，百度地图自定义标注marker1、向地图中添加标注如下示例，向地图中心点添加了一个标注，并使用默认的标注样式：var point = new BMapGL.Point(116.404, 39.915); var marker = new BMapGL.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中2、向地图中添加标注定义标注图标 通过Icon类可实
2020-11-09 16:16:45
4624
1
原创 cookies过期时间无效
cookies过期时间无效如下图写入cookie 但是没办法失效在cookie中看并没有异常，但是没办法失效，主要原因是这个过期时间是本地时区，所以没办法失效，用toGMTString()转换为 GMT 时区。就可以正常失效清除cookie了正确使用cookie过期时间如下var date= new Date(new Date().getTime() + 30000)document.cookie = 'test_cookies111=7777777777;expires=' + date.
2020-11-05 14:54:45
1440
原创 设置localStorage过期时长
设置localStorage过期时长设置缓存 var nowTime = new Date().getTime(); var data = { value: val, expirse: nowTime + 30000 }//设置30秒过期 window.localStorage.setItem(key, JSON.stringify(data))获取缓存 var data = JSON.parse(window.localStorage.getItem(key)
2020-11-05 11:22:57
696
原创 ifream父子页面信息传递
ifream父子页面信息传递1、父级向子级传递信息通过postMessage传递this.$refs.SonIframe.contentWindow.postMessage(this.msg, '*')2、父级接收子级传递信息// 接受子级返回数据 window.addEventListener('message', function (e) { if ((typeof e.data) === 'string') { alert('父级接收子级返回数据：' +
2020-11-04 16:00:14
320
原创 vue + jest单元测试之一 --- 创建一个vue项目单元测试的demo
创建一个vue项目单元测试的demo1、创建新项目vue webpack init unit-test2、在src/components下创建组件 content.vue<template> <div class="content-wrap"> <h1 class="title">{{ content }}</h1> </div></template><script>export defaul
2020-10-27 11:05:08
542
原创 vue-cli脚手架安装jest单元测试，运行异常解决办法（Option “mapCoverage“ has been removed, as it‘s no longer necessary.）
用vue-cli搭建了一个unit-test的vue项目选择来了单元测试jest，然后yarn unit后，报错了问题解决方法
2020-10-23 18:06:17
528
原创 base64在线展示pdf，pdf放大预览预览效果
pdf预览，及实现签名下载插件pdfjs-dist// 下载插件pdfjs-distyarn add pdfjs-dist页面使用<div class="commit-img" id="commit_img" @click="previewImage(base64Img)"> <canvas id="canvas-pdf" style="width: 100%;"></canvas></div><!-- 图片预览（vant预览图
2020-10-21 23:40:35
1487
原创 h5项目字体缩放（750设计稿项目+vant字体缩放）
移动端h5字体缩放主要点1、vue项目中postcss-px-to-viewport 单位是要rem"postcss-px-to-viewport": { "viewportWidth": 750, "unitPrecision": 3, "minPixelValue": 1, "fontViewportUnit": "rem", "selectorBlackList": [ ".van-" ]}2、项目中的app.vue 的created 添
2020-10-19 18:51:00
1731
1
原创 友盟统计 隐藏站长统计的文本或者图标
隐藏站长统计的文本或者图标 <!-- 友盟统计 --><div style="display:none"> <script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=XXXXXXX&web_id=XXXXXXX"></script> </script></div>...
2020-10-19 14:50:54
1043
原创 文件流base64下载文件，下载xlsx文件，兼容ie浏览器下载
兼容ie浏览器下载方法if ("download" in document.createElement("a")) { const a = document.createElement("a") a.download = fileName + ".xlsx" a.href = base64String document.body.appendChild(a) a.click() document.body.removeChild(a)} else { //ie下的下载
2020-10-16 15:18:09
847
1
原创 安装最新版的vue-cli
安装最新版的vue-cli：还是旧版版的想卸载安装最新版本的卸载2.x版本的vue-cli ：npm uninstall -g vue-cli 或 yarn global remove vue-cli安装最新版版本的@vue/cli ：npm install -g vue-cli — 这个命令已经废弃了3.0以后npm install -g @vue/cli 或 yarn global add @vue/cli再次输入 vue -V 检验：关于无法使用init指令由于安装了vue cl
2020-10-15 15:17:39
413
原创 解决 Edge浏览器 自动给数字加下划线以及数字变蓝色的问题
解决 Edge浏览器 自动给数字加下划线以及数字变蓝色的问题<meta name="format-detection" content="telephone=no,email=no,address=no">
2020-10-14 17:07:56
736
原创 @antv/f2n 可滑动的折线图
html<canvas id="canvas-chart" class="canvas-chart" ref="chart" width="100%"></canvas>引入组件import F2 from '@antv/f2/lib/index'// require('@antv/f2/lib/interaction/')require('@antv/f2/lib/interaction/pan') // 引入图表平移交互// 第一步：加载插件 ScrollBarc
2020-10-10 14:59:44
1487
原创 element 回到顶部组件使用注意事项 （Backtop 回到顶部）
前言官网里面这个Backtop 回到顶部组件使用写的很简单，就这样我们实际上使用这个组件，target对象是内容滚动的外部容器，并且这个容器的高度是100%是撑满整个屏幕的，写了个具体demo例子如下：<template> <!-- 外部容器 --> <div class="back-top-container"> <!-- 实际滚动内容 --> <div v-for="(item,i) in 150" :key="i"
2020-08-23 16:28:04
1174
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人