分类 默认分类 下的文章

threejs+vue3.0+typescript开发的大富翁小游戏

立了flag要在2021年开发一款3d休闲小游戏,勉强做了一个大富翁1.0,还有不少需要修改的地方,本来想修改完成后来发博客,下半年为了赚钱稍微忙了点...停了一段时间后就一直没继续了.
先发个github的地址链接,后面有时间,再发些文章记录一些开发web游戏的坑...

背包客自由行

游戏规则参考
https://j9981168.pixnet.net/blog/post/239327645

后面有时间在游戏里补上帮助(逃ε=ε=ε=┏(゜ロ゜;)┛)

在VBA变量中存储数组公式结果

之前在编写VBA程序时如果遇到需要用数组公式来计算结果的时候,我都会通过往单元格写入数组函数来得到数组函数的结果,然后获取单元格的内容将结果放到VBA变量中,这样做会导致VBA效率大大降低,一直以为没什么好办法,没想到偶然搜索找到了解决的办法:

代码如下:

Sub j2()
a = Application.Evaluate("SUM(((品名=""春羔皮"")*(规格=""1-2"")*(单价>100))*金额)")
 MsgBox a
End Sub

原文链接

UNI-APP 签名画板封装

前段时间公司有需要用户签名的功能开发,我针对签字封装了一个组件,方便使用,在安卓,ios,h5,微信小程序中测试通过,其他环境未进行测试.
github地址:https://github.com/aoobao/signature

核心组件所在文件 components/SignaturePad/SignaturePad.vue

组件中有使用到uview-ui的popup组件,使用前需要引入uview组件库

https://www.uviewui.com/

基本使用方法

可参考页面 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);
  });

效果展示

https://aoobao.github.io/signature/signature.mp4

uniapp 中引入腾讯实时音视频TRTC 步骤

最近用uniapp做了一个小程序,里面需要用到腾讯的实时音视频,腾讯有提供一个微信小程序的sdk包方便开发者引入实时音视频,但是原生微信小程序没法在uniapp中直接用,需要转,转的过程存在很多坑,腾讯的TRTC更新也非常频繁,在这里记录一下转的步骤,以便后期查阅.

文档查看以及文件下载

腾讯TRTC官方文档地址

TRTC实时音视频SDK地址

首先插件市场下载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 会显示在最上面,但是打包出来就是好的,具体原因不明,有可能是真机调试的同层渲染有问题.