微信小程序
文章平均质量分 86
abs625
为众人抱薪者,不可使其冻毙于风雪
展开
-
微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级。研究了一番,选择来百度的开源图标框架echarts-for-weixin,不过最近GitHub可能有时候无法访问,使用csdn加速地址也一样Echarts,接下来就分享下实现过程了。实现我们先给我们的祖国来张画像,实现一张中国地图。克隆代码从上面的地址上面先把代码克隆下来,我们主要使用的就是ec-canvas这个文件夹里面的部分。原创 2021-05-06 17:07:50 · 4556 阅读 · 7 评论 -
微信小程序引入外部字体
微信小程序引入外部字体前言wx.loadFontFaceBase64尾巴前言微信小程序由于打包体积限制,不支持直接引入字体文件。但是如果我们想引入自定义的字体该怎么操作了?接下来我们介绍两种引入自定义字体的方式。wx.loadFontFace第一种方式就是通过官方的wx.loadFontFace(Object object)这个API去加载字体,具体用法请参考官方wx.loadFontFace用法。大概使用方法如下:wx.loadFontFace({ family: 'Bitstream Ve原创 2021-04-28 16:11:08 · 7863 阅读 · 6 评论 -
微信小程序自定义picker
微信小程序自定义picker前言实现蒙层底部内容内容顶部picker布局实现js实现样式使用姿势代码获取尾巴前言之前UI丢了一张类似这样的效果图(当然这个是本文的效果图,不是原图,不过差不多)给我:当时看到图就想这个还不简单,直接使用picker就行了。然后就是一顿操作,选择mode为date,最终出现了效果图:正当我沉浸在完成功能的喜悦中的时候,心里有个声音一直在提醒我:你没有达到UI需求效果,你没有达到UI需求效果,你没有达到UI需求效果…定睛一看果然和UI效果图有些许区别,UI左上角显示原创 2020-08-04 16:01:48 · 7004 阅读 · 7 评论 -
微信小程序万能下拉刷新(官方样式)组件
微信小程序万能下拉刷新组件前言思路实现步骤定义组件具体实现js代码实现布局实现样式使用页面json配置页面布局js实现动态宽高度,充满屏幕应用前言微信小程序(后面统称小程序)在page中已经自带下拉刷新功能,只需要在json文件中开启配置就可以便捷使用下拉刷新功能。但是在开发场景中下拉刷新的使用频次是很高的,有时候不止要在page层级实现下拉刷新功能。那么我们想对任意的view都能实现下拉刷新可以实现么?答案是:yes!思路通过查阅官方API文档,发现scroll-view在最低版本为2.10.1可原创 2020-05-21 10:14:36 · 8275 阅读 · 5 评论 -
微信小程序跨页面跨组件通讯eventbus
微信小程序跨页面跨组件通讯eventbus前言实现原理实现订阅实现发布实现取消订阅实现实战一个key对应一条消息一个key对应多条消息页面和组件通讯其他通讯场景总结尾巴前言移动开发中页面之间通讯是很常见的场景,比如某个页面完成操作后需要通知其他的页面刷新等等之类的。然而微信小程序(后面统称小程序)原生并未提供跨页面通讯的API,所以我们只能自己实现这样一个类似的API。那我们来试想下这个API大概要有一些什么功能?能满足页面之间的通讯能满足页面和组件(component)之间的通讯能满足组件(c原创 2020-05-11 11:06:27 · 2529 阅读 · 6 评论 -
微信小程序实用小技巧(持续更新)
微信小程序实用小技巧前言全局变量全局函数引入js实现全局函数时间转换给data对象中的属性赋值数组操作Json操作获取屏幕的可用宽度和高度rpx转px布局自动换行尾巴前言微信小程序(后面统称小程序)开发中我们会用到一些实用的小技巧来提升我们开发的效率,今天将自己总结的一些心得和大家分享下。全局变量全局变量主要是缓存一些整个小程序周期内会经常使用并且不会频繁变动的变量,比如说用户个人信息之类...原创 2020-05-08 17:21:44 · 743 阅读 · 3 评论 -
微信小程序加入购物车效果动画
微信小程序加入购物车效果动画前言准备实现原理布局样式逻辑实现尾巴前言好久没有写过博客了,最近做了个微信小程序(后面统称小程序)加入购物车动画效果,然后给大家分享下。还是老规矩,先看效果图镇楼。因为是demo,所以UI美观度请无视,如果是你需要的效果或者功能,那就请接下来往下看。准备准备一张购物车图片,如下实现实现这个效果主要就是用小程序提供的动画相关的API,如果你对小程序动画相关...原创 2020-04-27 09:59:32 · 5751 阅读 · 8 评论 -
微信小程序心形点赞效果
微信小程序炫酷心形点赞效果前言准备实现原理布局样式逻辑实现尾巴前言之前写过一篇文章微信小程序Canvas绘图API,简单介绍了下微信小程序(下面统称小程序)Canvas绘图相关API的使用,然后写了一篇利用绘图知识绘制自定义参数二维码的文章微信小程序生成自定义参数二维码。今天,我们继续利用绘图相关API来实现标题所说的内容。先上效果图镇楼:准备首先要准备的主要是四张图片,相信大家一看就知...原创 2019-09-27 17:43:56 · 8332 阅读 · 24 评论 -
微信小程序生成自定义参数二维码
微信小程序生成二维码前言实现尾巴前言最近项目中要用到二维码分享功能,需要封装一些自定义的参数通过二维码分享。查看官方文档,发现系统提供了生成二维码的功能,但是细看才发现官方提供的接口其实是生成小程序二维码,通过扫描二维码可以进入小程序指定的页面。显然官方的API无法满足我们的要求,接下来就将项目中离线生成带自定义参数的二维码的方法分享给大家。实现老规矩,先上图镇楼有人可能会说,你会不会...原创 2019-09-03 21:16:03 · 5684 阅读 · 2 评论 -
微信小程序Canvas绘图API
微信小程序Canvas绘图API前言使用姿势常用API(以下API都是通过CanvasContext对象进行调用)颜色、样式setFillStyle(string|CanvasGradient color)fill()setStrokeStyle(string color)stroke矩形rect(number x, number y, number width, number height)fi...原创 2019-08-31 13:42:35 · 20991 阅读 · 8 评论 -
微信小程序自定义组件(Component)
微信小程序自定义组件 Component前言步骤简单例子在项目根目录新建一个文件夹component在component目录下新建一个目录,取名为componentview在页面中引用如何轻松的自定义组件组件的属性组件的生命周期宿主(引用页面)生命周期slot节点前言微信小程序(后面统称小程序)中的组件到底是什么?按照笔者的理解来说就是开发者自己封装的一个的模块,然后可以再页面和其他组件中去引...原创 2019-07-11 17:39:23 · 4871 阅读 · 5 评论 -
微信小程序仿系统自带下拉刷新效果
微信小程序仿系统自带下拉刷新效果前言思路分析实现尾巴前言看到标题也许有人会说:系统不是已经自带了下拉刷新,你去仿照系统的下拉刷新是不是吃多了没事干?其实真相并不是这样的。在微信小程序手把手教你实现类似Android中ViewPager控件效果这篇文章中,我们利用swpier+scorllview实现了一个page包含多个页卡来展示更多内容。然而,系统自带刷新在此情景下使用体验极差,所以在微信小...原创 2020-06-17 14:43:48 · 1167 阅读 · 2 评论 -
最简单的微信小程序滑动删除,拿来即用
做移动端开发,手机屏幕都是寸土寸金,界面要美观简洁,又要功能强大,所以说程序猿都是很苦逼的。所谓一猿有难,八个项目经理围观,此处省略一万字。。。好了,言归正传,今天实现一个在android和ios很常见的功能,列表item滑动删除,老规矩,先上图镇楼欧阳菁被我翻牌子了,看这就是贪污的下场,#@&@#。。。,哎呀又扯远了实现原理就是:1、将你要展示的布局和删除按钮...原创 2018-08-01 09:50:50 · 17054 阅读 · 15 评论 -
微信小程序炫酷的弹出式菜单特效
今天给大家带来一个微信小程序的弹出是菜单效果,老规矩先上效果图。(录制的gif动画有点卡,实际真机或是模拟器上很顺畅) 先简单说下思路:1、首先在屏幕的某个位置放几个悬浮按钮,放几个看你需要的功能2、点击最上层(wxml中最后一个就是最上层)的的按钮后增加背景遮罩,这个遮罩在我前面自定义modal弹框时有用到3、分别对按钮做旋转和移动动画和透明度,造成动画差异就是位移的动画...原创 2018-08-07 09:39:45 · 18589 阅读 · 14 评论 -
微信小程序布局技巧(一)
微信小程序布局技巧前言小程序布局方式Block布局方式flex布局方式wxss添加样式wxml应用样式效果flex布局种类justify-content属性align-items属性flex-wrap 属性应用尾巴前言友情提示,阅读本文之前,可能需要有一点微信小程序开发基础。本文旨在为那些刚入坑微信小程序(文中后面统称小程序)或者入坑后对页面UI布局有困难的开发者,老鸟和大神请无视。如果你还没...原创 2019-04-26 17:16:55 · 30513 阅读 · 14 评论 -
微信小程序布局技巧(二)
微信小程序布局技巧(二)前言POSITION(定位)常用的定位属性值staticrelativeabsolutefixed定位元素元素层级应用尾巴前言在上一篇文章中:微信小程序布局技巧(一),我给大家介绍了微信小程序(后面统称小程序)中一些常用的布局技巧。掌握了上一篇文章中的知识能帮助我们实现小程序中绝大部分的布局要求,当然为了实现更加复杂的样式和布局要求,CSS 为定位提供了一些属性,利用这...原创 2019-04-28 16:14:54 · 5679 阅读 · 1 评论 -
微信小程序布局技巧(三)
微信小程序布局技巧(三)前言小程序适配物理像素小程序中的pxpx和rpx转换应用尾巴前言本文是微信小程序(本文后面统称小程序)布局技巧系列最后一篇文章,主要说明小程序的屏幕适配问题。本文和系列文章前两篇没有什么必然联系,当然你如果有兴趣,也可以去看看前两篇文章:微信小程序布局技巧(一)微信小程序布局技巧(二)小程序适配众所周知,小程序是以微信移动客户端为载体跑在Android和iO...原创 2019-05-08 16:59:48 · 3075 阅读 · 3 评论 -
微信小程序手把手教你实现带字母索引的城市选择列表
微信小程序手把手教你实现带字母索引的城市选择列表前言需求分析左边可滑动列表滑动列表UI实现item点击事件右边带字母的索引条索引条从上到下分别是定位和26个大写字母索引条响应触摸和点击事件索引和列表联动尾巴前言在做Android和iOS应用开发的时候,我们经常在app中要用到带字母索引的城市选择功能,他们功能基本都大同小异,大概长下面的样子:那么在微信小程序(文章后面统称小程序)中我们要怎...原创 2019-05-14 18:26:50 · 9186 阅读 · 17 评论 -
微信小程序手把手教你实现自定义导航栏
微信小程序手把手教你实现自定义导航栏前言实现思路和步骤去掉原来的导航栏自定义导航栏布局设置导航栏高度绑定事件,实现逻辑尾巴前言熟悉微信小程序(文章后面统称小程序)开发的朋友们应该知道,原生提供的导航栏除了能修改背景颜色和标题之外,对布局的修改和拓展并不支持。原生的导航栏如下:我们很多的小程序可能都是从app移植过去的,在原生app(Android/iOS)上我们能对导航栏做一些自定义的布局...原创 2019-05-13 16:33:21 · 5872 阅读 · 6 评论 -
微信小程序手把手教你实现类似Android中ViewPager控件效果
微信小程序手把手教你实现类似Android中ViewPager控件效果前言需求分析头部TAB滑动的内容部分最终版本尾巴前言在做Android开发的时候,ViewPager是开发者使用频率很高的一个控件,今天我们就用小程序来实现一个类似的demo,效果图如下:下面就开始直接撸代码了。需求分析通过查看界面元素,发现主要由两部分组成:头部能点击的title和下面能滑动的内容。头部TAB这...原创 2020-06-17 14:48:16 · 2294 阅读 · 14 评论 -
微信小程序自定义下拉刷新
微信小程序手把手教你实现自定义下拉刷新前言思路分析实现尾巴前言在上一篇文章:微信小程序手把手教你实现类似Android中ViewPager控件效果,通过这篇文章我们实现了跟android开发中ViewPager+Fragment类似的效果。可是在实际开发中,我们往往在页面上需要加上下拉刷新功能,通过小程序自带的页面下拉刷新在单个页面支持很好,可是在我们上一篇文章写的页面中使用效果却不是很理想。...原创 2020-06-17 14:51:08 · 4691 阅读 · 10 评论 -
微信小程序自定义带动画(modal)弹窗
最新微信小程序很火,然后本人也入坑了。可能有过开发经验的小伙伴们都有个感觉,不管是android,ios,还是最近很火的微信小程序,官方提供的原生控件往往不能完全满足我们的开发需求,所以今天我们来一个自定义的微信小程序组件(modal弹窗组件),先上一张图镇楼!!! 看到这里了,说明效果图还是对你有点吸引的么,哈哈,废话不多说了,开始上代码。。。一共是四个文件js、json、xml...原创 2018-07-31 17:40:36 · 4874 阅读 · 3 评论