李的博客网站
原生小程序xr-frame动态切换glb模型
编辑
2025-04-19
(灵机一线)前端小项目
00

最近在做一个ar小程序项目，需要调用摄像头，需要将glb模型放置到平面上，并分享出去。为了满足这个需求，接触到微信小程序新的ar-frame框架。框架地址：https://developers.weixin.qq.com/miniprogram/dev/framework/xr-frame/

开始创建一个简单的xr组件

index.wxml

wxml
<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
  <xr-scene ar-system="modes:Plane" bind:ready="handleReady" bind:tick="handleTick">
    <xr-assets bind:loaded="handleAssetsLoaded">
      <xr-asset-load type="gltf" asset-id="anchor" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/ar-plane-marker.glb" />
    </xr-assets>
    <xr-env env-data="xr-frame-team-workspace-day" />
    <xr-light type="ambient" color="1 1 1" intensity="1" />
    <xr-light type="directional" rotation="40 70 0" color="1 1 1" intensity="3" cast-shadow />
    <xr-ar-tracker mode="Plane">
      <xr-node wx:if="{{isShowAnchor}}">
        <xr-gltf model="anchor"></xr-gltf>
      </xr-node>
    </xr-ar-tracker>
    <xr-node wx:if="{{gltfLoaded}}">
      <xr-node wx:for="{{gltfIdList}}" wx:for-item="gltfItem" node-id="{{gltfItem.id}}" visible="false" wx:key="index">
        <xr-gltf model="gltf-{{gltfItem.id}}" anim-autoplay scale="{{gltfItem.scale}}" rotation="{{gltfItem.rotation}}" />
      </xr-node>
    </xr-node>
    <xr-camera clear-color="0.4 0.8 0.6 1" background="ar" is-ar-camera />
  </xr-scene>
</scroll-view>

其中主要代码为：

wxml
<xr-ar-tracker mode="Plane">
  <xr-node wx:if="{{isShowAnchor}}">
    <xr-gltf model="anchor"></xr-gltf>
  </xr-node>
</xr-ar-tracker>
<xr-node wx:if="{{gltfLoaded}}">
  <xr-node wx:for="{{gltfIdList}}" wx:for-item="gltfItem" node-id="{{gltfItem.id}}" visible="false" wx:key="index">
    <xr-gltf model="gltf-{{gltfItem.id}}" anim-autoplay scale="{{gltfItem.scale}}" rotation="{{gltfItem.rotation}}" />
  </xr-node>
</xr-node>

ts动态加载资源

ts
// gltfList的数据结构为[{name: '老虎', icon: "", material: "https://smart-patrol.oss-cn-beijing.aliyuncs.com/files/20250414/174461236814516950.glb", id: 1, scale: "1 1 1", rotation: "0 0 0" }]

async loadGLTF(gltfList: any) {
      const scene = this.scene;
      const gltfIdList: any = [];
      wx.showLoading({
        title: '模型加载中',
      })
      const gltfModel = await Promise.all(gltfList.map((gltfItem: any, index: number) => {
        gltfIdList.push(gltfItem)
        return scene.assets.loadAsset({
          type: 'gltf',
          assetId: 'gltf-' + gltfItem.id,
          src: gltfItem.material,
        })
      }))
      // console.log(gltfModel, 'glTF asset loaded')
      this.setData({
        gltfIdList: gltfIdList,
        gltfLoaded: true
      })
      wx.hideLoading()
    }
    
    // 清除资源
    releaseGLTF() {
      if (this.data.gltfIdList && this.data.gltfIdList.length > 0) {
        const scene = this.scene
        this.data.gltfIdList.map((item) => {
          // 释放加载过的资源
          scene.assets.cancelAsset('gltf', `gltf-${item.id}`);
          scene.assets.releaseAsset('gltf', `gltf-${item.id}`);
        })
        this.setData({
          gltfIdList: []
        })
      }
    }
    // 拍照分享保存
    handleShare: function () {
    // 分享时清除底部模型
      this.setData({
        isShowAnchor: false,
      })
      this.scene.share.captureToFriends().then((res: any) => {
        this.setData({
          isShowAnchor: true
        })
      });
    }

提示

动态加载glb资源需要展示的时候加载，不展示时清除资源。
模型scale属性不可设置为0 0 0 ，模型会缩放到0。
加载xr-node时要外层加入gltfLoaded控制资源加载成功后加载节点。
阅读全文
80端口浏览器访问502问题排查
编辑
2025-03-16
部署项目遇到的问题
00

近期购买域名备案后，想弄一个ssl证书，这样自己的网页就没有不安全的字样，同时项目也不会被中间人抓包。现在市面主流生成ssl证书校验方式，主要有DNS解析校验，与文件校验的方式，DNS解析校验十分缓慢，要等30来分钟才会解析，所以最佳的方案是文件校验的方式（将校验文件放到服务器指定目录通过获取文件校验），一般文件校验都需要开启80端口才能直接通过域名到达文件位置，这时就遇到问题了，部署nginx服务后，我的80端口一直处于一个502的状态。服务器的防火墙端口也一直是开启的。

注

80端口状况： nginx服务器、使用telnet命令可以通、本机可以正常访问外网报错502

  • 使用netstat命令检查所有端口
  • （关键）查看自己的docker容器内占用的端口

使用etstat命令检查80端口

shell
sudo netstat -tlnp

image.png

有80端口，再使用curl命令检查本机端口返回情况

shell
curl 0.0.0.0:80

image.png

可以看到本地可以访问该端口，但是外网显示的502

image.png

😵‍💫这是什么情况？难道是服务器商把80端口封上了，我用telnet指令去检查端口是否畅通

shell
telnet ip 80  #替换ip为服务器外网ip

image.png

😵可以看到是通的

后面突然想起来docker是独立环境，应该再检查docker占用的端口。果然

shell
docker ps

image.png 不知何时，弄得80,443端口，最后关闭指定容器80端口就正常了

shell
docker stop dde881cdf6b3  #最后为容器id，需要替换为自己的容器id

总结

部署项目一定要做好记录！！！当部署其他项目时可以有个依据。同时检查端口号时要注意docker容器占用的端口号

阅读全文
termux 安装mysql 并运行b站爬虫入库 安卓11（手机上跑定时python爬虫）
编辑
2025-03-11
python项目
00

运行环境

python3.9.6 +MariaDB（termux官方封装安装顺利）

1. 安装python

bash
#安装python3
pkg install python -y
#查看版本
python -V
#升级pip
python -m pip install --upgrade pip -i
#安装简易爬虫需要的库
pip install pymysql

2. 安装MariaDB并在里面建表

bash
#安装MariaDB
pkg install mariadb
#初始化数据库
mysql_install_db
#启动mysql服务（得到一个进程号（pid号），nohup: ignoring input and appending output to `nohup.out'提示也是正常的）
nohup mysqld &
#进入mysql(whoami为本机的登陆名)
mysql -u ${whoami}
#mysql内修改root密码，我这里习惯设置用户名密码都为root
use mysql;
set password for 'root'@'localhost' = password('root');

# 刷新权限
flush privileges;
# 创建数据库
create database bilidb;
use bilidb;
CREATE TABLE `hot` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `hotword` varchar(200) CHARACTER SET utf8 DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `hotword` (`hotword`)
) ENGINE=InnoDB AUTO_INCREMENT=67 DEFAULT CHARSET=latin1;
#退出mysql
quit;

#需要关闭mysql服务可以掉进程
kill -9 PID(这个pid号启动服务的时候回显示)

3. 运行python程序

python
#python +文件名 例子：
python bili.py
#bili.py要在当前目录下，安卓11有应用文件的限制，一加手机需要在设置的存储里找文件，在文件程序里面进行复制

我这里有个简单的爬虫

python
#python程序
#字典
import requests
import json
import pymysql.cursors


#加头标识
headers = {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36'
}

product=[]
#获取传回数据
resp=requests.get('https://s.search.bilibili.com/main/hotword?mid=&buvid=98E676EF-F586-403E-8440-52A6836FA68713451infoc&jsonp=jsonp&callback=jsonCallback_bili_58910703464582290',headers=headers)

rest=resp.text.replace('jsonCallback_bili_58910703464582290(','').replace(')','')
    #转换json键值对

json_data=json.loads(rest)

comments=json_data["list"]
#     #把想要的数据装入列表中
proDict=[]
for item in comments:
    proDict.append(item['keyword']+' ')
product.extend(proDict)

# 把数组里所有数据都转入字符串中（这里是学习用的，可以去除）
p=''.join(proDict)

print(p)


# 数据入库
# 连接数据库
conn = pymysql.connect(
          host='127.0.0.1',
          port=3306,
          user='root',
          passwd='root',
          db='bilidb',
          charset='utf8',
          cursorclass=pymysql.cursors.Cursor,
         )

cur=conn.cursor()
#这里用replace解决数据入库时重复数据的问题，注意hotword字段要设置唯一约束
for item in proDict:
        cur.execute("replace into hot(hotword) values('%s')" %(item))
#事务提交（这里尝试性的用了一个异常处理，嘿嘿可以去掉）
try:      
    conn.commit()
except AttributeError:
    print("错误")
cur.close()

保存或者直接复制运行，ok运行成功!

阅读全文
Taro小程序canvas绘制海报（并实现自定义分享5:4海报）
编辑
2025-03-11
(灵机一线)前端小项目
00

Taro小程序canvas绘制海报（并实现自定义分享5:4海报）

接到需求开发一款电子名片小程序，前期将技术栈设为了Taro + React，在开发过程中，电子名片前期由原生标签制作，但显示效果差强人意，而且分享名片时，只能通过微信官方的分享将名片网页截取一部分，会将无关内容带到分享页中。因此，我将名片改为canvas实现，分享时将canvas转为临时图片，达到小程序的4:5比例。

阅读全文
(小试牛刀)前端实现游戏开局托儿所外挂
编辑
2024-10-21
(灵机一线)前端小项目
00

最近闲的没事干，迷上了一款微信小游戏《开局托儿所》，游戏大致规则是开始会生成16✖️10的随机1到9的数字，相邻数字相加为0即可消除，在规定时间内消除数字即可得分。👌非常简单。

源码链接：https://github.com/Lsq-class/tuoersuo_game_cal

游戏截图：（注：这个游戏有时间限制，而且消除到最后会进入死局）

111.png

破解思路：

  1. 将游戏中的画面用截图软件截取图片。再通过文字识别识别出所有数字。（同时需要识别文字位置）

  2. 将数字呈现到自己的网页中。

  3. 使用暴力破解算法将相邻和为10的用属性标注出。（这里需要注意要将已经参与计算的数据在第二次计算时跳过该区域数据）—-使用到遍历子矩阵求和

  4. 将相邻和为10的数据用颜色区分出来，呈现到页面上。

  5. 循环3、4步操作，直到未标注元素内，无法凑齐和为10的数据，即停止循环。

    graph TD
截图游戏界面 --> 识别矩阵 --> 计算最小矩阵和  --> 标识符合规则矩阵

最终破解图：

阅读全文