雕木乱

uni-app如何将整个页面保存为图片，并且公众号h5中保存图片到相册

Wed, 08 Apr 2026 16:14:44 +0800

在 UniApp 中，可以通过 html2canvas 的替代方案或原生 API 实现将整个页面保存为图片。由于 UniApp 跨平台特性，不同平台（如 H5、小程序）的实现方式不同。以下是具体方法：

1. H5 平台

使用 html2canvas 库捕获 DOM 并生成图片：

// 安装 html2canvas：npm install html2canvasimport html2canvas from 'html2canvas';// 方法示例async function capturePage() {
  const element = document.getElementById('capture-area'); // 指定要截图的区域
  const canvas = await html2canvas(element, {
    useCORS: true, // 允许跨域图片
    scale: 2 // 提高清晰度
  });
  
  // 转换为图片并下载
  const imgData = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.href = imgData;
  link.download = 'page-screenshot.png';
  link.click();}

2. 微信小程序平台

使用小程序的 canvas 组件和 API：

<!-- 在模板中添加 canvas --><canvas id="myCanvas" canvas-id="myCanvas" style="width:100%;height:100vh;"></canvas>

// 在 methods 中定义方法methods: {
  savePageAsImage() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#capture-area').fields({ node: true, size: true }).exec(res => {
      const node = res[0].node;
      
      // 创建 canvas 上下文
      const ctx = uni.createCanvasContext('myCanvas', this);
      ctx.drawImage(node, 0, 0, 300, 200); // 调整尺寸
      ctx.draw(false, () => {
        // 保存到相册
        uni.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success: res => {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => uni.showToast({ title: '保存成功' })
            });
          }
        });
      });
    });
  }}

注意事项：

跨平台兼容性：需通过条件编译区分平台（#ifdef H5、#ifdef MP-WEIXIN）。
权限问题：小程序需用户授权相册权限（scope.writePhotosAlbum）。
性能优化：复杂页面可能渲染较慢，建议隐藏非必要元素。

完整示例（H5 + 微信小程序）：

export default {
  methods: {
    savePage() {
      // #ifdef H5
      this.captureH5Page();
      // #endif
      
      // #ifdef MP-WEIXIN
      this.captureMiniProgramPage();
      // #endif
    },
    
    captureH5Page() { /* H5 实现 */ },
    captureMiniProgramPage() { /* 小程序实现 */ }
  }}

通过以上方法，即可在 UniApp 中实现页面保存为图片功能。

# 技术来源

先说如何把整个页面变成图片，因为重新去做一个canvas去塞入众多内容不如直接把将整个页面保存为图片

用到技术来自文章：《uniapp如何实现将整个页面保存为图片功能》

https://bbs.itying.com/topic/690343544a7a41007019982a

原理基本也就是把整个图片放入画布转成图片

H5平台

// 安装 html2canvas：npm install html2canvasimport html2canvas from 'html2canvas';// 方法示例async function capturePage() {  const element = document.getElementById('capture-area'); // 指定要截图的区域  const canvas = await html2canvas(element, {    useCORS: true, // 允许跨域图片    scale: 2 // 提高清晰度  });
  // 转换为图片并下载  const imgData = canvas.toDataURL('image/png');  const link = document.createElement('a');  link.href = imgData;  link.download = 'page-screenshot.png';  link.click();}

微信小程序平台

<!-- 在模板中添加 canvas --><canvas id="myCanvas" canvas-id="myCanvas" style="width:100%;height:100vh;"></canvas>

// 在 methods 中定义方法methods: {  savePageAsImage() {    const query = uni.createSelectorQuery().in(this);    query.select('#capture-area').fields({ node: true, size: true }).exec(res => {      const node = res[0].node;
      // 创建 canvas 上下文      const ctx = uni.createCanvasContext('myCanvas', this);      ctx.drawImage(node, 0, 0, 300, 200); // 调整尺寸      ctx.draw(false, () => {        // 保存到相册        uni.canvasToTempFilePath({          canvasId: 'myCanvas',          success: res => {            uni.saveImageToPhotosAlbum({              filePath: res.tempFilePath,              success: () => uni.showToast({ title: '保存成功' })            });          }        });      });    });  }}

# 如何保存图片

在uni-app开发H5的环境下是无法使用uni.saveImageToPhotosAlbum；在浏览器中可以直接a标签打开图片进行下载。但是在微信开发工具和公众号H5真机测试是没办法实现的

而canvas转成的画布是Base64，也无法使用uni.previewImage预览；只能通过image标签直接显示提示用户长按保存

# 源码下载

由于代码很长，打包下载本地运行看看效果（注意需要真机才能长按保存）

https://www.123865.com/s/SmZtVv-fnegh

转：https://mp.weixin.qq.com/s/mNEuIGzcPL2n4vDQmoeSgg

抢红包系统设计

Wed, 08 Apr 2026 09:37:01 +0800

实现类似微信红包的抢红包功能，支持拼手气红包、普通红包、高并发秒杀。

系统功能

核心功能：
1. 发红包（拼手气/普通）
2. 抢红包
3. 红包详情
4. 红包记录

技术难点：
- 高并发（1万人同时抢）
- 数据一致性（不能超发）
- 金额随机算法
- 性能优化

业务规则

红包类型

1. 拼手气红包
   - 总金额固定（如100元）
   - 个数固定（如10个）
   - 每个金额随机
   - 最小0.01元

2. 普通红包
   - 总金额固定（如100元）
   - 个数固定（如10个）
   - 每个金额相等（10元）

业务约束

1. 每人只能抢一次
2. 红包24小时过期
3. 过期金额退回发送者
4. 最少2个红包
5. 单个红包最大200元

数据库设计

-- 红包表
CREATE TABLE red_packets (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    user_id BIGINT NOT NULL COMMENT '发送者',
    type TINYINT NOT NULL COMMENT '1拼手气 2普通',
    total_amount DECIMAL(10,2) NOT NULL COMMENT '总金额',
    total_count INT NOT NULL COMMENT '红包个数',
    remain_amount DECIMAL(10,2) NOT NULL COMMENT '剩余金额',
    remain_count INT NOT NULL COMMENT '剩余个数',
    status TINYINT DEFAULT 1 COMMENT '1进行中 2已抢完 3已过期',
    expired_at TIMESTAMP NOT NULL COMMENT '过期时间',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    INDEX idx_user (user_id),
    INDEX idx_status (status),
    INDEX idx_expired (expired_at)
);

-- 红包明细表
CREATE TABLE red_packet_details (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    packet_id BIGINT NOT NULL COMMENT '红包ID',
    user_id BIGINT NULL COMMENT '领取者（NULL表示未领取）',
    amount DECIMAL(10,2) NOT NULL COMMENT '金额',
    grabbed_at TIMESTAMP NULL COMMENT '领取时间',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    INDEX idx_packet (packet_id),
    INDEX idx_user (user_id)
);

-- 用户账户表
CREATE TABLE user_accounts (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    user_id BIGINT UNIQUE NOT NULL,
    balance DECIMAL(10,2) DEFAULT 0 COMMENT '余额',
    version INT DEFAULT 0 COMMENT '乐观锁版本号',
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- 账户流水表
CREATE TABLE account_logs (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    user_id BIGINT NOT NULL,
    type TINYINT NOT NULL COMMENT '1发红包 2抢红包 3退款',
    amount DECIMAL(10,2) NOT NULL,
    balance DECIMAL(10,2) NOT NULL COMMENT '操作后余额',
    packet_id BIGINT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    INDEX idx_user (user_id)
);

表设计要点：

red_packets：红包主表，记录总金额和剩余金额
red_packet_details：红包明细，预先生成所有红包
user_accounts.version：乐观锁，防止并发扣款问题

第一步：发红包

1.1 红包金额算法

<?php

namespace App\Services;

class RedPacketService
{
    /**
     * 拼手气红包算法（二倍均值法）
     * 
     * 原理：
     * 每次抢到的金额 = 随机(0.01, 剩余平均值 * 2)
     * 
     * 例如：100元10个红包
     * 第1个：随机(0.01, 20)，假设抢到15元
     * 第2个：随机(0.01, (100-15)/9*2 = 18.89)
     * ...
     * 最后1个：剩余所有金额
     */
    public function generateLuckyAmounts(float $totalAmount, int $count): array
    {
        $amounts = [];
        $remainAmount = $totalAmount;
        $remainCount = $count;
        
        for ($i = 0; $i < $count - 1; $i++) {
            // 计算当前可抢的最大金额（剩余平均值的2倍）
            $avg = $remainAmount / $remainCount;
            $max = $avg * 2;
            
            // 随机金额（保留2位小数）
            $amount = mt_rand(1, $max * 100) / 100;
            $amount = max(0.01, $amount);  // 最少0.01元
            
            $amounts[] = $amount;
            $remainAmount -= $amount;
            $remainCount--;
        }
        
        // 最后一个红包是剩余所有金额
        $amounts[] = round($remainAmount, 2);
        
        return $amounts;
    }
    
    /**
     * 普通红包算法
     */
    public function generateNormalAmounts(float $totalAmount, int $count): array
    {
        $amount = round($totalAmount / $count, 2);
        
        // 处理除不尽的情况
        $amounts = array_fill(0, $count, $amount);
        $diff = $totalAmount - ($amount * $count);
        
        if ($diff > 0) {
            $amounts[0] += $diff;  // 第一个红包补上差额
        }
        
        return $amounts;
    }
}

算法说明：

二倍均值法保证了金额的随机性和公平性
最后一个红包拿剩余所有金额，避免精度问题
普通红包平均分配，第一个补差额

1.2 发红包接口

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class RedPacketController extends Controller
{
    private RedPacketService $service;
    
    public function __construct(RedPacketService $service)
    {
        $this->service = $service;
    }
    
    /**
     * 发红包
     */
    public function send(Request $request)
    {
        // 1. 验证参数
        $request->validate([
            'type' => 'required|in:1,2',  // 1拼手气 2普通
            'total_amount' => 'required|numeric|min:0.02|max:200',
            'total_count' => 'required|integer|min:2|max:100',
        ]);
        
        $userId = auth()->id();
        $type = $request->input('type');
        $totalAmount = $request->input('total_amount');
        $totalCount = $request->input('total_count');
        
        // 2. 检查余额
        $account = DB::table('user_accounts')->where('user_id', $userId)->first();
        if ($account->balance < $totalAmount) {
            return response()->json(['error' => '余额不足'], 400);
        }
        
        DB::beginTransaction();
        try {
            // 3. 扣除余额（乐观锁）
            $affected = DB::table('user_accounts')
                ->where('user_id', $userId)
                ->where('version', $account->version)
                ->where('balance', '>=', $totalAmount)
                ->update([
                    'balance' => DB::raw("balance - {$totalAmount}"),
                    'version' => DB::raw('version + 1'),
                ]);
            
            if ($affected === 0) {
                throw new \Exception('余额不足或并发冲突');
            }
            
            // 4. 创建红包
            $packetId = DB::table('red_packets')->insertGetId([
                'user_id' => $userId,
                'type' => $type,
                'total_amount' => $totalAmount,
                'total_count' => $totalCount,
                'remain_amount' => $totalAmount,
                'remain_count' => $totalCount,
                'status' => 1,
                'expired_at' => now()->addHours(24),
                'created_at' => now(),
            ]);
            
            // 5. 生成红包明细
            $amounts = $type == 1 
                ? $this->service->generateLuckyAmounts($totalAmount, $totalCount)
                : $this->service->generateNormalAmounts($totalAmount, $totalCount);
            
            $details = [];
            foreach ($amounts as $amount) {
                $details[] = [
                    'packet_id' => $packetId,
                    'amount' => $amount,
                    'created_at' => now(),
                ];
            }
            DB::table('red_packet_details')->insert($details);
            
            // 6. 记录流水
            DB::table('account_logs')->insert([
                'user_id' => $userId,
                'type' => 1,  // 发红包
                'amount' => -$totalAmount,
                'balance' => $account->balance - $totalAmount,
                'packet_id' => $packetId,
                'created_at' => now(),
            ]);
            
            DB::commit();
            
            return response()->json([
                'packet_id' => $packetId,
                'message' => '发送成功',
            ]);
            
        } catch (\Exception $e) {
            DB::rollBack();
            return response()->json(['error' => $e->getMessage()], 500);
        }
    }
}

新手易错点：

❌ 忘记使用事务，导致数据不一致
❌ 不使用乐观锁，并发扣款会出问题
❌ 金额计算精度问题（使用 DECIMAL 而不是 FLOAT）

第二步：抢红包（方案对比）

2.1 方案一：MySQL 悲观锁（不推荐）

<?php

/**
 * 使用 FOR UPDATE 锁定红包
 * 
 * 缺点：
 * - 性能差（串行执行）
 * - 锁等待时间长
 * - 不适合高并发
 */
public function grabV1(int $packetId, int $userId)
{
    DB::beginTransaction();
    try {
        // 1. 锁定红包（悲观锁）
        $packet = DB::table('red_packets')
            ->where('id', $packetId)
            ->where('status', 1)
            ->lockForUpdate()  // 加锁
            ->first();
        
        if (!$packet || $packet->remain_count <= 0) {
            throw new \Exception('红包已抢完');
        }
        
        // 2. 检查是否已抢过
        $exists = DB::table('red_packet_details')
            ->where('packet_id', $packetId)
            ->where('user_id', $userId)
            ->exists();
        
        if ($exists) {
            throw new \Exception('已经抢过了');
        }
        
        // 3. 随机获取一个未领取的红包
        $detail = DB::table('red_packet_details')
            ->where('packet_id', $packetId)
            ->whereNull('user_id')
            ->lockForUpdate()
            ->first();
        
        // 4. 领取红包
        DB::table('red_packet_details')
            ->where('id', $detail->id)
            ->update([
                'user_id' => $userId,
                'grabbed_at' => now(),
            ]);
        
        // 5. 更新红包剩余
        DB::table('red_packets')
            ->where('id', $packetId)
            ->update([
                'remain_amount' => DB::raw("remain_amount - {$detail->amount}"),
                'remain_count' => DB::raw('remain_count - 1'),
                'status' => DB::raw('IF(remain_count - 1 = 0, 2, status)'),
            ]);
        
        // 6. 增加用户余额
        DB::table('user_accounts')
            ->where('user_id', $userId)
            ->update([
                'balance' => DB::raw("balance + {$detail->amount}"),
            ]);
        
        DB::commit();
        
        return $detail->amount;
        
    } catch (\Exception $e) {
        DB::rollBack();
        throw $e;
    }
}

性能测试：

1000人抢10个红包
耗时：约 5-10 秒
TPS：约 100-200

2.2 方案二：Redis + Lua（推荐）

<?php

/**
 * 使用 Redis 原子操作
 * 
 * 优点：
 * - 性能高（内存操作）
 * - 原子性（Lua 脚本）
 * - 适合高并发
 */
public function grabV2(int $packetId, int $userId)
{
    // 1. 检查是否已抢过（Redis Set）
    $key = "red_packet:grabbed:{$packetId}";
    if (Redis::sismember($key, $userId)) {
        throw new \Exception('已经抢过了');
    }
    
    // 2. 使用 Lua 脚本原子操作
    $lua = <<<LUA
-- 检查红包是否存在
local packet_key = KEYS[1]
local detail_key = KEYS[2]
local grabbed_key = KEYS[3]
local user_id = ARGV[1]

-- 检查是否已抢过
if redis.call('SISMEMBER', grabbed_key, user_id) == 1 then
    return {err = 'already_grabbed'}
end

-- 弹出一个红包
local detail = redis.call('LPOP', detail_key)
if not detail then
    return {err = 'empty'}
end

-- 标记已抢
redis.call('SADD', grabbed_key, user_id)

-- 减少剩余数量
redis.call('HINCRBY', packet_key, 'remain_count', -1)

return detail
LUA;
    
    $packetKey = "red_packet:{$packetId}";
    $detailKey = "red_packet:details:{$packetId}";
    $grabbedKey = "red_packet:grabbed:{$packetId}";
    
    $result = Redis::eval($lua, 3, $packetKey, $detailKey, $grabbedKey, $userId);
    
    if (isset($result['err'])) {
        throw new \Exception($result['err'] == 'empty' ? '红包已抢完' : '已经抢过了');
    }
    
    $detail = json_decode($result, true);
    
    // 3. 异步写入数据库
    dispatch(new UpdateRedPacketJob($packetId, $userId, $detail['id'], $detail['amount']));
    
    return $detail['amount'];
}

/**
 * 初始化 Redis 数据
 */
public function initRedis(int $packetId)
{
    $packet = DB::table('red_packets')->find($packetId);
    $details = DB::table('red_packet_details')
        ->where('packet_id', $packetId)
        ->get();
    
    // 红包信息
    Redis::hmset("red_packet:{$packetId}", [
        'total_amount' => $packet->total_amount,
        'remain_count' => $packet->total_count,
    ]);
    
    // 红包明细（List）
    foreach ($details as $detail) {
        Redis::rpush("red_packet:details:{$packetId}", json_encode([
            'id' => $detail->id,
            'amount' => $detail->amount,
        ]));
    }
    
    // 设置过期时间（24小时）
    Redis::expire("red_packet:{$packetId}", 86400);
    Redis::expire("red_packet:details:{$packetId}", 86400);
}

性能测试：

1000人抢10个红包
耗时：约 0.1-0.5 秒
TPS：约 2000-10000

方案对比：

方案	优点	缺点	适用场景
MySQL 悲观锁	实现简单，数据一致性强	性能差，不适合高并发	小规模（<100人）
Redis + Lua	性能高，适合高并发	实现复杂，需要数据同步	大规模（>1000人）

第三步：异步写入数据库

<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Support\Facades\DB;

class UpdateRedPacketJob implements ShouldQueue
{
    use Queueable;
    
    private int $packetId;
    private int $userId;
    private int $detailId;
    private float $amount;
    
    public function __construct(int $packetId, int $userId, int $detailId, float $amount)
    {
        $this->packetId = $packetId;
        $this->userId = $userId;
        $this->detailId = $detailId;
        $this->amount = $amount;
    }
    
    public function handle()
    {
        DB::beginTransaction();
        try {
            // 1. 更新红包明细
            DB::table('red_packet_details')
                ->where('id', $this->detailId)
                ->update([
                    'user_id' => $this->userId,
                    'grabbed_at' => now(),
                ]);
            
            // 2. 更新红包剩余
            DB::table('red_packets')
                ->where('id', $this->packetId)
                ->update([
                    'remain_amount' => DB::raw("remain_amount - {$this->amount}"),
                    'remain_count' => DB::raw('remain_count - 1'),
                ]);
            
            // 3. 增加用户余额
            DB::table('user_accounts')
                ->where('user_id', $this->userId)
                ->update([
                    'balance' => DB::raw("balance + {$this->amount}"),
                    'version' => DB::raw('version + 1'),
                ]);
            
            // 4. 记录流水
            DB::table('account_logs')->insert([
                'user_id' => $this->userId,
                'type' => 2,  // 抢红包
                'amount' => $this->amount,
                'balance' => DB::table('user_accounts')->where('user_id', $this->userId)->value('balance'),
                'packet_id' => $this->packetId,
                'created_at' => now(),
            ]);
            
            DB::commit();
            
        } catch (\Exception $e) {
            DB::rollBack();
            \Log::error('UpdateRedPacketJob failed', [
                'packet_id' => $this->packetId,
                'user_id' => $this->userId,
                'error' => $e->getMessage(),
            ]);
        }
    }
}

第四步：红包详情

<?php

/**
 * 红包详情
 */
public function detail(int $packetId)
{
    // 1. 红包信息
    $packet = DB::table('red_packets')->find($packetId);
    
    // 2. 领取记录
    $records = DB::table('red_packet_details as d')
        ->leftJoin('users as u', 'd.user_id', '=', 'u.id')
        ->where('d.packet_id', $packetId)
        ->whereNotNull('d.user_id')
        ->select('u.nickname', 'd.amount', 'd.grabbed_at')
        ->orderBy('d.grabbed_at')
        ->get();
    
    // 3. 标记最佳手气
    if ($records->isNotEmpty()) {
        $maxAmount = $records->max('amount');
        foreach ($records as $record) {
            $record->is_best = ($record->amount == $maxAmount);
        }
    }
    
    return response()->json([
        'packet' => $packet,
        'records' => $records,
    ]);
}

第五步：定时任务（退款）

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\DB;

class RefundExpiredRedPackets extends Command
{
    protected $signature = 'redpacket:refund';
    protected $description = '退款过期红包';
    
    public function handle()
    {
        // 查找过期且未抢完的红包
        $packets = DB::table('red_packets')
            ->where('status', 1)
            ->where('expired_at', '<', now())
            ->where('remain_count', '>', 0)
            ->get();
        
        foreach ($packets as $packet) {
            DB::beginTransaction();
            try {
                // 1. 更新红包状态
                DB::table('red_packets')
                    ->where('id', $packet->id)
                    ->update(['status' => 3]);  // 已过期
                
                // 2. 退款给发送者
                if ($packet->remain_amount > 0) {
                    DB::table('user_accounts')
                        ->where('user_id', $packet->user_id)
                        ->update([
                            'balance' => DB::raw("balance + {$packet->remain_amount}"),
                        ]);
                    
                    // 3. 记录流水
                    DB::table('account_logs')->insert([
                        'user_id' => $packet->user_id,
                        'type' => 3,  // 退款
                        'amount' => $packet->remain_amount,
                        'balance' => DB::table('user_accounts')->where('user_id', $packet->user_id)->value('balance'),
                        'packet_id' => $packet->id,
                        'created_at' => now(),
                    ]);
                }
                
                DB::commit();
                $this->info("红包 {$packet->id} 退款成功");
                
            } catch (\Exception $e) {
                DB::rollBack();
                $this->error("红包 {$packet->id} 退款失败: " . $e->getMessage());
            }
        }
    }
}

定时任务配置：

// app/Console/Kernel.php

protected function schedule(Schedule $schedule)
{
    // 每小时执行一次
    $schedule->command('redpacket:refund')->hourly();
}

压力测试

使用 Apache Bench

# 1000个并发请求
ab -n 1000 -c 100 -p grab.json -T application/json \
   http://localhost/api/red-packet/grab

# grab.json 内容
{
    "packet_id": 123,
    "user_id": 456
}

使用 JMeter

1. 创建线程组
   - 线程数：1000
   - Ramp-Up：10秒
   
2. 添加 HTTP 请求
   - 方法：POST
   - 路径：/api/red-packet/grab
   - Body：{"packet_id": 123}
   
3. 添加监听器
   - 聚合报告
   - 查看结果树

性能优化

1. Redis 预加载
   - 发红包时立即写入 Redis
   - 避免首次抢红包时加载
   
2. 限流
   - 单用户每秒最多抢3次
   - 防止恶意刷接口
   
3. 降级
   - Redis 故障时降级到 MySQL
   - 保证可用性
   
4. 监控
   - 抢红包成功率
   - 接口响应时间
   - Redis 命中率

总结

抢红包核心：
1. 金额算法：二倍均值法
2. 并发控制：Redis + Lua
3. 数据一致性：异步写入 + 补偿
4. 性能优化：内存操作 + 队列

技术栈：
- Redis（高并发）
- Lua（原子操作）
- MySQL（持久化）
- Queue（异步处理）

性能指标：
- TPS：10000+
- 响应时间：< 100ms
- 成功率：99.9%

抢红包是高并发场景的经典案例！

转：码上微光

thinkphp6.1中分页类调用

Fri, 09 Jan 2026 15:52:29 +0800

$list = YourModel->paginate([
    'list_rows' => 15
    'simple'    => false,            
    'type'      => 'page\Bootstrap',
    'var_page'  => 'page',
    'query'     => $this->request->get()
]);

使用了分页类是extend中的page文件夹下面的Bootstrap.php。并且在provide.php中配置了'think\Paginator' => \page\Bootstrap::class

和TP5有区别了：

$list = YourModel->paginate($page, $countNum, [
    'type'     => 'page\Bootstrap',
    'var_page' => 'page',
    'simple'=>true,
    'query'    => $this->request->get()
]);

phpstudy提示错误：cURL error 60 配置SSL CA证书

Fri, 05 Dec 2025 15:20:28 +0800

phpstudy配置SSL CA证书

本地Windows环境， phpstudy 集成 php7 后，出现错误提示：
cURL error 60: SSL certificate problem: unable to get local issuer certificate
查询问题：SSL CA证书配置缺失导致。

1、从CURL 官网下载CA 证书（cacert.pem）

可选择下载：https://curl.haxx.se/docs/caextract.html

或直接下载：https://curl.haxx.se/ca/cacert.pem

2、找到 phpstudy 安装路径，对应php版本包

例安装路径下 php包：D:\phpstudy_pro\Extensions\php\php7.3.4nts

将下载的cacert.pem文件，放入 \extras\ssl\ 文件夹下

3、修改配置 php.ini 文件

启用openssl, curl扩展

extension=curl
extension=openssl

然后修改两处CA 证书存放位置

curl.cainfo = "D:\phpstudy_pro\Extensions\php\php7.3.4nts\extras\ssl\cacert.pem"
openssl.cafile="D:\phpstudy_pro\Extensions\php\php7.3.4nts\extras\ssl\cacert.pem"

在thinkphp6中使用依赖注入或容器来创建对象

Thu, 05 Jun 2025 11:12:44 +0800

很多时候，在自己的控制器中需要调用另一个控制器中的方法，但是没有直接的继承关系，比如两个控制器同时继承了一个common类。如果我们直接new一个控制器中的类，就会提示

Too few arguments to function app\common\controller\WechatApi::__construct(), 0 passed

当前在 Login 控制器中的方法里这样使用了 WechatApi：

$wxapi = new WechatApi();
$wxapi->WechatOAuth('snsapi_base');

但WechatApi 类定义如下：

class WechatApi extends Hub{    
public function __construct(App $app)    {        
    parent::__construct($app);    
}    
public function WechatOAuth()    {        // ...    }
}

这里 new WechatApi() 没有传入 $app 参数，所以会报错，或者是Hub中有构造函数被继承了。

在 ThinkPHP 6.1 中，建议使用依赖注入或容器来创建对象，而不是手动 new。你可以使用框架提供的容器来自动解析 WechatApi，前提是它的依赖能被容器解析。

public function checkWechatLogin(){    
    // 使用容器创建 WechatApi 实例，自动注入 App    
    $wxapi = Container::getInstance()->make(WechatApi::class);        
    $wxapi->WechatOAuth('snsapi_base');
}

或者更简洁一点（适用于控制器方法）：

public function checkWechatLogin(WechatApi $wxapi){    
    $wxapi->WechatOAuth('snsapi_base');
}

这种方式是依赖注入，由框架自动帮你实例化并传入 App。

天地图用服务端去调用接口提示403错误，解决办法

Sun, 27 Apr 2025 15:12:31 +0800

天地图用服务端去调用接口提示403错误，这里很有可能就是跨域问题。

可以使用天地图官方的处理跨域的地址去处理：https://api.tianditu.gov.cn/apiserver/ajaxproxy?proxyReqUrl=https://api.tianditu.gov.cn/v2/search?postStr=学校&type=query&tk=秘钥" 。

如果你直接去访问：https://api.tianditu.gov.cn/v2/search?postStr=学校&type=query&tk=秘钥就会提示403错误。

这里的是调用了天地图的搜索接口。

在使用do.js进行js管理时遇到的问题

Wed, 09 Apr 2025 16:29:18 +0800

Do.js 是一个轻量级的 JavaScript 模块加载器和 DOM 就绪事件处理器，它主要用于管理 JavaScript 和 CSS 文件的异步加载、处理模块依赖关系以及执行 DOM 就绪后的回调函数。

比如我有a.js,在页面中包含a.js时想一起加载其他的js文件，在其他文件加载完后处理js事件。这样就可以用到这个轻量级的模块加载工具do.js。

首先这个do.js是基于jquery实现的，所以在使用的时候必须要有jquery在do.js文件中需要配置jquery的地址：

如果你的页面中已经存在了jquery，那么在do.js的文件中核心库这里配置一个空的js文件，如果你不配置则会报错。

然后再html中加入

<script src="__PUBLIC__/js/do.js"></script>

在引入

<script src="__PUBLIC__/js/a.js"></script>

在a.js文件中就可以引入其他的js文件，并且可以有依赖关系：

比如这里我引入了两个js，一个是gcoord.global.prod.js 和一个天地图的js文件，可以支持远程地址。

然后使用：

这类的gcoordJs表示将gcoord.global.prod.js命名成gcoordJs模块了。这里表示当两个模块加载成功后，在里面可以执行自己想要的操作，这里比如可以进行天地图的一些接口调用。

在使用这个js的时候遇到一个bug，必须重点说明一下：

没有依赖其他的模块，那么里面的requires:[]这个必须去掉，不然无法加载成功，类似下面的情况：

如果两个js存在依赖关系：

这里表示gcoordJs需要依赖tiandituJS。就是加载gcoordJs的时候会同时加载tiandituJS。

特别注意：在add一个文件后，必须要使用Do('')方法去实现，不然没有效果。

比如我现在要实现预加载css文件：

Do.add('tdt-css', {path: '__PUBLIC__/css/tdtcss.css', type: 'css'});

如果单纯只这样添加一下，页面加载时不会去预加载这个css文件的，必须执行一下：

Do('tdt-css', () => {

}）

composer使用phpstudy的php环境，如果改变php版本如何处理

Tue, 11 Mar 2025 09:33:00 +0800

首先安装composer后，先在系统的环境变量中添加php路径，比如之前的路径：C:\zhangsan\work\phpstudy_pro\Extensions\php\php7.3.4nts ，现在要改成：C:\zhangsan\work\phpstudy_pro\Extensions\php\php8.0.2.4nts，这样php版本就变成了8.0的了。但是这个时候你去执行composer命令会提示 'composer' 不是内部或外部命令。

这里我们需要将composer两个文件拷贝到：C:\zhangsan\work\phpstudy_pro\Extensions\php\php8.0.2文件夹下面去，分别是composer.bat，composer.phar。然后去执行就正常了。

ThinkPHP5.1关于条件为[NOT]NULL的写法

Thu, 12 Dec 2024 16:46:31 +0800

wangEditor5 在vue3中图片莫名无法显示，丢失的情况

Fri, 25 Oct 2024 14:38:25 +0800

问题出现在使用了其他编辑器保存到数据库的数据，或者是采集来的数据在wangEditor中再编辑

经过多次测试，发现wangEditor5在vue3下面如果去加载的文章是之前用其他编辑器保存的文章，其他编辑器保存在数据库中的数据，比如使用了<div><img src="abc.jpg"/><div>

载入wangEditor中会自动过滤掉img导致图片无法展示。但是img标签如果在p标签里面不受影响，在其他标签下面可能被过滤。反应给了官方，官方表示不在去处理这个问题了。暂时没有解决方案。

问题的具体描述和体现，可以去wang的官方GitHub提问中查看，我也在那边反馈了此问题：https://github.com/wangeditor-team/wangEditor/issues/5880