- 博客(56)
- 资源 (3)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 微信小程序实现图片懒加载的方法
使用wx.createIntersectionObserver实现，官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html需要展示的列表groupGoodsList，图片是否展示用show 控制wxml:给列表元素添加class：‘other-goods-item-’ + indexjs：.........
2022-07-13 14:55:14
1771
原创 数组根据一个或多个字段进行匹配度排序
mounted() { let arr = [{ name: '张三', dept: '总裁办', position: '总经理' }, { name: '李四', dept: '人力资源管理管理', position: '主管' }, { name: '张武', dept: '运营部', position: '副经理' }, { name: '王芳',
2021-11-02 16:27:36
291
原创 微信小程序\n没有换行的解决办法
wxml:使用text标签<text>{{ data }}</text>js:字符串替换data = data.replace(/\\n/g,'\n')
2021-09-17 09:06:32
792
原创 关于vue3运行之后Network: unavailable问题
config.vue.js设置public，最后面修改自己的端口号 devServer: { host: "0.0.0.0", public: require('os').networkInterfaces()[Object.keys(require('os').networkInterfaces())[0]][1].address + ':8181', port: 8181, // 端口号}...
2021-09-16 15:22:41
823
原创 小程序处理iphoneX底部黑条
方法一： 根据手机型号添加单独样式wx.getSystemInfo({ success: function(res) { // 根据手机型号匹配 if (res.model.search('iPhone X') != -1 || res.model.search('iPhone Max') != -1 || res.model.search('iPhone 11') != -1 || res.model.search('iPhone 12') != -1) {
2021-02-05 17:34:38
698
原创 获取近几天的日期和星期
getDay: function(day, week) { // 获取近几天的日期，day为获取近几天，可以为负数，week表示是否需要查星期 var today = new Date() var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day today.setTime(targetday_milliseconds) // 注意，这行是关键代码 var tYear = today.getFullYea
2021-02-05 17:18:09
101
原创 微信小程序中checkbox多选框和radio单选框的样式修改
多选框样式/*checkbox 选项框大小 */checkbox .wx-checkbox-input { width: 24rpx; height: 24rpx; border: 1rpx solid #B3B3B3; margin-right: 20rpx;}/*checkbox选中后样式 */checkbox .wx-checkbox-input.wx-checkbox-input-checked { border: 1rpx solid #4F71E7; bac
2021-02-05 17:00:24
502
原创 elementui-admin中阿里云oss后端签名直传
首先在utils文件夹中新建一个upload.js文件写入如下代码：import { vUploadImage } from '@/api/common'import axios from 'axios'import { Message } from 'element-ui'export function fileUpload(file) { // file是文件 return new Promise((resolve, reject) => { // 请求后端签名 v
2021-01-26 10:00:20
345
原创 elementui-admin后台设置代理的方法
根目录的 .env.development文件中设置VUE_APP_BASE_API = '/api'vue.config.js文件中配置代理，保存后重启即可proxy: { [process.env.VUE_APP_BASE_API]: { target: '', // 你请求的第三方接口 changeOrigin: true, pathRewrite: { // 路径重写 ['^' + process.env.
2021-01-15 10:16:05
1360
1
原创 微信小程序圆角苹果手机不兼容
border-radius: 6rpx;overflow:hidden;-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);
2020-12-29 10:47:18
291
原创 elementui下拉框多选报[Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞
elementui下拉框多选，选值报错[Vue warn]: children must be keyed: 选中一个值后所有的值都会被选中经检查，是由于我的下拉框的value值为一个对象而非单个值值为对象时需要填入value-key<el-select value-key="id" multiple v-model="personnelForm.deptUserArr" placeholder="" class="personnel"> <el-option v-for
2020-12-22 15:07:07
5116
1
原创 elementui select下拉框无法选值的解决办法
<el-select v-model="data" placeholder="请选择" @change="change"> <el-option v-for="(item, index) in 4" :key="index" :label="item" :value="item">{{ item}}</el-option></el-select>change: function() { this.$forceUpdate()}
2020-12-16 14:50:10
1228
原创 jquery动态加载的数据on(‘click‘)事件不生效的解决办法
jquery动态加载的数据on(‘click’)事件不生效的解决办法$('body').delegate('.deleteAvatar', 'click', function(data) { console.log('点击')})
2020-12-15 11:33:00
1356
1
原创 微信公众号自定义分享踩坑
config成功但是自定义分享的内容没有生效；手机端分享成功但是PC端分享内容不生效。解决方法：把配置项单独拿出来定义变量，api中直接填变量名；手机端配置updateAppMessageShareData和updateTimelineShareData，PC端配置onMenuShareAppMessage和onMenuShareTimeline。最终代码：$.ajax({ url : '后端请求接口地址', data: params, type:'get', .
2020-11-28 17:30:34
542
原创 uniapp图片自适应显示，不裁剪
先看图：这是长图和方图的显示效果，都可以完全显示出来上代码：html部分：<view class="question-title" style="width: 100%"> <image @load="imageLoad" :style="{'width': images.width + 'px', height: images.height + 'px'}" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/
2020-11-20 10:12:27
4074
原创 vue-cropper裁剪图片后压缩上传
vue-cropper上传后返回一个file文件但是经常出现图片过大的问题所以上传后使用localResizeIMG进行压缩第一步：安装localResizeIMGnpm i lrz -S第二步： 在相应位置引入import lrz from 'lrz'第三步：压缩this.imgUrl = URL.createObjectURL(file, { quality: 0 })let quality = 1// 根据图片大小设置压缩比例 if (file.size >= 1024
2020-11-17 14:55:54
1259
原创 微信小程序换行符↵转义
第一步在js中替换所有字符串content = content ? content.replace(/↵/g, '\n') : ''第二步注意：一定要使用text标签，使用view无效<text>{{ content }}</text>
2020-11-02 17:57:02
915
转载 uniapp中onLaunch异步方法与onLoad执行顺序问题（登录获取token等）
问题描述app.vue里的onLaunch中如果有异步方法，比如登录方法，返回结果可能会在页面的 onLoad 之后，为了让页面的 onLoad 在 onLaunch 之后执行，使用以下解决方案1、main.js添加如下代码Vue.prototype.$onLaunched = new Promise(resolve => { Vue.prototype.$isResolve = resolve})2、在 App.vue 的 onLaunch 中增加代码 this.$isResol
2020-10-20 13:54:45
8570
原创 微信小程序canvas绘制图片不变形的方法
项目中需要在canvas中绘制图片，图片大小未知已这张图片为例如果直接绘制图片将被压缩根据官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html可以设定这些参数来保证图片不会变形上代码：wxml:<view class="share"> <view style="padding-top: 65px, padding-bottom: 18
2020-10-15 10:14:47
2931
原创 处理微信公众号图片防盗链
我这里是在vue框架中使用的方法就是用iframe加载图片html代码如下注意：需要在img标签外面再包裹一个div标签<div class="coverPicUrlBlock"> <img :src="item.coverPicUrl" alt="" class="coverPicUrl"></div>首先在utils文件夹中创建一个wxImgUrl.js文件添加如下代码// 用于处理微信图片的防盗链export function wxImgUrl
2020-10-09 14:34:23
1059
1
原创 elementui分页列表的全选、全不选和反选
先看一下结果图：官方文档：https://element.eleme.cn/#/zh-CN/component/checkbox其中需要注意的几点：单独选择的时候全选按钮应该变成indeterminate 状态；在已有部分选择时点击全选秩序添加未选择的元素，而非所有；页码切换后应当保留当页选择状态；<template> <div class="group"> <div class="box check"> <div clas
2020-09-24 14:23:31
1341
原创 数组元素的上移下移
项目中有一个需求，需要处理数组元素的上移和下移changeSort: function(index, type) { this.tweetsData.splice(type ? index : index - 1, 1, ...this.tweetsData.splice(type ? index + 1 : index, 1, this.tweetsData[type ? index : index - 1]))}其中，this.tweetsData表示整个数组，index表示需要移动的元素下
2020-09-24 13:59:13
1153
原创 微信小程序引导用户授权获取用户信息
微信官方公告：[https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01]现在微信小程序只能通过点击按钮的方式显示获取用户信息的弹框，根据官方文档中的方法，我们可以在按钮上设置open-type，从而获取用户信息但是用户存在拒绝授权的情况，这个时候就只能引导用户打开设置页，如果用户没有打开授权开关，则继续引导用户打开设置页上代码：wxml:<view class='login'
2020-09-08 10:44:18
853
原创 微信小程序实现人脸识别认证
这个项目中使用的是阿里云的实人认证接口，需要录制视频上传先说一下逻辑：获取摄像头和录音权限；调起摄像头用于录制视频，录制5s；录制结束后上传视频；取上传返回的视频地址，调用后端提供的人脸识别接口，判断视频中是否含有人脸；通过人脸识别后会返回一个图片地址，调用后端提供的实人认证接口若这个过程中出现错误，则重新录制上传，本项目中失败三次则提示认证失败，可重新识别上代码：wxml:<view class='identification'> <view class='c
2020-09-07 14:22:09
9062
5
原创 vue判断数组中时间段无重复区间
原数组是这样的this.tableData = [{ "endTime": "2019-12-05 00:00:00", "startTime": "2019-11-01 00:00:00"}, { "endTime": "2020-08-31 11:29:14", "startTime": "2019-12-01 00:00:00"}]需要判断数组中所有元素的startTime和endTime组成的时间段是否存在重复区间save: function() { var startTime
2020-09-01 15:02:11
1556
原创 微信小程序端签名直传阿里云oss
思路：1、第一步，请求后端接口获取签名（我这里文件名是由后端返回的）2、第二步，将图片上传到阿里云oss新建一份upload.js文件export function fileUpload(path) { // path是图片地址 let _this = this; return new Promise((resolve, reject) => { wx.request({ url: '接口地址', // 请求后端签名 success (res) { // 我
2020-08-01 12:01:33
874
原创 微信小程序端生成小程序指定页面的二维码（base64）
微信官方文档中提供了两种方式区别在于有无数量限制注意：1、两种方式都只能生成已发布的小程序的二维码wxacode.createQRCode在开发版的带参二维码可以在开发者工具预览时生成2、页面地址有长度限制，具体可参考官方文档https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html这里以wxacode.createQRCode为例：首先需要
2020-08-01 11:44:14
2249
原创 微信浏览器监听手机物理返回键实现无限返回
访问地址你的地址?scene=4#wechat_redirect这个时候已经实现无限返回了，但是每次返回都在同一个页面，那么我们在这个页面进行监听先在url中加一个时间戳然后判断缓存中是否有时间戳保存，没有表示是第一次进入页面，然后存一个缓存值如果有缓存表示是返回的页面，判断当前页面的时间戳与缓存中的时间戳是否相等不相等则可以进行操作或者跳转地址从而实现无限返回history.pushState(history.length + 1, "message", "#wechat_redire
2020-07-23 11:26:41
1354
4
原创 vue中计算属性和过滤器的区别和用法
首先来看一个例子：已知数学成绩和语文成绩，要求他们的平均值这里可以使用的方法很多：在methods()里面计算；在computed()里面计算；在filter()里面计算<template> <div> <div>平均值1：{{ avarage1 }}</div> <div>平均值2：{{ avarage2 }}</div> <div>平均值3：{{ math | avarage3
2020-07-07 10:18:39
2391
1
原创 VUE中如何使用echarts
第一步：安装echarts在命令行中输入npm install echarts --save提示版本号表名安装成功第二步：引入在main.js文件中，引入echarts// echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts第三步：使用在需要展示echarts的页面中，添加下列代码mounted() { // 基于准备好的dom，初始化echarts实例 var myChart =
2020-07-04 14:10:53
2655
原创 微信小程序canvas实现文字居中
Canvas 2DonLoad: function () { // 通过 SelectorQuery 获取 Canvas 节点 wx.createSelectorQuery() .select('#canvas') .fields({ node: true, size: true, }) .exec(this.init.bind(this)) }, init(res) { const widt
2020-07-04 11:14:29
1840
原创 iframe父页面和子页面之间的方法调用
有两个页面，父页面index.html， 子页面chilld.html父页面index.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></
2020-07-03 16:15:38
387
原创 微信小程序调用摄像头实现拍照
微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/camera.html首先，需要用户授权摄像头权限，这一步是必须的具体步骤：获取用户当前授权状态，看是否已经授权，如果已经授权直接显示摄像头如果用户还没有授权，则调起授权弹框，用户允许授权则显示摄像头如果用户不允许，则提示用户去设置页面打开摄像头权限用户授权之后，就可以进行拍摄了，微信的camera组件无法显示为圆形，我这里是用一张图片遮盖了上代码：w
2020-07-03 15:18:52
18513
原创 微信小程序不一样的轮播图（二）
上图：wxml:<swiper class="first" indicator-dots="{{indicatorDots}}" autoplay="{{true}}" interval="5000" duration="500" circular="{{true}}" previous-margin="30rpx" next-margin="30rpx" skip-hidden-item-layout="true" bindchange="swiperChange"> <b
2020-07-03 10:01:05
236
原创 微信小程序不一样的轮播图（一）
先上图：wxml<swiper class="first" indicator-dots="{{indicatorDots}}" autoplay="{{true}}" interval="5000" duration="500" circular="{{true}}" display-multiple-items="5" skip-hidden-item-layout="true" bindchange="swiperChange"> <block wx:for="{{sw
2020-07-02 16:35:34
292
原创 微信小程序中常见的几种授权封装（可直接下载使用）
微信小程序中常见的几种授权：代码下载地址：https://download.csdn.net/download/weixin_39152200/12569931压缩包中包含两个文件：authorize.js和md5.js使用方法： 将这两个文件放到utils目录中，在需要使用的页面js文件中引入let authorize = require('../../utils/authorize.js');授权方法调用：1、登录 + 获取openID在authorize.js的login方法中，修
2020-07-02 14:50:29
1429
原创 FroalaEditor富文本编辑器toolbarButtons顶部按钮配置
官网介绍：https://froala.com/wysiwyg-editor/docs/options/#toolbarButtons配置方法：config: { toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineClass', 'i
2020-07-01 10:19:18
1409
原创 elementUI+froalaEditor实现仿微信公众号富文本编辑器
首先上图文章内容显示编辑器安装：https://blog.csdn.net/weixin_39152200/article/details/106941233下载地址：https://download.csdn.net/download/weixin_39152200/12564294
2020-06-30 17:10:52
2707
2
使用vue-cropper进行图片上传，裁剪，压缩组件
2020-11-20
elementUI+froalaEditor实现仿微信公众号文章富文本编辑器
2020-06-30
微信浏览器监听手机物理返回按键
2020-07-22
纯css使图片向内倾斜怎么做
2020-07-03
TA创建的收藏夹 TA关注的收藏夹
TA关注的人