- 博客(44)
- 资源 (2)
- 收藏
- 关注

原创 微信小程序笔记
微信小程序项目笔记一.限制组件的宽高比(以宽高比为2:1为例)1.父组件指定以下属性: position: relative; width: 100%; padding-top: 50%;2.子组件指定以下属性: position: absolute; left: 0; top: 0; width: 100%; heig...
2018-08-17 12:48:06
536

原创 ReactNative之flexbox布局
ReactNative之flexbox布局一.伸缩容器属性1.flexDirection属性 flexDirection属性用于指定伸缩项目在伸缩容器中的排列方向,也就是主轴的方向,它的取值有如下几种情况: 1.row:主轴为水平轴,伸缩项目在伸缩容器中从左向右排列 2.row-reverse:主轴为水平轴,伸缩项目在伸缩容器中从右向左排列 3.colum......
2018-06-10 14:15:09
414
原创 27_Java2DRenderer结合freemarker动态生成图片
`Java2DRender`和`freemarker`属于java后端的技术,但是我们同样可以借助这两个工具在服务器端动态生成图片(如海报、名片)。生成好了之后,返回给前端使用即可。以生成海报/名片为例,如果是在微信小程序环境中,可以通过canvas绘制,再将绘制的内容导出成图片。但是呢,有一定的局限性,比如说生成图片的模版内容很多、比较复杂...,就需要编写大量的canvas绘制代码,同时,如果处理不当,可能会出现`oom`或者无法正常绘制等问题。那么这个时候同样也可以通过`Java2DRender`
2025-03-12 18:26:11
1125
1
原创 26_微信小程序蓝牙-蓝牙通信篇
要实现终端设备与低功耗蓝牙蓝牙设备的通信,首先需要获取低功耗蓝牙设备所有可用的服务,找到每一个服务对应的所有特征,从这些特征中找到对应类型的特征,当然,我们也没有必要找到所有的特征,只需找到第一个满足条件的特征即可
2025-03-04 20:26:43
1053
原创 25_微信小程序蓝牙-蓝牙连接篇
在`BluetoothManager`中管理蓝牙设备连接状态首先需要申明一个数组`connectedDeviceIds`存放已经连接的设备id,通过`uni.onBLEConnectionStateChange`监听设备的连接状态改变。在`uni.onBLEConnectionStateChange`的回调中,会返回连接状态,以及对应的设备id,如果是已连接,把设备id添加到`connectedDeviceIds`
2025-03-03 17:09:59
1098
原创 24_微信小程序蓝牙-设备搜寻篇
注: 安卓机型需要有位置权限才能搜索到设备只需要调用使用`uni.onBluetoothAdapterStateChange`即可。注: `uni.onBluetoothAdapterStateChange`只需放在`uni.openBluetoothAdapter`调用完成后即可:- 安卓 12 及以上版本手机,无`搜索附近设备权限`或`附近设备`- iOS手机,未打开`微信app访问蓝牙的开关`
2025-03-03 13:44:11
1025
原创 23_微信小程序蓝牙-权限适配篇
微信小程序中使用蓝牙模块,首先必须要调用`uni.openBluetoothAdapter`初始化蓝牙模块。只有蓝牙模块初始化成功,后续的蓝牙相关API才能调用成功,而`uni.openBluetoothAdapter`受限于小程序的授权管理机制,以及`微信app`的授权管理机制。
2025-02-27 19:17:31
471
原创 22_打印机TSPL指令集
TSPL指令支持使用点制单位,而纸张使用的计量单位为mm(毫米),所以在使用点制单位编写TSPL指令时,需要做mm(毫米)到点制单位dot的转换,转换关系取决于设备的dpi
2025-02-26 13:45:51
660
原创 如何自定义HBuildx插件?
打开HBuilderx -> 文件 -> 新建 -> 项目 -> 项目类型选择IDE插件,填写插件项目名称,选择默认模版创建即可。
2025-02-26 10:09:58
1246
原创 07_Flutter使用NestedScrollView+TabBarView滚动位置共享问题修复
可以看到,上图中三个列表的滑动位置共享了,滑动其中一个列表,会影响到另外两个,这显然不符合要求,先来看下布局,再说明产生这个问题的原因:布局整体使用NestedScrollView,顶部banner和TabBar通过headerSliverBuilder创建,body为TabBarView,TabBarView中有三个列表,通过TabController与TabBar实现联动,同时每一个列表通过继承StatefulWidget构建并混入AutomaticKeepAliveClientMixin,重写want
2024-05-07 18:18:34
2344
1
原创 06_Flutter自定义锚点分类列表
categoryWidth: 左侧边栏的宽度,右侧区域的宽度填充剩余空间即可。itemCount: 总共有多少个分类项,也就是左侧边栏中有多少个字项。sticky: 滑动过程中,右侧标题是否吸顶。controller: 外部通过controller可以控制左侧边栏中子项的选中以及右侧列表滑动位置的联动,同时监听选中状态。categoryItemBuilder: 创建左侧边栏中的每一个分类项。sectionItemBuilder: 创建右侧滑动列表中的每一个标题项。
2024-04-30 17:30:00
1457
5
原创 05_Flutter屏幕适配
可以看到,ViewConfiguration对象的创建过程,会传递默认的像素比,以及确定默认的逻辑尺寸,这里就是我们第一个需要修改的地方,那么怎么修改,毫无疑问,需要把RendererBinding的renderView的值替换成我们自己创建的,这样我们就可以根据自己计算的逻辑尺寸和像素比去创建ViewConfiguration了。可以看到,这里在计算点击的触摸坐标时,还使用的是默认的像素比去计算的,因此,这里需要把默认的像素密度替换。因此,我们需要修改默认的逻辑尺寸,将逻辑宽度统一成375。
2024-04-19 19:14:49
1910
3
原创 04_Flutter自定义Slider滑块
既然要自定义滑块,毫无疑问需要从SliderThemeData的thumbShape入手。thumbShape;});因此我们可以定义一个类继承SliderComponentShape,并实现getPreferredSize和paint方法,getPreferredSize控制滑块大小,paint负责把滑块绘制到屏幕上。
2023-11-29 02:23:43
3054
原创 03_Flutter自定义下拉菜单
在Flutter的内置api中,可以使用showMenu实现类似下拉菜单的效果,或者使用PopupMenuButton组件,PopupMenuButton内部也是使用了showMenu这个api,但是使用showMenu时,下拉面板的显示已经被约定死了,只能放一个简单的列表,没有办法定制下来面板的ui,并且下拉面板的宽高需要通过指定constraints进行限制,下面是一个简单的showMenu的用法:接下来,我们将参照showMenu的源码,依葫芦画个瓢,自定义一个下拉菜单的api,并可自由定制下拉面板
2023-10-27 10:12:46
2701
原创 02_Flutter自定义Sliver组件实现分组列表吸顶效果
在使用SliverPersistentHeader时要求我们明确指定子控件的高度,不支持吸顶上推效果,使用起来不够灵活,所以我们参考并结合SliverToBoxAdapter和SliverPersistentHeader源码,自己实现一个自适应高度的吸顶Sliver组件,并在此基础上一步步实现吸顶上推效果。可以看到,所有的分组section都已经吸顶了,只不过吸顶位置都是0,并且前一个section把后一个section覆盖了,我们下一步实现上推功能后,这个问题自热而然的就解决了。
2023-09-11 01:58:26
3537
9
原创 20_微信小程序2.16.0以上基础库版本无法触发onUnhandledRejection的替代方案
关于这个问题,一直在纠结要不要处理,因为这个问题在之前只有在微信开发这工具的模拟器中会出现这个问题,在真机环境下一切正常,但是就在前段时间,电脑版微信可以打开小程序了,出于好奇,我把之前做好的小程序,在电脑版微信中打开,而之前所有调用服务端接口的地方都通过Promise进行了二次封装,不试不知道,一试吓一跳,所有promise抛出的异常,无法被捕获到,影响最大的就是业务里面所有登录…拦截失效了,于是联想到应该是和。
2023-05-06 19:40:30
813
原创 03_uni_app之ApiIntercept的添加、移除过程
添加拦截器时,会按照调用顺序依次把要添加的interceptor的各个属性合并到uni-app内置的一个常量对象scopedInterceptors中,如果说scopedInterceptors中已经包含了要添加的interceptor的属性,那么则不会被重复添加,时传入的method和interceptor参数是否合法,如果参数不合法,系统会抛出一个异常,ApiInterceptor添加失败,如果参数合法,则会调用fn.apply(null, args),也就会调用到callback,
2023-03-11 21:08:36
695
原创 02_uni_api初始化以及promise化过程
当我们通过uni.xxx调用uni api时,都会先调用promisify将实际需要调用的api接口进行预处理,在进行预处理时首先会根据调用的api名称判断,是否可以promise化,如果不可以promise化,则直接返回实际调用api,如果可以promise化,则处理成支持返回Promise的api,也就是将uni api promise化。baseApis中的api属于uni-app特有的api,当我们通过uni.xxx调用baseApis中的api时,实际是调用uni-app特有的api。
2023-03-08 03:59:21
301
原创 01_js中的Proxy解析
proxy的定义,都可以使用上面的形式来定义,其中,new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。假如后端给我们返回了一个json数据格式如下,其中有一个字端avatar,是一个图片链接,使用的是相对路径,在显示它之前,我们首先需要在前面拼接上域名。可以看到,通过userInfoProxy修改avatar的值,传入了一个全路径,最后通过userInfoProxy赋值的时候,会自动转为相对路径。
2023-03-02 15:41:08
756
原创 19_微信小程序之优雅实现侧滑菜单
这个随机数的生成规则,你可以自己写算法实现,这里我用了一种比较巧妙的办法,那就是在事件触发的回调中,系统会给我们一个event对象,我们通过这个event对象的timeStamp属性,可以获取到事件触发的时间戳,这个时间戳必然是唯一的,因此event.timesSamp就可以作为这个唯一的随机数来使用。上图中,红色区域是一条辅助线,被固定在了组件的最由边的位置,为了好演示,我把宽度设置的比较宽,正常1px就够了,蓝色区域为侧滑面板的右半边。最后,我们把辅助色块去掉,就大功告成了。,如果是回弹关闭,设置。
2023-02-19 17:33:18
2155
原创 14_自定义ItemDecoration实现qq好友列表分组效果
在ItemDecoration的实现方法中,有两个方法是用于绘制的,一个是onDraw,一个是onDrawOver,onDraw方法中绘制的内容如果和RecyclerView的item有重叠,重叠区域会被item覆盖,常用于在RecyclerView的item周围绘制分割,而在onDrawOver方法中绘制的内容会覆盖在RecyclerView的item之上,因此我们需要在onDrawOver中进行绘制,才能实现吸顶。..................
2022-08-12 16:39:21
551
1
原创 18_微信小程序之微信视频号滚动自动播放视频效果实现2.0
关于这个效果呢,我之前已经实现过一个12_微信小程序之微信视频号滚动自动播放视频效果实现,只不过之前的实现是监听scroll-view的onscroll,根据scroll-view的滑动位置动态计算出播放的index来控制自动播放,本文将采用微信小程序为我们提供的IntersectionObserver来实现。IntersectionObserver wx.createIntersectionObserver(Object component, Object options)IntersectionObse
2022-06-21 10:47:22
4556
3
原创 13_android编译ijkplayer
13_android编译ijkplayer一.编译环境macOS Big Sur 11.4NDK r10eHomeBrewgit二.编译前准备配置ANDROID_SDK和ANDROID_NDK环境变量安装git,make, yasmbrew install gitbrew install makebrew install yasm三.使用git获取ijkplayer最新源码git clone https://github.com/Bilibili/ijkplayer
2022-05-03 01:39:09
801
原创 12_View的绘制流程
12_View的绘制流程一.View是如何被添加到屏幕窗口上的当在Activity的onCreate方法中调用setContentView(R.layout.activity_main)时,会调用Activity的setContentView方法,在Activity的setContentView方法中会调用PhoneWindow的setContentView方法,在PhoneWindow的setContentView方法中会调用installDecor方法,installDecor方法会创建一个Dec
2022-04-01 10:25:59
2057
原创 17_微信小程序之抖音微视无限滑动视频列表自定义组件编写
微信小程序之抖音微视无限滑动视频列表自定义组件编写一.先上效果图看到上面,你可能首先会想到,使用swiper然后将swiper的circular设置为true,那么,想象一下,假如视频很多的情况下,1千个,甚至上万个的情况下,只要有一个swiper-item,就会渲染一个Video播放器,这样是非常耗费性能的,本文将在这个基础上做优化,大致思路就是,不管我们的数据有多少条,我们都只渲染3个swiper-item,再配合swiper的切换,切换swiper-item的内容实现复用二.swiper实现循
2022-03-17 00:52:03
2851
7
原创 11_android刮刮卡自定义组件编写
11_android刮刮卡自定义组件编写一.先上效果图二.自定义组件类创建,绘制遮罩创建一个自定义组件类,你也可以继承自FrameLayout/RelativeLayout/ConstraintLayout,甚至是ViewGroup,只不过如果继承自ViewGroup,需要自己实现measure和layout过程,这里继承LinearLayout实现public class ScratchCardLayout extends LinearLayout { private Paint mP
2022-01-28 01:14:19
2834
原创 16_微信小程序之基于WebAudioContext实现带波形图的自定义音频播放器
微信小程序之基于WebAudioContext实现带波形图的自定义音频播放器一.实现思路定义自定义属性获取音频的二进制流将音频的二进制流解码为AudioBuffer播放控制,计算播放时长以及播放进度确定播放器的宽高,通过AudioBuffer获取音频时长,根据音频时长duration以及播放器宽度确定波形的宽度根据波形宽度以及AudioBuffer生成波形图数据,并计算峰值确定canvas宽高绘制波形图和播放进度音频播放过程中,根据播放进度重绘波形二.定义自定义属性属性
2022-01-24 16:25:55
6750
19
原创 10_android文字绘制
10_android文字绘制一.概述我们在使用TextView去显示一段文本时,如果遇到一些特殊情况,比如我们希望文本显示的时候并不局限于显示单一的颜色,而是希望显示渐变色,或者是在做一个类似酷狗、网易云音乐的歌词显示动画效果的时候,这个时候如果使用系统为我们提供的TextView并不能满足我们的要求,因此就需要我们自己去绘制文字。二.自定义控件继承自TextView,在onDraw方法中绘制文字public class CustomTextView extends AppCompatTextVie
2022-01-12 01:12:55
2691
原创 09_NestScrollView嵌套RecyclerView实现淘宝首页滑动效果
11_NestScrollView嵌套RecyclerView实现淘宝首页滑动效果一.概述本文主要实现淘宝首页嵌套滑动,中间tab吸顶效果,以及介绍NestScrollView嵌套RecyclerView处理滑动冲突的方法,淘宝首页的效果图如下:二.开搞首先我们通过一张图来分析下页面的布局结构:先把最基础的页面搭出来,禁用Recycler滑动只需要重写onInterceptTouchEvent、onTouchEvent返回值都设为false即可:<?xml version="1.0"
2021-12-31 03:18:32
3011
3
原创 15_微信小程序之svg地图自定义组件编写
微信小程序之svg地图自定义组件编写之前写过一篇android中实现svg地图的文章,感兴趣的请点击android_打造通用svg地图自定义组件,本文将在小程序中实现一个svg地图自定义组件一.地图svg数据准备可以从下面这个网站下载自己需要的svg文件:http://datav.aliyun.com/tools/atlas/index.html二.实现思路和android同理,先准备好json数据,这里不直接使用svg文件是为了方便和后端结合,因为我们往往会希望一个省份的地图里面需要显示哪几
2021-12-03 03:15:39
1798
3
原创 37_Flutter之Sliver组件扩展
Flutter之Sliver组件扩展Sliver主要用于处理嵌套滑动、合并多个List的情况,像GridView、ListView自身是支持滑动的,这个时候如果再在外层嵌套一个滑动的容器组件的话,如果说GridView、ListView的滑动方向与外层可滑动容器的滑动方向一致的时候,必然会引发滑动冲突的问题,这个时候我们的外层可滑动容器可以采用CustomScrollView,并配合SliverGrid、SliverList实现,查看ListView、GridView的源码可以知道,SliverGrid、
2021-10-19 11:41:01
1083
原创 08_android_打造通用svg地图自定义组件
android_打造通用svg地图自定义组件一.地图svg数据准备这里笔者已经整理了云南省16个地州、129个县的svg path数据,如果你要绘制的是其他省份,甚至是中国地图,那么可以从下面这个网站上去拿,至于怎么转换成android中能够使用的数据格式,后面会做详细说明,先说句不用客气哈????:http://datav.aliyun.com/tools/atlas/index.html#&lat=25.249702292968653&lng=101.86055250000003&
2021-09-02 01:50:49
997
3
原创 12_微信小程序之微信视频号滚动自动播放视频效果实现
12_微信小程序之微信视频号滚动自动播放视频效果实现一.获取视频的分辨率、时长、缩略图微信小程序提供了三种方式可以获取视频的分辨率、时长:wx.getVideoInfo(Object):只能用于本地视频VideoDecoder.start(Object):可用于网络视频或者本地视频借助video标签的bindloadedmetadata回调: 可用于网络视频或者本地视频,但必须在video标签被渲染的情况下才能获取到,并且获取速度较慢 /** * @author gale
2021-01-01 07:09:36
5945
原创 06_基于koa实现微信小程序授权登录流程
06_基于koa实现微信小程序授权登录流程一.微信小程序获取code在微信小程序中通过wx.login(Object)获取codewx.login({ success: function(res) { if(res && res.code) { //res.code即为获取的的code } }}) 二.服务器端接受code获取到code后,需要将code以api接口调用的方式传递到服务器,服务端基于koa实现,此处将服务器端接收
2020-12-07 00:41:42
1422
原创 08_微信小程序之大转盘svg实现
08_微信小程序之大转盘svg实现一.关于微信小程序对svg的支持这里先准备一个静态的svg文件做测试<!--components/turntable-svg/images/secs.svg--><svg width="320" height="320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="rotate(-67.5,1
2020-11-24 05:16:17
850
原创 07_微信小程序之大转盘自定义组件编写
07_微信小程序之大转盘自定义组件编写一.界面布局通过传入的size控制圆盘大小<!--components/turntable/index.wxml--><view class="turntable" style="width:{{size}}rpx; height:{{size}}rpx;"> <image class="outer" src="../../images/outer.png"></image> <canvas clas
2020-11-22 20:28:11
4780
9
原创 微信小程序01
微信小程序01一.项目结构[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接wxml —> android中的xmljs —> android中的javawxss —> css样式文件json —> 下拉刷新开关配置、外部组件引用配置二.生命周期onLoad: 当前页面首次加载时调用onShow: 当前页面可见时调用onReady: 监听初次渲染完成时调用onHide: 页面隐藏时调用onUnload: 页面卸载时调用onPullDown
2020-07-21 19:14:08
291
原创 03_android集成zxing并自定义扫码界面
03_android集成zxing并自定义扫码界面一.zxing_core jar包生成下载zxing sdk下载完成和可以看到zxing sdk的目录结构如下把core目录下的文件打成一个jar包使用Intellij IDEA创建一个java项目,命名为zxing把sdk中的core目录下的com目录完整拷贝到java项目的src目录下生成zxing_c...
2020-04-22 04:38:53
2525
15
原创 01_java设计模式之单例模式
java设计模式之单例模式一.应用场景在实际开发中,当我们要求一个类只能被实例化一次时,比如各种各样的Manager、各种各样的Factory,可以使用单例模式二.构造单例的常规步骤提供一个public static final 的当前类的实例变量INSTANCE将构造方法设置为private,保证其对外不能通过new关键字实例化通过getInstance的静态方法返回一个唯一的当前...
2020-03-10 01:50:55
309
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人