- 博客(26)
- 收藏
- 关注
RSS订阅原创 element-ui tab切换：切换时，Echarts宽度只有100px，实际宽度改为100%
element-ui tab切换，echarts宽度固定，解决宽度100%问题
2022-08-23 18:16:41
1355
原创 微信小程序封装自定义组件-空白页带按钮
在项目中，经常会有接口数据返回空的情况，多个页面需要显示空数据状态，那么可以封装成自定义空白页组件：页面效果如下：图一：暂无数据图二：带按钮接下来就开始写组件代码啦步骤如下：1.在根目录下新建components文件夹2.在components下新建一个blankPage文件夹，新建blankPage的wxml、wxss、json、js文件blankPage.wxml：/**empty-空白图片的链接，isShowExplain-是否显示文字，emptyExplain-文字，isShow
2022-05-09 12:02:33
773
原创 微信小程序-旋转的音乐播放暂停功能
最近做项目需要用到音乐播放的功能，播放icon中的音乐图片可360度旋转，点击时icon时,可暂停或播放音乐，切换页面时，暂停音乐播放实际效果如下：因多个页面运用到，就封装成自定义组件musicPlay在根目录下新建一个文件夹，命名为components，在components下新建一个musicPlay的componentwxml//musicStyle为整个音乐icon在页面的定位，有默认值，也可改变<view class="music-bg" style="{{ musicStyle
2022-04-26 16:21:42
1747
原创 微信小程序-转换接口返回带\n换行符的字符串
最近做项目，发现接口返回了带\n的换行符，使用组件组件没有并没有换行，普通的text标签也不能满足：例：使用的字符串为：richText:'基地\n课程\n'rich-text 组件显示如下：而我想要的是基地显示一行，课程显示一行，又不想在js页面处理，想直接在页面显示时处理，那就涉及到wxs1.新建util.wxsvar filters = { formatLineFeed: function (text) { if (!text) { return
2022-04-26 11:21:48
1268
原创 微信小程序解决flex布局，最后一行靠左对齐问题
微信小程序解决flex布局，最后一行靠左对齐问题需求：使用flex布局，每行固定三个元素，元素间距自适应，向左对齐实际效果与代码如下：wxml <view class="con-list"> <view class="con-item" wx:for="{{conList}}" wx:key="item" style="background-color: {{item.bgColor}};"> {{item.name}} </view&g
2021-09-01 18:08:24
3895
1
原创 微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中，常用到的是从底部弹起的滚动选择器（picker),而有些项目需要用到下拉选择，话不多说，下面就可以把下拉选择封装成一个自定义组件：1.在从components文件夹下新建自定义组件select;2.select文件对应的wxml、wxss、js如下：wxml<view class='select-box'> <view class='select-con' bindtap='selectTap'>
2021-08-31 16:47:07
4858
6
原创 微信小程序canvas大小、定位适配
微信小程序canvas大小、定位适配在微信小程序canvas开发中,遇到一种情况：在iPhone X调好的定位大小，把机型调整为iPhone 5，由于iPhone5屏幕较小，canvas画出的内容就会错乱，这就要考虑不同设备兼容的问题，需要做适配（可参照以下方法）：//适配前代码：let that = this;let ctx = wx.createCanvasContext('mycanvas', that);ctx.font = `normal normal bold 20px PingFan
2021-08-27 10:57:46
3377
原创 canvas自定义组件不显示内容
开发小程序中，为了代码能重复利用，把canvas封装成组件，但是把代码搬到组件中，就发现不显示出来：<canvas canvas-id="mycanvas" style="width: {{windowWidth}}px;height: 241px;position: fixed;bottom: -100%;left: 0;"></canvas>var ctx = wx.createCanvasContext('mycanvas');显示如下图（什么都没有）：后来看官方
2021-08-27 10:19:17
846
2
原创 微信小程序获取用户信息
微信小程序获取用户信息微信小程序获取用户信息接口做了调整：2021年4月28日24时后发布的小程序新版本，无法通过wx.getUserInfo与获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。开发者在开发中也需要进行调整，需要用getUserProfile接口获取用户信息。//如需向后台发送code,需进行以下登录操作，否则可直接通过getUserProfi
2021-08-18 18:19:34
1398
原创 微信小程序步骤条
微信小程序步骤条微信小程序原生开发中，会有绘制步骤条的需求，具体怎么实现呢？下面是我自己制作的两种步骤条，封装成自定义组件，可根据需要引入（记得在json文件中引入）：1.带数字2.不带数字,固定名称//wxml<view class="entry-top"> <view class="order_process"> <view class="process_wrap" wx:for="{{iconList}}" wx:key="index" wx:fo
2021-08-16 11:24:22
2353
原创 echarts-市地图
echarts-深圳市地图这里，我选择绘制的是深圳市地图，只展示区。数据来源于高德开放平台，部分可能存在误差：1.数据来源数据来源地址：http://datav.aliyun.com/tools/atlas/index.html#&lat=22.859177836173288&lng=113.68440594166313&zoom=12.5在下图中区域，先选择省份，然后再从省份区域图中选择想要的市（我选择的市深圳市），选择市后，右边会有对应的市API和JSON。注意看右边当前
2021-08-13 15:19:07
1953
1
原创 css动画特效-Loading
css动画特效-loading1.交错音符式这种Loading如何让它们不在同一时刻运动？就要考虑CSS动画属性animation-delay，等待几秒（自己设定），然后开始动画。比如：第二个元素要比第一个元素晚0.2秒，也就是等待0.2秒，以此类推。以下代码可以展示效果：//html<div class="loading"> <span></span> <span></span> <span>&
2021-08-13 14:46:57
248
原创 uni-app开发微信小程序-安装、创建项目
uni-app开发微信小程序-安装、创建项目1.下载安装：开始之前，需要先下载如下开发工具：HBuilderX：https://www.dcloud.io/hbuilderx.html微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html2.创建项目：点击工具栏-文件-新建-项目选择uni-app-输入项目名-选择目录-选择模板：最后点击创建就可以创建一个新项目了。...
2021-08-12 18:15:40
1977
原创 微信小程序获取地理位置
微信小程序获取地理位置微信小程序开发中选择地理位置，就需要通过官方文档API去判断用户是否授权地理位置，用户开启授权后可直接获取地理位置，否则需要用户手动开启授权。下面是获取地理位置的相关方法：//先判断用户是否授权获取地理位置let that = this; wx.getSetting({ success(res) { if (res.authSetting['scope.userLocation'] == false) {//如果没有授权地理位置
2021-08-12 10:18:45
3876
原创 常用的css居中布局
常用的css居中样式以下可以通过定位调整布局，使元素居中：**水平垂直居中**.all-center{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%, -50%);-o-transform: tran
2021-08-11 18:15:37
280
原创 常用的flex布局css样式
常用的flex布局css样式flex布局我在微信小程序开发中用的比较多，不用考虑太多适配问题。.flex{display: flex;display:-webkit-flex;}.flex-row{flex-direction: row;}.flex-col{flex-direction: column;}.flex-ai{align-items: center;}.flex-jc{justify-content: center;}/****主轴水平、垂直方向***/.flex-rowc{d
2021-08-11 18:09:06
770
原创 微信小程序使用WxValidate
微信小程序使用WxValidate微信小程序原生开发中，部分功能需要用到表单验证，而原生表单组件没有自带表单验证功能。原生开发中，可以裸写验证规则，也可以使用WxValidate插件。WxValidate插件是参考 jQuery Validate 封装的，为小程序表单提供了一套常用的验证规则，包括必填元素、手机号码、电子邮件验证等等，同时提供了添加自定义校验方法，让表单验证变得更简单。1.引入插件：插件的下载地址和官方文档：https://github.com/skyvow/wx-extendWx
2021-08-11 17:25:20
637
原创 微信小程序部分iPhone机型转换时间真机显示为NaN
微信小程序部分iPhone机型转换时间真机显示为NAN//接口返回的数据有时需要转换时间（例：2021-08-11 12:12:12）let value = '2021-08-11 12:12:12';let time = new Date(value);//直接转换2021-08-11 12:12:12这样的格式，部分iphone机型真机显示为NAN，那么就需先把时间格式（2021-08-11 12:12:12）转换一下，转换后的时间格式为：2021/08/11 12:12:12let t
2021-08-11 16:05:37
348
原创 使用less报错
在Vue中使用less,报错（TypeError: this.getOptions is not a function）使用less:<style lang="less" scoped></style>运行报错：TypeError: this.getOptions is not a function解决办法：卸载之前安装的版本：npm uninstall less-loader（之前安装的版本是10.0.1）重新安装：npm install less-loader@5
2021-08-04 18:10:10
656
原创 微信小程序图片、视频上传、预览PDF
/** * 图片预览 * @ param url 链接 */ function previewOneImage(url) { var imgList = [url];//获取img-list //图片预览 wx.previewImage({ current: url, // 当前显示图片的链接 urls: imgList // 需要预览的图片的链接列表 })}/** * 本地图片上传 */ function uploadOneImage() { retu
2021-06-22 11:17:09
512
原创 特殊字符、纯数字校验
/** * 特殊字符校验 * @param value */function specialCharacter(value) { var myreg = /[ `~!#$%^&*()\+=<>?:"{}|,\/;'\\[\]·~！#￥%……&*（）——\+={}|《》？：“”【】、；‘’，。、]/g if (myreg.test(value)) { return true;//特殊字符 } else { return false;//非特殊字
2021-06-22 10:43:07
383
原创 手机号码、身份证号验证
/** * 验证手机号码 * @param phone 手机号码 * @param show(true false) 是否提示 */function isPhone(phone, show) { return new Promise((resolve, reject) => { if (phone.length >= 11) { phone = phone.substring(0, 11) var myreg = /^(((13[0-9]{1})|(
2021-06-22 10:31:55
734
原创 金额输入字符限制
/** * 金额输入字符限制 * @param val 金额 */function moneyLimit(val) { let num = val.toString(); if (num.indexOf('.') == 0) { num = '0' + num; } num = num.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符 num = num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
2021-06-22 10:24:01
172
原创 获取上个页面或改变某个值
let pages = getCurrentPages(); let currentPage= pages[pages.length - 1]; //当前页 let prevPage = pages[pages.length - 2]; //上一个页面 let checked = prevPage.data.checked; //取上页data里的数据也可以修改 prevPage.setData({ checked:true, })//修改上个页面的某个值...
2021-06-22 10:05:48
213
原创 微信小程序富文本替换
微信小程序富文本替换对部分后端返回的富文本进行替换、修改://假设获取到的富文本为：let str = res.data.content单个替换：let html=str.replace(/替换目标",替换内容)//例如（图片）：let html=str.replace(/<img style=",'style="width:100%;')全局替换：let html=str.replace(/替换目标/g",替换内容)//例如（文字）：let html=str.replace(/ap
2021-06-21 14:29:45
1130
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人