- 博客(36)
- 收藏
- 关注
RSS订阅原创 html2canvas 行内元素边框样式生成问题解决（根据文字生成图片）
实现一个基于一段文字生成一张图片的需求，其中，有一段文字需要下划线，但是不是text-decoration:underline;的样式，因为下划线要距离字一段距离，接到这个方案时，第一时间想到的就是html2canvas，但是做的过程中出现了一个小问题。
2022-11-19 23:07:55
1365
1
原创 微信小程序下载文件，保存文件功能总结
微信小程序里面做下载文件并保存的功能一、涉及api1.`wx.saveFile()`2.`wx.downloadFile()`3.`wx.getFileSystemManager().saveFile()`4.api总结二、解决方案1.方案一2.方案二总结
2022-03-11 23:00:24
35413
8
原创 vue使用element-ui上传组件 遇到上传成功之后本次请求服务端返回文件流再次下载问题
需求简单需求，上传文件之后服务端处理完文件的数据，本次接口请求返回文件流，前端再把该文件流下载下来。
2022-03-06 23:30:25
2024
1
原创 css实现上中下布局（上下固定，中间自适应）
先上效果图：实现方法：方法一：这个最简单，利用css中vh单位和calc() 函数使用场景：页面布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
2021-04-21 00:18:56
6597
1
原创 Vue项目设置反向代理和cookie设置问题
项目场景： 最近使用Vue开发一个新的项目，因为服务器还没到，调取后端本地接口，因为没有跨域，就开反向代理。后面就被一个很基础的东西踩了坑，就是 cookie的一些知识，记录一下，加深一下印象。问题描述： 联调过程中，发现调用登录接口之后，再去调其他接口，就会报登录状态失效，之前做了好久小程序的项目，突然遇到这种有点懵逼。 原因分析： 首先，出现这个问题，问了下后端，后端说是Cookie没有传给他。然后我们来确认下Cookie的定义和作用是什么？ HTTP 协议中的 Cookie 它包
2020-10-30 23:11:47
2310
3
原创 小程序轮播图实现中间大两边小的效果（超简单实现）
先上效果图，实现其实很简单，不需要你去调什么样式，写什么逻辑。只要你细心看下文档，你会发现有两个属性。你会发现微信已经实现了对于这样式的实现，我也是来做这个效果的时候才发现的这个配置，之前都是一闪而过。接下来就很简单了，直接配置下，就实现了。这里展示的代码是mpvue框架下写的。但是原理差不多。<template> <div> <swiper autoplay interval="2000" indicator-dots previous-margin=
2020-06-21 16:40:00
2474
2
原创 关于企业微信应用开发注意点
描述企业微信应用其实就是h5页面开发，类似微信公众号开发，但是企业微信应用主要是运行在企业微信里面的。这个就是区别点。之前没做过，做完发现好坑，微信对这支持力度不够，很多东西都没有完善。注意点企业微信应用授权的话大致跟微信公众号类似，Vue开发的话建议使用history模式。企业微信应用在ios系统下如果你对图片img标签进行样式设置会导致图片不会显示。这个很坑，开发过程中一直用安卓手机在调试，后面才发现这一点。然后没有办法，只能给img外面套一个盒子。不知道是不是因为用vue开发的原因。企业微信
2020-06-21 15:34:51
432
原创 微信小程序自定义swiper的底部指示点（指示点不在swiper元素里面）
实现一个小程序swiper指示点在下方的一个demo，并且在每张图片上有对应的文字释义。效果图：最开始本来打算用css控制样式来实现，然后发现超出swiper元素内容会被隐藏，然后试了下，感觉有点麻烦，发现组件有提供两个事件给我，然后可以利用这两个事件，直接定义一个指示点。感觉这样更加直接，所以用的这个方式。...
2020-04-18 21:29:37
2338
2
原创 使用mpvue开发微信小程序编译完成后报错cannot read property 'call' of undefined
遇到一个这样的问题，当时的的情况是这样的，当前这个分支的代码是已经发布过的了，没有任何问题，然后我是从一个开发分支切到这个分支来之后，报这个错误，cannot read property 'call' of undefined真的抓破了头脑，因为没有改动，然后导致我真机上面打不开小程序，处于白屏状态。后面再排查中，搜了一下网上，说是组件名字起冲突了，我想不可能啊，我都没有动代码，之前都发布过了...
2020-04-01 22:51:44
2180
原创 mpvue框架下实现小程序之间的跳转功能（小程序与小程序的跳转，小程序之间跳转传参）
在开发小程序的时候，有时候我们的小程序需要跳转到其他的小程序里面去，这个官方也提供了方法给我们，wx.navigateToMiniProgram(Object object)方法，这个方法有三个要注意的点。这个事件必须用户手动点击才能触发，必须用户点击确定才能触发跳转，一个小程序不能跳转超过10个以上的小程序。具体的配置可以从去官方文档里面看下https://developers.weixin...
2020-03-31 21:37:02
534
原创 wepy框架下实现小程序之间的跳转功能（小程序与小程序的跳转，小程序之间跳转传参）
在开发小程序的时候，有时候我们的小程序需要跳转到其他的小程序里面去，这个官方也提供了方法给我们，wx.navigateToMiniProgram(Object object)具体的配置可以从去官方文档里面看下https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigate...
2020-03-29 23:40:40
734
1
原创 css实现四边形四角边框效果（没有使用定位，避免布局影响）
实现下面这种效果开发中要实现下面这种效果，相信大家第一眼就会想到用定位，直接把四个边框定位上去就好了。最开始我也是直接用的定位，封装成了一个组件。后面布局的时候出问题了，排列的时候很麻烦，对不起，调位置什么的都不好控制，而且因为要做到自适应，很不好做。后面想了很久，感觉可以用css的背景属性来做，这样的话这些问题全部都可以避免了。直接上代码这个html文件，可以复制直接看下<h...
2020-03-22 00:35:05
2504
原创 微信小程序页面跳转传json字符串后使用JSON.parse方法无效
记录下这个问题，哈哈。最近遇到这个问题，突然跟我说页面怎么没有传参进去，之前一直可以，然后我试了下，有的可以传递参数，有些不行。打了下console，发现JSON.parse方法这里就停了，后面就执行不下去了，也不报错。然后在手机上开启调试的时候，发现问题了。提示我参数数据太长了，然后微信小程序url截取了一部分，很尴尬，因为有些数据可能没有那么长，就没有截取，然后JSON.parse正常解析，...
2020-03-21 20:21:51
1086
原创 在Vue中使用高德地图开发工具
在Vue中使用高德开发工具非常简单，只需要在你的public中的index.html中，导入一条链接即可。<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 一般使用高德地图中，里面有各种各样的插件，你可以直接在链接上...
2020-03-01 22:19:54
816
原创 vue结合高德地图Api开发，实现一个点覆盖物和信息窗口结合，展示点位相关信息组件
前段时间一直在结合高德地图的api进行数据可视化开发，这也是前端的一个趋势，网上关于这些的文章都比较少，最好还是去高德去看官方文档，然后去琢磨怎么玩。先说下我这个应用场景吧，一般我们做地图可视化开发，边上会有些表格啊，或者点位表述，然后我们点击这个点的那个div或者表格的那行，然后就在地图上标记这个点显示出来，并展示跟这个点位一些数据。大概就是这样一个功能吧。看上去，更加专业，还知道位置在哪。...
2020-03-01 21:13:15
1188
1
原创 小程序路由跳转携带网址参数忽略问题解决
描述最近小程序做跳转的时候，发现携带参数的时候给我省略了一部分，刚开始还以为是我的参数太长了，是不是有限制，后面才知道是因为我的这条参数是一个网址，然后帮我省略了一部分，找到问题后，解决思路就很简单啦。转码一下就好了wepy.navigateTo({ url: "/pages/路径=" + encodeURIComponent(id) });//接收再转回来d...
2020-02-27 21:56:05
334
原创 微信小程序pdf预览功能实现（解决小程序下载pdf文件后缀为unknown导致不可预览问题多种方案）
描述因为项目是使用wepy框架开发的，所以语法上面如果大家是使用其它的方案要注意下，其实思路和核心代码大体上相同。、思路首先，做这个功能得知道，ios使用web-view标签是直接可以浏览pdf的，但是安卓系统的手机是不可以的，这个时候我们一般采用先下载，然后再打开的方式浏览。只要是借助小程序的wx.downloadFile、wx.openDocument事件实现这个功能。然后再区分ios和...
2020-02-27 21:42:54
6447
5
原创 Vue开发微信公众号调用微信JS-SDK的分享接口（实现微信公众号分享功能）
描述使用微信提供的分享功能，其实就是JSSDK使用，使用它提供的接口功能。可以先看下微信公众号开发文档，上面介绍的很详细。提供了那些功能，怎么去使用。https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#67代码绑定域名这个不需要说了。引入js文件的话直接在Vue项目中找到index.html...
2020-01-31 20:37:37
1813
1
原创 Vue（hash模式）开发微信公众号处理分享页面中分享链接中#后面的地址截取问题
描述使用Vue开发公众号时，分享链接的时候遇到这个问题，会把#后面的地址都截取，然后会跳到首页去。如果使用history模式下的话就不存在这个问题了，不过Vue开启这种模式，还需要后台配置支持。问了下我们后端，直接说不会，没办法，只能自己想办法来解决了。思路当时大致搜了下，各种方法也尝试了，转码，拼接什么的都没有用，后面采用了一个中转页面来帮我实现跳转才做好了。其原理大致就是写一个第三方的...
2020-01-31 16:32:05
2302
原创 使用Vue（hash模式）开发微信公众号授权问题
前段时间用vue开发一个公众号的项目，在项目开发中遇到了一些问题，一直没有时间整理，趁着这个时间点，把项目中遇到的问题整理，积累下。描述微信公众号，最重要的，也是最关键的就是授权问题，必须要做的，绕不开。我这边大概的流程是首先看用户数据有没有，如果没有的话先微信发起授权，拿取到微信返回的code值，然后返回给后端...
2020-01-26 22:14:42
3798
6
原创 基于Vue结合高德地图api做的一个坐标拾取组件
描述最近需要做一个地图坐标拾取的功能，根据用户点击的位置，获取当前点击位置的经纬度。根据用户输入的经纬度然后标记到那个点位。用高德地图写了一个这样的组件。实际效果：说明如果对高德地图很熟悉的话，其实实现很简单。用户点击地图获取经纬度实现：监听用户在地图上的点击事件，获取到点击位置的经纬度，然后拿着这个经纬度，高德地图有个点标记工具，在那个位置标记这个点。用户输入经纬度在地图上标点...
2020-01-22 19:16:23
2862
1
原创 修改Element UI自带的小图标，替换成自己的（类似自定义Element UI图标）
最近使用vue+Element 开发一个pc端的项目，做了一个小操作，感觉蛮有意思的，其实就是二次封装下组件，符合自己的项目就举个例子吧这个时间选择组件，我们的项目的话需要把左侧的小图标移到右侧来，而且不能用这个原有的图片，没办法，只能改。如果你之前自定义图标过的话，这个你就很熟悉。首先找到那个自定义图标class这个时间组件的图标为.el-icon-date ，然后图标设置在befor...
2020-01-16 22:52:09
14236
原创 原生小程序语法写的小程序通知栏（公告栏）上下滚动效果实现
前面写了一个wepy框架实现相同效果的，后面有朋友问我原生的怎么写，然后我就修改了下代码，实现了一个相同效果的demo先上图直接上代码，复制下就可以直接看效果了。wxml部分<view> <view class="notification_bar"> <image class="bar_left" src="https://ss1.bdstati...
2020-01-08 19:24:23
2615
7
原创 JavaScript中BOM与DOM解释与分析
总结下面试题BOM和DOM这个东西是很基础的东西，Java Script的三个主要组成部分是：ECMAScript(核心)，DOM（文档对象模型），BOM（浏览器对象模型）。所以这个也是我们必须掌握的一些东西。...
2019-12-22 12:37:52
263
原创 Vue生命周期详解（个人的基本理解）
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。下图展示了实例的生命周期。挂载（初始化相关属性）1.beforeCreate当new Vue 实例的时候，还没有根据配置对象来进行Vue实例的具体配置...
2019-12-21 21:34:03
270
原创 Vue页面与页面之间的传值（router.push()编程式导航）
页面与页面之间跳转传值，其实我们一般用两种，query传参或者用params其实这两个方式都是页面导航的一种，编程式导航：通过调用JavaScript形式的API实现导航的方式，大家不了解的可以去官网看下，比较基础的东西。其实就是用了router.push()方法，来实现页面之间的传值，只不过有不同的参数规则。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，...
2019-12-21 11:22:22
1136
原创 Vuex状态管理工具详解
自己重新整理了下，方便学习交流。首先Vuex他是什么，此处从官网截图：可以集中式存储管理应用的所有组件状态使用1.安装vuex依赖包。npm install vuex --save2.创建一个store的文件夹，里面新建一个index.js文件，专门来处理vuex的数据，逻辑。3.导入vuex包，创建store对象。import Vue from 'vue'import Vu...
2019-12-18 23:27:41
213
原创 Vue组件通信（父子组件传值，非父子组件传值）
主要是整理给自己用的一些面试常用题，这里记录一下vue组件间通信几种方式。父组件传值到子组件（父传子）先定义一个子组件，这里我在component文件夹里定义一个child.vue子组件<template> <div class="about"> <h1>这里是子组件的变量接受的变量{{msg}}</h1> &...
2019-12-17 12:54:28
176
原创 利用html2canvas和vue-qr生成带头像二维码的分享海报（二）
描述一个关于微信公众号生成海报的一个demo，就给一张图片，然后以这张图片打底，生成一张带头像的二维码的海报，可以保存到手机里面，方便用户推广。之前有一篇相同实现相同功能的，利用canvas写的一个demo，这一次是优化了了前面，使用了html2canvas和vue-qr这两个插件来实现这个需求。想看前面的那篇可以点击下面的链接https://blog.csdn.net/qq_3713188...
2019-11-23 23:29:55
264684
原创 利用canvas和vue_qrcodes生成带二维码头像的海报（一）
描述一个关于微信公众号生成海报的一个demo，就给一张图片，然后以这张图片打底，生成一张带头像的二维码的海报，可以保存到手机里面，方便用户推广。类型下图效果：声明：这里的测试图片来自花瓣https://huaban.com/，如有侵权，联系删除，谢谢。说明生成二维码这里使用了插件vue_qrcodesnpm install vue_qrcodes感兴趣的可以去这里看下https...
2019-11-23 21:32:44
503077
1
原创 vue-cli 3.0的跨域问题解决和对axios路径配置
描述最近一个项目，调节口的时候，出了这个问题，然后配了下，记录下，也有个地方可以保存。直接上实现步骤在vue.config.js的module.exports = {}里面新增一个节点，如果没有这个节点，在项目根目录新建一个即可。上代码module.exports = { devServer: { proxy: { '/api': { target...
2019-11-03 21:25:30
411
原创 微信小程序wepy框架关闭Eslint校验
前两天有初次接触wepy的同学问我，小程序的wepy框架怎么关闭Eslint校验，新建了一个wepy项目，安装了Eslint，怎么关闭，在那里找了很久，都没弄出来，所以发篇文章帮助初次接触wepy框架的朋友。新建wepy项目后，在你的根目录文件夹中有一个wepy.config.js文件，打开这个文件，里面有项对Eslint的配置废话不多说，直接上图（虽然前面一大段废话）…够清楚吧，把这个改...
2019-10-31 23:45:03
1613
原创 Visual Studio Code 解决因为Vetur导致的红色波浪线报错问题
今天打开我的.wpy文件，突然Visual Studio Code给我报红色波浪线错误，上午打开是没问题，下午打开就报错了，刚开始看到报错有点懵逼，后面百度，弄了半天没弄好。后面自己灵机一闪，弄好了，发个贴，帮助下出现该问题的朋友。先上报错图片，上的别人的报错，类似这种报红色波浪线的报错就是更改vetur配置 vscode->首选项->设置->搜索（v...
2019-10-27 23:37:33
11442
12
原创 用wepy写的一个关于小程序通知栏（公告栏）上下滚动效果实现
说明页面需要在顶部实现一个通知栏上下滚动的效果，对一些比较动态的信息做一个展示，一个比较实用的一个小效果。其主要核心思路是利用了动画的原理，实现效果的平滑实现。代码实现wxml部分<view> <view class="notification_bar"> <image class="bar_left" src="h...
2019-10-27 23:10:27
3577
原创 用wepy框架做的一个小程序密码输入框动态修改input的属性。
自己现在时间比较充裕，最近也想对自己之前的东西一些总结和收纳，帮助自己对于知识的梳理和强化，所以开始写博了。-----------------------------------------------------------------华丽的分割线------------------------------------------------------------最近开发了一个小程序的...
2019-10-18 22:10:59
602
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人