l_yilan的博客

flex布局

在项目中，经常会有接口数据返回空的情况，多个页面需要显示空数据状态，那么可以封装成自定义空白页组件：页面效果如下：图一：暂无数据图二：带按钮接下来就开始写组件代码啦步骤如下：1.在根目录下新建components文件夹2.在components下新建一个blankPage文件夹，新建blankPage的wxml、wxss、json、js文件blankPage.wxml：/**empty-空白图片的链接，isShowExplain-是否显示文字，emptyExplain-文字，isShow

最近做项目需要用到音乐播放的功能，播放icon中的音乐图片可360度旋转，点击时icon时,可暂停或播放音乐，切换页面时，暂停音乐播放实际效果如下：因多个页面运用到，就封装成自定义组件musicPlay在根目录下新建一个文件夹，命名为components，在components下新建一个musicPlay的componentwxml//musicStyle为整个音乐icon在页面的定位，有默认值，也可改变<view class="music-bg" style="{{ musicStyle

最近做项目，发现接口返回了带\n的换行符，使用组件组件没有并没有换行，普通的text标签也不能满足：例：使用的字符串为：richText:'基地\n课程\n'rich-text 组件显示如下：而我想要的是基地显示一行，课程显示一行，又不想在js页面处理，想直接在页面显示时处理，那就涉及到wxs1.新建util.wxsvar filters = { formatLineFeed: function (text) { if (!text) { return

微信小程序解决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

微信小程序自定义select下拉选择组件微信小程序原生开发中，常用到的是从底部弹起的滚动选择器（picker),而有些项目需要用到下拉选择，话不多说，下面就可以把下拉选择封装成一个自定义组件：1.在从components文件夹下新建自定义组件select;2.select文件对应的wxml、wxss、js如下：wxml<view class='select-box'> <view class='select-con' bindtap='selectTap'>

微信小程序canvas大小、定位适配在微信小程序canvas开发中,遇到一种情况：在iPhone X调好的定位大小，把机型调整为iPhone 5，由于iPhone5屏幕较小，canvas画出的内容就会错乱，这就要考虑不同设备兼容的问题，需要做适配（可参照以下方法）：//适配前代码：let that = this;let ctx = wx.createCanvasContext('mycanvas', that);ctx.font = `normal normal bold 20px PingFan

开发小程序中，为了代码能重复利用，把canvas封装成组件，但是把代码搬到组件中，就发现不显示出来：<canvas canvas-id="mycanvas" style="width: {{windowWidth}}px;height: 241px;position: fixed;bottom: -100%;left: 0;"></canvas>var ctx = wx.createCanvasContext('mycanvas');显示如下图（什么都没有）：后来看官方

微信小程序获取用户信息微信小程序获取用户信息接口做了调整：2021年4月28日24时后发布的小程序新版本，无法通过wx.getUserInfo与获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。开发者在开发中也需要进行调整，需要用getUserProfile接口获取用户信息。//如需向后台发送code,需进行以下登录操作，否则可直接通过getUserProfi

微信小程序步骤条微信小程序原生开发中，会有绘制步骤条的需求，具体怎么实现呢？下面是我自己制作的两种步骤条，封装成自定义组件，可根据需要引入（记得在json文件中引入）：1.带数字2.不带数字,固定名称//wxml<view class="entry-top"> <view class="order_process"> <view class="process_wrap" wx:for="{{iconList}}" wx:key="index" wx:fo

微信小程序获取地理位置微信小程序开发中选择地理位置，就需要通过官方文档API去判断用户是否授权地理位置，用户开启授权后可直接获取地理位置，否则需要用户手动开启授权。下面是获取地理位置的相关方法：//先判断用户是否授权获取地理位置let that = this; wx.getSetting({ success(res) { if (res.authSetting['scope.userLocation'] == false) {//如果没有授权地理位置

微信小程序使用WxValidate微信小程序原生开发中，部分功能需要用到表单验证，而原生表单组件没有自带表单验证功能。原生开发中，可以裸写验证规则，也可以使用WxValidate插件。WxValidate插件是参考 jQuery Validate 封装的，为小程序表单提供了一套常用的验证规则，包括必填元素、手机号码、电子邮件验证等等，同时提供了添加自定义校验方法，让表单验证变得更简单。1.引入插件：插件的下载地址和官方文档：https://github.com/skyvow/wx-extendWx

微信小程序部分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

/** * 图片预览 * @ param url 链接 */ function previewOneImage(url) { var imgList = [url];//获取img-list //图片预览 wx.previewImage({ current: url, // 当前显示图片的链接 urls: imgList // 需要预览的图片的链接列表 })}/** * 本地图片上传 */ function uploadOneImage() { retu

/** * 特殊字符校验 * @param value */function specialCharacter(value) { var myreg = /[ `~!#$%^&*()\+=<>?:"{}|,\/;'\\[\]·~！#￥%……&*（）——\+={}|《》？：“”【】、；‘’，。、]/g if (myreg.test(value)) { return true;//特殊字符 } else { return false;//非特殊字

/** * 验证手机号码 * @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})|(

/** * 金额输入字符限制 * @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, "."); //只保留第一个. 清除多余的

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, })//修改上个页面的某个值...

微信小程序富文本替换对部分后端返回的富文本进行替换、修改://假设获取到的富文本为：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