基于threejs开发的跑酷小游戏
最近忙里偷闲,基于threejs开发了一个跑酷小游戏,不过做的非常简陋,算是完成了最基础的游戏开发流程.
github地址:
https://github.com/aoobao/runner
后面打算做一个大富翁游戏,会好好的做,在这里立个flag
feng 发布的文章
在VBA变量中存储数组公式结果
之前在编写VBA程序时如果遇到需要用数组公式来计算结果的时候,我都会通过往单元格写入数组函数来得到数组函数的结果,然后获取单元格的内容将结果放到VBA变量中,这样做会导致VBA效率大大降低,一直以为没什么好办法,没想到偶然搜索找到了解决的办法:
代码如下:
Sub j2()
a = Application.Evaluate("SUM(((品名=""春羔皮"")*(规格=""１－２"")*(单价>100))*金额)")
MsgBox a
End Sub原文链接
CSS 毛玻璃特效开发
之前在我的博客中有写磨砂玻璃的效果开发,但是会存在很多的局限.
附上链接: 磨砂波理效果开发
最近发现css又多了个backdrop-filter的属性,能够非常简单的实现毛玻璃的效果.
真的是太感动了
附上效果图:
附上官方文档说明:
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#result
附上浏览器当前支持程度:
顺便附上效果图参考代码(官方文档的示例代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
font-family: sans-serif;
text-align: center;
line-height: 1;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
max-width: 50%;
max-height: 50%;
padding: 20px 40px;
}
html,
body {
height: 100%;
width: 100%;
}
body {
background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<p>backdrop-filter: blur(10px)</p>
</div>
</div>
</body>
</html>UNI-APP 签名画板封装
前段时间公司有需要用户签名的功能开发,我针对签字封装了一个组件,方便使用,在安卓,ios,h5,微信小程序中测试通过,其他环境未进行测试.
github地址:https://github.com/aoobao/signature
核心组件所在文件 components/SignaturePad/SignaturePad.vue
组件中有使用到uview-ui的popup组件,使用前需要引入uview组件库
基本使用方法
可参考页面 pages/index/index
将组件引入到template中
<template>
<view>
....
<signature-pad ref="signature"></signature-pad>
</view>
</template>
js代码调用
this.$refs.signature
.sign({
width: '700rpx', // 画板宽度
height: '500rpx', // 画板高度
color: '#000' // 画笔宽高
})
.then(path => {
console.log(path); // 图片输出路径(h5页面为base64)
})
.catch(e => {
console.log('取消签名', e);
});
效果展示
uniapp 中引入腾讯实时音视频TRTC 步骤
最近用uniapp做了一个小程序,里面需要用到腾讯的实时音视频,腾讯有提供一个微信小程序的sdk包方便开发者引入实时音视频,但是原生微信小程序没法在uniapp中直接用,需要转,转的过程存在很多坑,腾讯的TRTC更新也非常频繁,在这里记录一下转的步骤,以便后期查阅.
文档查看以及文件下载
首先插件市场下载miniprogram-to-uniapp插件 点击右边的使用HBuilderX 导入插件
https://ext.dcloud.net.cn/plugin?id=2656
准备工作
将TRTC微信小程序SDK下载到本地解压后,找到文件夹TRTCSimpleDemo,根据官方的引导,在debug中填好SDKAPPID和EXPIRETIME,在微信开发者工具中打开发布,确保功能是没有问题的,然后在hbuilderX里面导入这个目录
使用插件将小程序转成uniapp项目
按照miniprogram-to-uniapp插件的介绍,在目录上右键选择miniprogram-to-uniapp,稍等几分钟后,会在hbuilderX生成一个新的目录文件TRTCSimpleDemo_uni
删除components
删除目录components,static/components
引入components
新建目录wxcomponents,在TRTCSimpleDemo的components目录下将整个trtc-room目录复制进来
对文件内容进行调整
打开pages.json 找到代码段
...
{
"path": "pages/room/room",
"style": {
...
}
},
...改成
{
"path": "pages/room/room",
"style": {
...
"usingComponents": {
"trtc-room": "/wxcomponents/trtc-room/trtc-room"
}
}
},
打开文件/pages/room/room.vue,找到代码段
...
import trtcRoom from "../../components/trtc-room/trtc-room";
...
components: {
trtcRoom
},
...
将上面这几句代码删除
修改图片引用路径 pages目录下的几个vue里引用的图片路径错误,真实图片都在static/images下,代码里写的是../../images/ 根据需要一一修改(把images 改成 static/images 或者全部改成绝对路径 /static/images/..)
全局搜索uni.getSetting() 全部改成 wx.getSetting()
到这里差不多就可以跑起来了,注意详情本地设置里 ES6转ES5 需要打勾 在uniapp 点击菜单发行->小程序-微信 ,然后在微信开发者工具里上传,就可以真机测试了. 需要注意的是如果不上传,直接真机调试,live-pusher 会显示在最上面,但是打包出来就是好的,具体原因不明,有可能是真机调试的同层渲染有问题.