Flutter中播放一个部分无限循环的Lottie动画
下面是一个需要 “部分循环” 的播放的lottie动画，用一整个json来实现，动画步骤如下： 0-26帧播放一次 从26帧开始到结束反复播放 首先定义一个动画播放控制器，下面是关键代码 class LoginState extends State<Login> with TickerProviderStateMixin { late AnimationController sunLo…
Flutter中Facebook授权提示错误的签名
最近在项目中集成Facebook登录，按照之前的流程接入，登录时提示下面的错误 Unhandled Exception: [firebase_auth/invalid-credential] {"code":190,"message":"Bad signature"} 这里是我的项目依赖 firebase_core: ^3.8.0 fir…
CocosCreator获取元素点击的相对坐标
页面上有一张图片，我想在点击图片上某一个位置的时候获取到点击位置相对于该元素的坐标； 下面是坐标示意图 Cocos Creator 提供的API只能获取到x1,y1的值，而我们要得到的是x2,y2的值，就需要用到坐标转换； 实现代码 function onTouchEnd(event: EventTouch) { // 这里得到的就是x1,y1的值 const pos = event.getUIL…
dio网络请求库使用系统代理
起因 因为项目中使用了firebase storage存储文件，当使用dio下载时发现国内的网络无法正常下载。 但是发现在dio的HttpClient示例的findProxy写死代理地址之后就可以下载。 这说明dio并没有使用系统的代理，所以需要获取系统代理并设置到dio的代理中。 具体实现 需要用到的dart包：http_proxy_override 主要分为两步，即获取系统代理和设置dio代理…
Flutter支持webview并实现双向通信
在 flutter 项目开发中，避免不了在 app 中会使用一些 H5页面，所以需要在 app 中嵌入 webview； 安装依赖 首先要在项目中安装 webview_flutter 插件，我这里安装的版本是： webview_flutter: ^4.0.2 添加 Bridge 集成 webview 可以查看官方文档案例（此处就不单独再说明）。 创建一个 WebViewController，注意这…
CocosCreator命令行构建游戏资源
前言 作为初学者，Cocos开发过程中发布游戏都是通过界面右上角“构建发布”按钮去做发布的，但是发布的配置无法存储在项目版本管理中，多人开发的时候就需要重新设置发布，所以研究了下，官方是支持使用命令行发布的，这样就只需要在代码编辑的IDE就可以实现发布游戏了。 官方文档的说明：Cocos Creator 3.0 手册 – 命令行发布项目 步骤 命令行发布分为下面的步骤： 创建发布的配置…
本地开发告别“您的连接不是私密连接”，使用mkcert生成本地证书
前言 本地开发过程中如果启用了https但是没有配置证书，浏览器就会下面的警告错误 我们必须手动点击高级 -> 继续前往 xxx 才可以正常访问，这也是浏览器的保护机制，既然是本地开发，我们肯定网站是安全的，我们可以信任的。我们如果配置了证书就能解决上面的警告，获取证书有下面的两个渠道： 1、获取网站真实的证书 2、自己创建本地信任的证书 我们一般选择“自己创建本地信任的证书”，因为线上证书…
基于飞书表格的前端页面数据热更新方案
业务需求 我们的项目有一个「常见问题」的页面，里面罗列了我们APP使用的一些疑问和官方的解答，这个页面里面的数据会随着产品的运营经常的更新，当新发版的时候可能有多个产品经理去维护这个页面数据。「常见问题」页面的实现可以是RN/Flutter/H5，有下面的两种方案可以实现页面的更新： 1、管理后台维护维护常见问题的数据 2、将数据托管到飞书表格，前端人员拉取飞书表格数据后打包生成页面 但是上述两个…
前端生成海报方案以及优化
生成海报在日常的 H5开发中已经很常见了，为了更好的用户体验大家都有不同的解决方案。不管是微信还是朋友圈或者其他的社交平台，生成海报的目的主要是用来分享出去。下面是生成海报并分享的主要流程： 1、获取数据 在服务器端获取海报上展示的数据，例如头像、背景、统计数据等； 2、H5绘制海报 通过服务器返回的数据在 canvas 上绘制海报，有下面的两种方式实现： 创建 canvas 画布，手动绘制元素到…
监听Flutter App切换前后台，支持单页面和全局
开发时候，我们会通过App是否在前台运行做一些操作，我们可以监听下面两种情况： 全局监听：不管在哪个页面，只要App里面切换了前后台就会触发，常用于数据埋点等 单页面监听：只有在某个页面进行App切换前后台才会触发，常用于页面数据刷新等 App状态以及流转 App生命周期状态有下面的几个： 1、resumed App是可见状态并且接受用户的交互。 2、inactive App不是激活状态并且不再接…
使用阿里云OSS图片处理
阿里云处理图片的服务是收费的，但是有一定的免费数量，数量超过之后按照数量收费。 1、处理旋转方向 拍照会自带设备旋转信息，在安卓手机上会旋转在阿里OSS使用该参数可以调整方向 https://image-demo.oss-cn-hangzhou.aliyuncs.com/f.jpg?x-oss-process=image/auto-orient,1 参考：https://help.aliyun.c…
Flutter新手入门开发问题和记录
说明： $ROOT_PATH: 代表Flutter项目的根目录 一、访问加速 1、编译时加速 gradle会在安卓编译的时候下载一些依赖，默认的仓库是google的，在国内访问速度会很慢，所以替换阿里云的仓库，修改 $ROOT_PATH/android/build.gradle 文件，修改内容如下 buildscript { ext.kotlin_version = '1.6.21�…
微信&QQ二次分享
二次分享： 用户打开网页之后点击右上角…选择分享给好友或者分享到朋友圈的过程。 一、展示样例 开发网页的时候涉及到微信二次分享，需要在朋友圈显示一些数据，如下图所示： 需要显示：标题、描述、小图像、跳转链接。 我们可以调用微信的API设置，但是也不能随意设置，需要一切签名数据以保证跟踪防止网络出现不良信息无法追责； 二、微信具体实现 在h5端可以使用jssdk去调用，这里查看官方文档。…
Webpack加载markdown文件内容
前言 本文适合使用create-react-app（下文称之为cra）创建的项目，是react官方脚手架，内部由react-scripts支持； markdown是一种轻量级的富文本文件类型，按照惯例，加载不同类型的文件，我们需要在webpack中配置对应的loader实现； 因为cra默认是将所有的配置都封装在react-scripts中，默认没有给我们提供对应的修改入口，要是我们修改的话有两个…
H5页面中PNG图片优化
活动页面中例如页面背景等图片的尺寸都是很大的，png的尺寸一般是的100+kb，导致加载比较慢； 现在我们的方案就是在支持webp的浏览器中使用webp作为背景图减少体积，虽然webp是有损压缩，但是还可以接受； 实现方案 转换之前的png先使用tinypng (https://tinypng.com) 做一次压缩，再去转换；（为了减少转换次数，因为转换网站要排队比较慢，当然这里我们也可以在 ht…
SSH使用常见问题和技巧
一、Bad owner or permissions on .ssh/config 为了在终端免密码登录服务器，一般情况会在.ssh文件夹下面创建config文件来映射一些服务器别名，方便登录；但是创建以后，使用ssh登录远程机器时报了上面的错误。 根据错误应该是权限的问题，进行下面的处理即可 sudo chmod 600 ~/.ssh/config 详细配置：https://www.ssh.co…
React高阶组件中使用ref
react中forwardRef是用来解决HOC组件使用ref的问题的，所谓HOC就是Higher Order Component，比如使用redux的时候，我们用connect来给组件绑定需要的state，这其中其实就是给我们的组件在外部包了一层组件，然后通过…props的方式把外部的props传入到实际组件。forwardRef的使用方法如下： const TargetCompon…
JS计算输入框输入的长度
需求来源 开发的时候有时候会有这样的需求： 给一个输入框，在提交的时候需要校验输入的内容的长度不能超过20，详细校验规则如下： 中文算一个字 英文字母和数字两个算一个字 因为在视觉上，英文字母和数字占用的空间比较小，所以上面的要求也是合理的。 实现方案 很明显，我们现在就不能通过字符串的length属性来判断这个值的长度，因为length属性不管是中文、英文、数字都算是一个字符； 其实实现方案也比…
H5字体加载策略优化
随着网页内容的丰富化，我们使用自定义字体来处理漂亮个性化的网页呈现，所以我们会在网页中使用自定义字体，但是也伴随着给我们带来了一些问题，那就是自定义字体比较大，尤其是中文字体，随便就是好几兆，会给用户一种网页加载很慢的感觉，所以针对上述的问题需要做一部分优化： 下面是我项目使用的一些字体的大小： 1、设置 font-display: swap 我们需要在美观和性能之间做一个取舍和平衡点，查看MDN…
H5移动端视频以及音乐播放器
一、视频播放 支持的格式：https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Video_codecs webm,mp4,3gp,quicktime,ogg 体验优化 显示封面：有些浏览器不支持poster，我们需要使用div模拟一个层遮罩上去，点击的时候隐藏； 自动播放：大多数浏览器都是将自动播放禁用的，除非你使用的静音状态； 设…