小程序
文章平均质量分 54
小程序记录
一个什么都不会的前端
一个什么都不会的前端开发工程师
展开
-
微信小程序请求封装
已经好久没有搞小程序的我,刚好公司来了个小程序的项目。小程序中数据请求用到的是比较多的,所以我们来封装一下1、为什么封装官方文档有api,直接用不就可以吗?为什么要封装小程序的请求呢?封装是为了方便维护和管理封装后直接传参、调用即可减少重复的请求代码,提高优雅度2、开始封装封装的时候要考虑到一些通用性和临界点,比如:没网络请求怎么办、loading效果、错误提示等等将重要的一些参数赋默认值,比如:url、method等等2-1. 根目录下新建@/utils/constant.js常量文原创 2022-05-13 15:43:46 · 2911 阅读 · 0 评论 -
小程序字母检索列表
先上效果没错看着界面很像黄轶老师webapp的,其实就是想用小程序实现一个,可以根据界面滚动位置字母也实时高亮,也可以点击字母索引跳转到对应的位置原创 2022-01-07 15:54:59 · 2129 阅读 · 2 评论 -
小程序自定义三级联动
小程序的picker组件中,三级联动的只有省市区、时间等等,某些自定义要求高的的就要使用picker的多列选择器了,效果图:当滑动每一列的时候,会根据每列的唯一标识去查找下一列对应的数据后台返回的数据是一个三维数组wxml代码 <picker mode="multiSelector" bindchange="bindCustomPickerChange" bindcolumnchange="bindCustomPickerCo原创 2021-07-17 09:40:31 · 1007 阅读 · 0 评论 -
小程序图片上传formdata boundary + base64
因为小程序上传图片只能单图上产,想着上传图片的时候直接for循环搞上去,谁知后台要一个文件类型(boundary),就这样头疼的搞了一中午,直接先看效果吧![在这里插入图片描述](https://img-blog.csdnimg.cn/2021070516200750.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA5MD原创 2021-07-05 16:49:37 · 2377 阅读 · 1 评论 -
使用函数柯里化(高阶函数)处理多个input
有这样一个添加个人信息的form表单,点击确定的时候,在控制台输出他所填写的内容(以react为例)要是按照我刚写代码的时候,肯定是一个输入框一个方法,然后在进行赋值;万一输入框多了那就真tm难受我们可以通过调用一个函数传不同的参数来进行优化函数柯里化的方式import React, { Component } from 'react'export default class Demo extends Component { state = { name: '',原创 2021-06-08 11:38:12 · 163 阅读 · 0 评论 -
小程序购物车组件
全选、反选、单选、数量加减、价格和总数量计算都有;后期有时间再加入左滑删除的功能可以单独做成一个组件,只需要动态传入一个购物车的数组即可,这里就只说直接用的了shopcart.wxml1、主要利用了checkbox-group和checkbox组件来实现2、全选的时候通过一个checkbox来包裹住并设置value="all",然后改变每一个checkbox的checked属性,这样简单点<!--pages/shopcart/shopcart.wxml--><view c.原创 2021-04-21 16:22:51 · 1262 阅读 · 0 评论 -
使用es6的class类进行模块化封装、请求
es6中的class类出来以后,es5的构造函数我都用得比较少了,虽然以前项目用到的class类也有但是很少,这次用的很普遍,记录一下一些小问题子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象ES6 的继承实质是先将父类实例对象的属性和方法,加到this上面(所以必须先调用su原创 2021-04-12 16:29:03 · 1168 阅读 · 0 评论 -
小程序实现按照首字母检索列表
废话不多说,先看效果布局的话是分成左右两侧,主要用到的是小程序的scroll-view组件中的scroll-into-view和bindscrollwxml代码catchscroll换成bindscroll也可以的<view class="main-container"> <!-- 左侧滚动list --> <scroll-view wx:if="{{onsearch === false}}" class='list-left'原创 2021-04-06 17:01:24 · 1062 阅读 · 0 评论 -
小程序获取公众号文章并展示
最近在忙公司的项目,正忙得要死要死的,客户又来了一个傻* 的需求:要在小程序内显示对应公众号的文章列表,点击列表中的某一个跳转到文章详情里面,当时我只想说:xxxxxxxxx,没办法搞起来吧,谁让客户就是傻* 呢!!!这里要获取的是公众号的数据。先去微信公众号开发文档看一眼:微信公众号开发文档然后我们找到素材管理-----》素材列表,这里就有我们想要的内容了1、关联公众号关联不关联小程序我是不晓得,反正我的是没有关联,有需要的关联下就好,不过打开文章的话要关联的。步骤如下:1、登录到对应的公原创 2021-03-19 15:14:38 · 6389 阅读 · 0 评论 -
小程序日历组件
先看一下效果图本篇文章只是在原文的基础上进行小修改和代码的部分优化,里面注释我已经写的很清楚了,这个组件可以用来做签到,买火车票那种的组件等等;屁话不多说,直接上代码**子组件代码**组件wxml代码<view class="calendar-main-container {{isBtnShowModal===0?'calendar-transit':''}} {{isShowModal?'':'calendar-unactive'}}"> <!-- 年月份、左右箭转载 2021-03-03 15:54:20 · 1813 阅读 · 1 评论 -
小程序文字通告栏(文字向左无限滚动)
这个功能我是封装成了组件,方便以后的复用,如果用的少的可以单独在页面写先看效果。gif截图工具最近有点不太正常。。。。。。上代码notice.wxml代码图片的css样式根据个人情况修改下吧<!--components/notice/notice.wxml--><view class="notice-container"> <image style="width:30rpx;height:30rpx;margin:0 20rpx" src="{{imagePa原创 2021-02-25 10:24:59 · 2077 阅读 · 1 评论 -
小程序瀑布流
先看一下效果,gif图片不知道怎么回事,太大了,上传不了注释写的很详细就不解释了本想做成单个页面的,但是考虑到以后的复用性还是做成组件吧waterFallFlow组件wxml代码<!--component/waterfallFlow/waterfallFlow.wxml--><view class="waterfallflow-main-container"> <!-- 左侧部分 --> <view class="fallflow-left-转载 2021-02-23 16:23:57 · 666 阅读 · 0 评论 -
小程序navigateBack和返回上一页传参
有这样一个场景,用户在订单详情页面进行了操作或者其他的操作之后,点击左上角的返回到订单列表页面,这时候需要刷新列表的数据,这时候需要在回退的时候传参,在回退后的页面获取参数在onUnload(onHide也可以不用写,根据业务)生命周期写入,因为就返回一页而已,就没加wx.navigateBack({delta:1})onUnload: function () { //返回上一页并传参 const pages = getCurrentPages() const prevPage原创 2021-01-29 09:04:54 · 876 阅读 · 0 评论 -
小程序自定义键盘和输入框组件(可用于支付密码弹框和短信验证码)
先看一下效果组件wxml代码<!--components/keyboard_number/keyboard_number.wxml--><view class="mk-click" bindtap="onShowKeyboard"></view><view class="keyboard-main-container" catchtouchmove="true" style="pointer-events:{{isShowModal ? 'all':原创 2021-01-18 16:33:43 · 1003 阅读 · 0 评论 -
小程序波浪球动画
先看一下效果,波浪的大小会根据数值的变化而不断变化html代码(这里只写和波浪球相关的代码)<view class="charging-ball-container"> <view class="wave-wrapper" style="bottom:{{percent}}%"></view> <view class="percent-txt">{{percent}}%</view></view>css原创 2021-01-15 17:11:48 · 1812 阅读 · 1 评论 -
小程序扫描普通二维码获取参数并跳转
官方文档地址:配置教程1、在微信公众平台配置一下二维码规则里面的地址最多是只能2个子域名,不写子目录的也可以,需要下载校验文件进行校验功能页面就是要跳转的页面路径,比如:pages/index/index2、生成二维码我们去草料官网去生成一个二维码注意:这里的参数千万不能有中文,否则识别不了,我就是不小心写了参数,结果半天跳不过去…,坑啊3、获取参数按照官方说的要用微信的扫一扫并在onLoad中进行参数获取可能有些人不想用微信的扫一扫,想在小程序中弄一个按钮,点击调原创 2021-01-08 10:32:20 · 1947 阅读 · 0 评论 -
普通倒计时功能(秒杀、活动倒计时)
上效果图其实很简单,只需要知道结束时间,并获取当前时间,然后计算时间差和相差秒数,设置定时器,最后在离开页面清除定时器即可html<view class="daojishi-container"> <view>距离2021年春节还有</view> <view class="time-content"> <view class="item"><view>{{day}}</view>天<原创 2020-11-09 17:06:37 · 437 阅读 · 0 评论 -
小程序绘制二维码
首先小程序本身没有绘制二维码的api,就需要用到weapp-qrcode这个库,下载地址:weapp-qrcode1、首先去github上下载下来,主要用到的是/dist/weapp-qrcode.js这个js文件2、定义好canvas和canvas-id<canvas wx:if="{{isShowQrCode}}" class="user-qrcode-modal-can" canvas-id="myQrcode1" ></canvas>3、在对应js文件中引入wea原创 2020-11-05 13:52:05 · 1423 阅读 · 0 评论 -
小程序从微信扫码跳转到指定页面并请求数据不渲染
小程序上线后发现了一个bug,微信扫一个小程序码进入小程序的指定页面后在模拟器上是可以正常获取数据的,但是在产线上获取不到,也没报错,也不渲染先看一张图片:当我用微信扫一扫小程序码进入到这个页面时,红框内的内容时不显示的,在模拟器上是显示的之前的代码是这样写的getPayList() { //问题就出现在解构赋值这里,我们在onload调用这个方法的时候,这时候相当于是同步的执行, //从globalData中获取userInfo,这时候在下面的传值userId中没有获取到, //所以请求回原创 2020-10-28 15:25:41 · 451 阅读 · 0 评论 -
小程序输入框防抖
用户在输入的时候下方会出现搜索词列表,如果不做处理,用户每次输入 的时候都会请求数据,这样太浪费性能,这个时候就要用到函数防抖了首先在data外部定义一个防抖函数的id然后在输入的方法里面进行处理,在发送请求之前添加一个定时器,延时1秒钟执行。//输入搜索内容 changeSearch(e){ this.setData({ inputValue: e.detail.value, isList: true, isQuestion: false }原创 2020-09-18 09:46:16 · 709 阅读 · 0 评论 -
小程序图片懒加载
看见网上很多人的思路都是监听页面的滚动事件,判断元素距离页面的top值是否是小于等于页面的可视高度,小于的话显示一张加载的图片,大于的话就显示原来的图片,这种方式有时候滑动过快的时候,图片会一直加载,不知道其他人有没有这种现象主要用到的是小程序的获取节点信息:createSelectorQuery和节点相交状态:createIntersectionObserver,不熟悉的可以看一下这篇博客:createSelectorQuery用法介绍<view class="people-list-wrap"原创 2020-08-31 14:11:18 · 214 阅读 · 0 评论 -
小程序自定义tabbar
先来看一下效果1、根据微信官方文档说的,先在app.json配置一下2、根目录下新建文件夹3、编写代码index.wxml因为首页用到了地图组件,需要覆盖在上面,所以用了cover-view这里外面多嵌套了一层是因为不嵌套的话中间扫码的图片就会显示不完全,高小于最外面的<!--custom-tab-bar/index.wxml--><cover-view class="content-wrapper"> <!-- <cover-image clas原创 2020-08-26 17:28:03 · 370 阅读 · 0 评论 -
小程序封装弹出层组件(包括底部、中间、右侧弹出;带小动画特效)
这几天做的项目中看见有不少的弹出层的功能,本来想着开始做项目之前去网上找几个改一下就开始用的,结果…,最后还是自己写一个吧,比较简易1、在components里面新建popup组件2、编写页面<!--components/popup.wxml--><view class="popup-container"> <text class="popup-txt" catchtap="onClickDetail">更多》</text> pointer原创 2020-08-17 15:25:23 · 2434 阅读 · 0 评论 -
小程序上拉加载更多
最近一直忙着项目,都快忘记写博客了,正好弄了一个分页,come on上代码先看效果html部分 <view class="list-content"> <view class="list-item" bindtap="exchange" wx:for="{{creditList}}" data-item="{{item}}" wx:key="index"> <image src="{{item.image}}" mode="aspectFi原创 2020-08-14 11:00:08 · 179 阅读 · 0 评论 -
uni-app小程序吸顶
1,css方式实现// 纯css吸顶 position: -webkit-sticky; position: sticky; top: var(--window-top); z-index: 99;2,利用js<view class="select-tab" :class="isFixedTop?'fixed':''" id="navbar"> <view class="tab-item" v-for="(item,index) in tabList"原创 2020-06-28 09:35:51 · 1947 阅读 · 4 评论 -
小程序拖拽内容
先看效果html //将拖拽的高度赋值给style里面绑定的高度 <scroll-view scroll-y="true" id="scrolls" :style="{height:moveY + 'px'}"> <view id="desc"> {{subject.describe}} </view> <view id="tuozhuai" @touchstart="starDrag" @t原创 2020-06-19 18:08:11 · 384 阅读 · 0 评论 -
小程序微信支付
框架:uni1、在main.js中封装好方法:在下面写上:Vue.prototype.$wxPay = wxPay2、在点击去充值的时候请求接口,在成功的回调中调用main.js定义的方法this.$wxPay(res.data.data,this.succCall,this.failCall)succCall是支付成功的回调failCall是支付失败的回调...原创 2020-01-30 13:58:59 · 190 阅读 · 0 评论 -
小程序简单的swiper左右滑动切换内容
先来看一下效果上方点击tab <view class="top-tab"> <view class="tab-item" v-for="(item,index) in tabList" :key="index" :class="index == isShow ? 'tab2' : 'tab-item'" @tap="clickTab(index)"> <view class="first">{{item.txt}}</view>原创 2020-06-18 17:12:53 · 1686 阅读 · 0 评论 -
小程序图片上传
最近用小程序做上传,发现只能单图上传,刚开始很是头疼,由于图片和内容提交是分开的两个不同的接口,图片不是必填项,刚开始很是头疼,请教了一下别人,emmmmm,解决了(uni-app)主要用到的是es6中的promise,一种异步的执行,Promise 对象是由关键字 new 及其构造函数来创建的。有兴趣的同学可以直接去阮一峰大佬的网站学习:es6学习网站直接上代码:在这之前要先选择图片,直...原创 2020-01-30 13:49:38 · 370 阅读 · 0 评论 -
uni-app小程序答题功能开发(左右滑动,判断,填空,问答,答题卡,纠错,做题倒计时等)
1,最近再搞一个关于答题的小程序,刚开始是点击切换题目,后来改成左右切换的,搞得脑袋有点大,用swiper搞了半天还是有bug,无奈之下只能去百度了,找到了一个模板,稍微改变了一点,记录下来里面引用了colorUI一些内容,需要的去下载一些就可以了效果模板链接:答题模板html部分这里没啥好说的,就是根据不同的状态显示不同的内容<template> <view> <view id="top-box" class="cu-bar bg-white botto原创 2020-06-12 15:51:33 · 4819 阅读 · 4 评论 -
小程序检查登录是否过期
//检查登录是否过期 uni.checkSession({ success: (res) => { if(res.errMsg == 'checkSession:ok'){ console.log(res); console.log('登录暂未过期'); console.log(uni.getStorageSync('openid')); } }, fail: (err) => { //过期的话...原创 2020-06-12 10:34:02 · 4323 阅读 · 0 评论 -
小程序跳转到首页传值问题
项目中有一个需求,从某个页面跳转到tabbar页面的时候需要传一些值(对象,数组,字符串之类的)在tabbar页面需要用到这些值,看了一下小程序文档是不支持的,其他的跳转api又不支持,想了一会才想到一个笨方法…当你在点击某个按钮的时候,把需要传的数据先用缓存的方式缓存到本地然后在tabbar页面的onLoad中取出本地缓存的值this.carts = uni.getStorageSync('carts')ennnnnnnnnnnnnnnnnnnnnnnnnnnn,虽然方法笨了点,但是拿到想原创 2020-06-08 18:04:01 · 264 阅读 · 0 评论 -
短信验证码倒计时
<template> <view class="content"> <view>输入验证码</view> <view>短信验证码已发送至<text>110110110</text></view> <view v-show="verification" @tap="getCode">获取验证码</view> <view v-show="!verification"&.原创 2020-06-08 15:47:12 · 146 阅读 · 0 评论 -
小程序购物车商品结算数据处理,并将多个对象里面的某个值整合
1、html部分用到了小程序的checkbox-group标签 <view class="cart-item" v-for="(item,index) in shopcartList" :key="index"> <checkbox-group @change="selectSingle(item,index)" class="wrapper"> <checkbox :value="item.price" :checked="item.checked"原创 2020-06-07 00:18:38 · 548 阅读 · 0 评论 -
小程序点击到页面指定位置
点击推荐到商品推荐这里,这里不用scroll-view在mounted中获取节点信息 mounted() { // 选择并获取节点信息,官网建议在mounted中调用 var query = uni.createSelectorQuery().in(this) // 用boundingClientRect获取节点的布局位置\尺寸和滚动位置信息 query.select('#recommend').boundingClientRect(res => { conso原创 2020-05-29 10:01:58 · 1451 阅读 · 0 评论 -
uni小程序实现购物车功能,包括全选,反选,单选和计算总价格,快递费和总件数
效果图1、html <view class="content"> <checkbox-group @change="checkboxChange" class="wrapper"> <view class="cart-item" v-for="(item,index) in shopcartList" :key="index"> <label class="label"> <checkbox :value="item.原创 2020-05-26 19:00:47 · 2128 阅读 · 0 评论 -
修改小程序CheckBox样式
// 多选框外框样式 checkbox .wx-checkbox-input { width: 35rpx; height: 35rpx; border-radius: 50%; } // 选中后外框样式 checkbox .wx-checkbox-input.wx-checkbox-input-checked { border-color: #A40000; } // 内部样式 checkbox .wx-checkbox-...原创 2020-05-26 14:45:02 · 383 阅读 · 0 评论 -
小程序画布绘制海报
时间原因效果图有点丑,以后在慢慢改正绘制海报代码 createdhb() { uni.showLoading({ title: "正在生成海报" }) this.canvas = uni.createCanvasContext('poster1') this.canvas.rect(0, 0, 280, 500) this.canvas.setFillStyle('white') this.canvas.fill() //虚线原创 2020-05-18 15:29:32 · 444 阅读 · 0 评论