- 在我自己开发的web网站,增加【分享链接】按钮,可以分享小程序的链接吗?
在自研的WEB网站, 1、增加按钮:【分享小程序】,点击将小程序链接复制下来 2、将链接分享到微信,其他人打开这个链接后,可以直接进入小程序,且能直接进入到 要分享的这个页面吗?
02-25 - 支付的时候提示:由于小程序违规,支付功能暂时无法使用。查看风险是交易停滞,解除限制还是不行?麻烦解答
支付的时候提示:由于小程序违规,支付功能暂时无法使用。 查看风险是交易停滞,解除限制还是不行? 麻烦解答
02-25 - 本地支付没用问题,但是现在真机支付,出现支付失败,这是什么情况?
{"errno":102,"errMsg":"requestPayment:fail :access denied,appld=wxde5571a4ce5a7622"[图片][图片]
02-25 - 3行代码搞定微信小程序接入DeepSeek满血版!
前言 由于最近 DeepSeek 火爆出圈,我相信大多数的微信小程序开发者开工第一个任务就是接入DeepSeek能力到自家的小程序产品中,接下来我分享下微信小程序快速接入DeepSeek的方法! 步骤 首先打开「微信开发者工具」进入左上角的「云开发」开通环境 [图片] 开通成功后可以云开发的控制台页面获取环境ID [图片] 第一步:初始化,建议放在app.js里面 [图片] [代码]// 微信小程序基础库从 3.7.1 版本开始内置了云开发 AI+ 能力,开发者可以直接通过小程序中的 wx.cloud.extend.AI 调用。 在使用基础库 AI+ 能力前,需要传入云开发环境进行初始化。 wx.cloud.init({ env: "环境ID" }); [代码] 第二步:在需要使用的页面添加调用DeepSeek代码 [代码]// 创建模型 const model = wx.cloud.extend.AI.createModel("deepseek"); const res = await model.generateText({ model: "deepseek-r1", messages: [{ role: "user", content: "9.9和9.11谁更大?" }], }); console.log(res); [代码] 请求返回,可以看到输出了的message中有思维链内容和结果内容 [图片] 以上这种方式是直接获取结果方式,如果做实时打印的效果,可以用流式使生成文本 [代码]// 创建模型 const model = wx.cloud.extend.AI.createModel("deepseek"); const res = await model.streamText({ data: { model: "deepseek-r1", messages: [ { role: "user", content: "9.9和9.11谁更大?" } ] } }); // 当使用 deepseek-r1 时,模型会生成思维链内容 for await (let event of res.eventStream) { if (event.data === '[DONE]') { continue; } const data = JSON.parse(event.data); // 打印思维链内容 const think = (data?.choices?.[0]?.delta)?.reasoning_content; if (think) { console.log(think); } // 打印生成文本内容 const text = data?.choices?.[0]?.delta?.content; if (text) { console.log(text); } } [代码] 到这里微信小程序加入DeepSeek满血版能力就搞定了! 编排AI智能体(Agent) 在实际业务中不仅仅是接入还需要用到给DeepSeek结合业务封装一个AI智能体,其中包含人设与回复约束以及相关专业知识库。这个时候首先进入云开发后台进行AI智能体的编排。 云开发地址:https://tcb.cloud.tencent.com/dev 进入云开发后后台找到【AI+】模块,然后可以新增Agent设置DeepSeek-671B模型,设置人设与回复逻辑和知识库,详细可见《如何快速开发一款AI小程序?》,这篇文章详细介绍了AI智能体的创建与知识库的设置。 [图片] 当我们编排好了Agent,在前端业务代码中如何调用呢? 以我创建好的【小红书爆款文案】智能体为例,可以在右边【接入引导】区域选中【SDK】 [图片] 这里面提供了详细的接入代码,直接复制使用即可,包含了以下功能下面所有功能都需要智能体ID,获取智能体ID方式如下: [图片] 发送消息 [代码]const res = await wx.cloud.extend.AI.bot.sendMessage({ data: { botId: '智能体ID', msg: "你是谁" } }) for await (let x of res.textStream) { console.log(x) } [代码] 获取 Agent 信息 [代码]const res = await wx.cloud.extend.AI.bot.get({ botId: "智能体ID" }); console.log(res); [代码] 查看与 Agent 的聊天记录 [代码]const res = await wx.cloud.extend.AI.bot.getChatRecords({ botId: "智能体ID", pageNumber: 1, pageSize: 10, sort: "asc", }); console.log(res); [代码] 对某一条聊天记录进行反馈 [代码]const res = await wx.cloud.extend.AI.bot.sendFeedback({ userFeedback: { botId: "智能体ID", recordId: "recordId-xxx", comment: "非常棒", rating: 5, tags: ["优美"], aiAnswer: "落英缤纷", input: "来个成语", type: "upvote", }, }); console.log(res); [代码] 查看反馈记录 [代码]const res = await wx.cloud.extend.AI.bot.getFeedBack({ botId: "智能体ID", from: 0, to: 0, maxRating: 4, minRating: 3, pageNumber: 1, pageSize: 10, sender: "user-a", senderFilter: "include", type: "upvote", }); console.log(res) [代码] 获取 Agent 推荐问题 [代码]const res = await wx.cloud.extend.AI.bot.getRecommendQuestions({ data: { botId: "智能体ID", msg: "你是谁" } }) for await (let x of res.textStream) { console.log(x) } [代码] 一键生成AI对话组件 除此之外如果还需要对话界面,可以进入「可视化开发」模块 [图片] 选择「从空白创建」应用,进入应用编辑台找到最右边的「区块」搜索「Agent」选中「Anget-UI」 [图片] 然后在配置里面输入智能体ID即可 [图片] 确认没有问题后,可以右上角「发布」选中「导出代码包」根据「使用指引」接入到自家微信小程序产品中 [图片] 前端AI智能体对话界面代码直接拿来就用! 除此之外也可以在微信开发者工具中新建小程序模板,选择 Agent UI 源码模板 [图片] 最后 这样一来从接入DeepSeek能力到根据业务定制化DeepSeek智能体再到AI对话界面统统搞定了!下班! 相关推荐 DeepSeek应用场景深度分析
02-19 - 微信小程序的 5 种分享方式,你知道几种?
前言在微信生态中,微信小程序的裂变传播效果尤为显著,而实现裂变的关键在于分享方式,需要在不同的场景选择合适的分享方式。微信小程序内提供很多分享方式,我将为大家详细介绍微信小程序的 5 种分享方式。 方法转发卡片场景:私聊/微信群 操作:点击卡片可以直达具体页面 好处:最常用的方式,简单,直接 [图片] 触发形式: 用户主动通过分享按钮触发用户通过点击小程序右上角菜单的「转发给朋友」触发[图片] [图片] 技术实现: 在页面加入 button 组件设置 open-type 属性为 share自定义分享卡片内容需要重写Page的onShareAppMessage 方法[图片] 相关文档: https://developers.weixin.qq.com/miniprogram/dev/component/button.htmlhttps://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object转发朋友圈场景:朋友圈分享 操作:需要用户点击然后再点击下方「前往小程序」才能达到目标页 好处:朋友圈展示形式较友好,类似公众号文章分享,具备更高的打开率 触发:用户通过点击小程序右上角菜单的「转发到朋友圈」触发 [图片] [图片] [图片] [图片] 技术实现: 自定义分享卡片内容需要重写Page的onShareTimeline方法[图片] 相关文档: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline小程序码场景:私聊/微信群/朋友圈/线下操作:长按/扫码即可达到目标页好处:适用性非常广泛,覆盖了线下场景[图片] 技术实现: 生成小程序二维码API[图片] 相关文档: https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getQRCode.html 生成链接场景:私聊/微信群/朋友圈/外部浏览器操作:需要两步到达目标页,打开链接再打开小程序好处:外部浏览器支持打开会自动拉起微信进入小程序触发:通过 API 生成获取[图片] [图片] 技术实现: 生成小程序链接 API [图片] 相关文档: https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/short-link/generateShortLink.html 生成短链场景:私聊/微信群/朋友圈好处:微信内一步可打开目标页[图片] 注意:目前只开放给电商类目(具体包含以下一级类目:电商平台、商家自营、跨境电商)类目调用接口生成。触发: 通过 API 生成获取用户通过点击小程序右上角菜单的「复制链接」获取[图片] [图片] 技术实现: 生成小程序短链API[图片] 相关文档: https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/short-link/generateShortLink.html最后欢迎大家补充更多分享方式
2024-12-30 - 从webview渲染列表页 二次进入skyline渲染的详情页,组件显示异常?
从webview渲染列表页 二次进入skyline渲染的详情页 <t-image>组件无法正常显示,组件一直处于loading状态
2024-08-30 - sticky-header 组件offset-top 属性,目前似乎不支持 负值,比如-200?
sticky-header 组件offset-top 属性,目前似乎不支持 负数,比如-200? 后续可以支持 offset-top 支持负数吗?有些交互用得上,比如滚动时,顶部的封面图 不希望它 完全隐藏, 可以留一部分,作为 navbar的 背景图 这样UI 好看点。。
2024-08-30 - 个人开发者把小程序发布到 App Store 5个步骤(保姆级教程)
用完即走,小程序已经成为连接用户与服务的重要桥梁,无论是购物、出行还是娱乐,小程序都以其便捷性和高效性赢得了用户的青睐。 那小程序是否有边界,能否拓展到 App? 微信开发者工具的最新升级,为这一问题提供了创新的解答。现在,开发者们可以轻松将已有的小程序代码构建为全功能的 App,而无需从零开始开发,这不仅节省了大量的人力和时间成本,更为小程序开发者们打开了通往 App Store 巨大流量的大门。 在这篇文章中,我们将深入探讨微信开发者工具支持小程序 App 化的五大步骤,分析其潜在价值,并通过实际案例来展示这一过程的效果。 背景:个人开发者,将小程序代码构建为 iOS App,以下为整体流程,适合 iOS 开发 / 上架零基础的同学。 [图片] 缘起 一个周末,突然奇想,我还没有搞过 App,要不搞搞玩玩😄 从 0 开始学还是很慢的,毕竟时间有限,好在了解过提示工程 [代码]《ChatGPT 进阶:提示工程入门 陈颢鹏 李子菡》[代码],问了一下助手 ChatGPT 几个常见的问题。 开发适用于 iPhone 的 App 的流程是什么 注册开发者账号 -> 下载 Xcode -> 学习 Swift -> 设计 + 编码 + 测试 -> TestFlight 内测 -> 准备上架 (准备) -> 提交审核 -> 应用上架 -> 应用更新和维护 很好,请给出可运行的应用实例,完成查询本机 IP 地址 我是一个新手,请问在 XCode 中如何运行你提供的代码 几轮对话后,大约用了 1 个小时,一个 iOS Demo 在模拟器上跑成功了,有点意思😄 不过功能有点简单,几年前用 Vue 写过一个还在跑的网站,同时我知道 ChatGPT 的编程能力,于是我丢了一个问题给他。 [代码]你是一个开发,会 Vue 、iOS 开发(使用 SwiftUI 框架 )两种语言,现在需要你根据 Vue 的代码重写为 iOS 代码,以下是 Vue 代码 [代码] [图片] 笔者是一个运维平台的产品,为了不忘记运维场景和技能,自己维护一个业务场景,开发语言:golang + Vue,部署架构:腾讯云 CLB+TKE+ 服务网格,运营系统:CLS+ 云函数 +Kafka+Doris+Flink+Hadoop+Streamsets。 结果惊奇的发现,真的可以执行,不服不行 👍 [图片] 1. 转折:把小程序代码构建为 iOS App 测试包(1 小时) 如果仅仅只是这样,那么这篇文章标题就该叫“GPT 如何将 Vue 改写为 App”。 万万没想到,过了 2 周从朋友那里获悉 微信开发者工具可以直接将小程序代码构建为 App,就像 Golang 一样,可以通过参数 [代码]GOARCH[代码] 控制构建的程序是在跑在 [代码]amd64[代码],还是 [代码]arm64[代码] CPU 架构上。 [图片] 现实就是这么巧,几年前使用 Vue 开发站点时,同时也开发了同款小程序。 有点意思,参照文档 构建你的第一个应用 花了 1 个小时,在我的 iPhone 上跑了 测试版 的 App. [图片] 此处应该给多端应用的产品和开发点个赞👍🏻 搞到这里,我其实进入了这款的第一个哎哈时刻,确实很爽,因为我不需要花心思用 GPT 来迁移 Vue 程序,直接用微信开发者工具构建为 App 即可,交互完全一致。 另外记录构建过程中遇到的两个问题 问题 1:小程序的图片在 App 中无法渲染 启用 Media SDK 即可 [图片] 问题 2:App 带有 Vconsole 入口 一开始以为在模拟器中才有,最后发现是一个配置,需要自己主动关闭。 [图片] 2. 构建正式包 谁不想在 App Store 能搜到自己的 App 呢,第二步,构建正式包。 2.1 准备苹果开发者账号 在 MacBook Air 或 iPhone 中安装 Apple Developer,然后注册苹果开发者账号 [图片] 一年 688 元会费 [图片] 正常情况下,交完会费后,第二天会收到一封欢迎加入 Apple Developer Program 的邮件,代表苹果开发者账号注册成功。 很遗憾,我注册时提示“未知错误,请再试一次” 找 Apple Developer 客服反馈,最后答复 [代码]由于一个或多个原因,您无法完成 Apple Developer Program 的注册。我们目前无法继续处理您的注册。[代码]。 好吧,估计是被风控命中了,于是找了家人的账号来注册,直接成功😄 2.2 生成 Bundle ID/ 证书 /Profile 生成 App 备案和构建正式包都需要的 Bundle ID/ 证书 /Profile。 生成 Bundle ID Bundle ID 是一个唯一的标识符,用来识别你的应用程序。它通常采用反向域名格式,例如 com.example.myapp。在开发和发布应用程序时,你需要在苹果的开发者账户中注册一个 Bundle ID,这样苹果的服务才能识别出你的应用程序。 参照 文档 生成 Bundle ID。 生成 证书 /Profile 证书(Certificates)用于建立开发者的身份,并确保应用是由已注册的开发者发布的。开发者需要从苹果开发者中心申请证书,用来对应用进行签名,这样 iOS 设备才会信任并运行这个应用程序。 配置文件(Provisioning Profiles)是一个包含证书、应用程序 ID、设备 ID 和其他信息的文件,它告诉 iOS 设备一个应用程序可以被安装和运行。配置文件将应用、开发者和设备联系起来,控制哪些设备可以安装和运行你的应用程序。 参照 文档 生成 iOS 证书和 Provisioning Profile。 [图片] 拓展资料:创建证书签名请求 问题:申请的 iPhone Distribution 证书不受信任 导入 Apple WWDRCA 证书 即可,可能原因:大致是分发的根证书没有导入你的 Mac 上。 更多资料详见 Apple PKI。 [图片] 2.3 备案(10 天 +) App 如果没有备案,在中国大陆将无法上架,这是苹果官方的说明。 中国工业和信息化部(MIIT)要求 App 必须具备有效的互联网信息服务提供者(ICP)备案号,了解更多 [图片] 其实备案比较简单,参照 App 备案 ,使用上一部分申请的 [代码]Bundle ID[代码]、证书(可查看 [代码]公钥[代码]、[代码]签名 MD5 值[代码])即可,不需要把 App 开发完,再来备案。 备案最长需要 20 个工作日,笔者用了 10 个工作日,在一个周五的下午收到了工信部发来的备案通过短信。 2.4 创建移动应用 移动应用是为了让 App 能用上微信的能力(比如分享到朋友圈或发送给朋友、微信登录 / 支付等),在移动应用中同时登记了 Bundle ID 和 Universal Links,这将会传递给下一步的多端框架,这是构建可正式包(采用苹果的分发证书)的必备条件。 先介绍一下 Universal Links。当用户使用 iPhone 手机访问你的网站,同时安装了 App 时,能在网站顶部快速跳转到 App。具体可以看下苹果官方的文档 Supporting associated domains 你需要有一个网站,未来要放 Universal Links 要用到的 [代码]apple-app-site-association[代码] 文件,不过对于我来说,这个功能好像用处不大,我更需要的是当用户用 iPhone 访问网站,引导他去 Apple Store 安装 App. 这里有一个关键信息,如果你不需要微信支付 / 微信登录 / 微信卡券的能力,不需要做开发者认证(开发者认证不能是个人主体) 访问 微信开放平台,创建移动应用,提交审核,几个小时就审核通过了。 [图片] 2.5 绑定多端框架 在 Donut 开发平台 中将 多端应用绑定上一步创建的移动应用,这样可以用到移动应用中登记的 Bundle ID 和 Universal Links,官方这么做比较合理,关键信息必须通过移动应用这关人工审核来起到一定的约束。 [图片] 绑定后,在多端应用中可以看到 Bundle ID 和 Universal Links 了。 [图片] 2.6 准备 App icon 等资料 App Icon 先用工具为你的 App 设计一个 1024px X 1024px 的图标,然后在 App Icon Generator 上生成 iPhone 所有规格的图标,之后在 [代码]project.miniapp.json[代码] 配置。 [图片] 启动图片 App 启动一般需要 2~4 秒,如果没有启动图片是白屏,用户会有点慌,不知道当前 App 是否正在启动,启动图片就是解决这个问题,同时在启动图片中传达 App 的价值主张。 我是直接用 Sketch 设计的,分辨率为 1290px x 2796px,这是兼容性最强的 6.7 寸(iPhone 15 Pro Max/15 Plus/14 Pro Max)手机的分辨率。 考虑到启动图片在不同机型上的兼容性,如果你用 Xcode 开发,苹果官方会推荐使用 Launch Screen Storyboard 隐私信息访问许可描述 小程序虽然没有用到摄像头、麦克风等权限,但多端的 SDK 中有(具体详见 Donut 官方文档 上架应用市场常见问题),所以得提前申明,不然把包通过 [代码]Transporter[代码] 上传后,会收到苹果发出的不合规邮件。 [图片] 以下是根据苹果官方打回的邮件中定义的隐私信息访问许可描述,应该是最基础的了,可以贴到你的 [代码]project.miniapp.json[代码] 文件中(用编辑器打开)。 [代码]{ "privateDescriptions": { "NSBluetoothPeripheralUsageDescription": "为了提供完整的功能,我们的应用程序需要访问蓝牙外设。这将用于与其他设备进行通信和数据交换。我们承诺保护用户隐私和数据安全。", "NSMicrophoneUsageDescription": "为了提供完整的功能,我们的应用程序需要访问麦克风。这将用于录制音频和进行语音交互。我们承诺保护用户隐私和数据安全。", "NSCalendarsUsageDescription": "为了提供完整的功能,我们的应用程序需要访问日历。这将用于提醒和日程管理。我们承诺保护用户隐私和数据安全。", "NSLocationAlwaysAndWhenInUseUsageDescription": "","NSBluetoothAlwaysUsageDescription":" 为了提供完整的功能,我们的应用程序需要始终访问蓝牙外设。这将用于与其他设备进行通信和数据交换。我们承诺保护用户隐私和数据安全。","NSPhotoLibraryUsageDescription":" 为了提供完整的功能,我们的应用程序需要始终访问相册。这将用于 IP 查询时显示 ISP 的图标。我们承诺保护用户隐私和数据安全。","NSCameraUsageDescription":" 为了提供完整的功能,我们的应用程序需要访问摄像头。这将用于录制视频。我们承诺保护用户隐私和数据安全。","NSLocationWhenInUseUsageDescription":" 为了提供完整的功能,我们的应用程序需要在使用时访问位置信息。这将用于提供定位服务和相关功能。我们承诺保护用户隐私和数据安全。" } } [代码] 2.7 构建正式版版本包 参照 打包生成 IPA 生成正式版的版本,注意使用分发证书。 [图片] 报错:file must be in miniprogram project 解决:把 mobileprovision 放在 miniprogram 目录下,因为 profile 不像 App icon 一样会自动上传到 miniprogram/ 目录下。 2.8 使用 Transporter 上传版本 参照 官方文档 上传正式版的 APK 包。 [图片] 遇到问题: Transporter,无法为 App “comxxxx.ipa” 创建临时 .itmsp 软件包。No suitable application records were found. Verify your bundle identifier ‘com.xxxx’ is correct and that you are signed into Xcode with an Apple ID that has access to the app in App Store Connect. [图片] 解决办法:去 App Store Connect 添加 App,绑定 [代码]Bundle id[代码],这样 Transporter 可以验证包在 App Store Connect 中已注册。 3. 使用 TestFlight 测试 在 App Store Connect 的 TestFlight 页面,可以选择内部、外部测试,外部测试版本需要 Apple 官方审核,把 公开链接发给朋友即可。 [图片] 在测试的同时,可以同步准备上架 App Store 的资料了。 4. 准备上架 Apple Store 审核资料 截屏 截屏是用来在 App Store 中显示你的 App 产品介绍页的,具体参照 截屏规范 [图片] 有 [代码]iPhone 15 Plus[代码] 和 [代码]iPhone 8 Plus[代码] 这两款机型就足够了,其他型号的手机能复用,分辨率应该是等比率缩放。 如果你像我一样,没有这两款手机,那用 iOS 模拟器。 Xcode -> 工具栏 Windows -> Devices and Simulators -> Create a new simulator -> Download more simulator runtimes [图片] 在微信开发者工具中运行这两款模拟器,利用模拟器自带截屏工具即可。 隐私政策 找一下常见 App 的隐私政策,在其产品介绍页中可以跳转过去。 如果你有网站就放在网站上,如果没有可以放在腾讯文档上。 [图片] 选择 App 供应的地区范围 哪些地区的用户可以下载你的 App。 [图片] 提交审核 一切准备好了后(包含备案),开启提交审核。 下午 5:35 提交审核,第二天早上 3:40 上架成功。✌🏻 [图片] 5. App Store 的数据 上架后刚好一周,看看最近一周的数据,还不错。 [图片] 这是评分数据 [图片] 6. 引流 二维码引流:草料二维码 通过草料二维码生成 App 的下载链接,放在网站上,引导用户跳转至 App。 Universal Links 参照 Apple 官网文章 Supporting associated domains 准备 Universal Links。 前面已经介绍了这个东东是干嘛的。 准备 [代码]apple-app-site-association[代码] 文件,放在网站的 [代码].well-known[代码] 目录下,完整路径为 [代码]/.well-known/apple-app-site-association[代码] 以下为示例,特别注意的是 [代码]appID[代码] 是由 [代码]团队 ID[代码] + [代码]Bundle ID[代码] 组成。 [代码]{ "applinks":{"apps":[], "details":[ { "appID":"<team_id>.<bundle_id>", "paths":["*"] } ] } } [代码] team_id 从 开发者账户 中获取 [图片] 顶部导航 当用户访问网站时,顶部引导用户跳转到 App 下载页。 等有空了搞搞。 7. 后记 小程序转 App,让个人或企业可以快速拥有 App,获取应用市场的流量,让开发者把精力放在业务逻辑上。 同时在开发小程序的过程中,发现开发者生态会散落在多个地方,比如 github,提供一些小程序模版、组件等能力,无法集中在一个地方比较方便的找到整个开发者生态的能力,和 VSCode 插件生态有点区别。 [图片] 先说 IDE 插件,比如我用 GPT4-Turbo 来写先代码或排查问题会在微信开发者工具和 Web 间跳转,操作流不太顺,如果能在微信开发者工具的插件入口中找到对应的 AI 代码助手,用起来应该很爽。 一旦平台的开放能力放出来,这些能力将源源不断的涌入到这个市场中,而不是作为平台方来集成这些能力,毕竟精力有限,同时还不一定做的最好,用插件可以让用户有更多的选择。 再说说 小程序组件,以大模型为例,目前市场有备案的大模型基座模型有好几家,在小程序开发过程中其实比较缺整体组件(UI + 背后的 API),有点像商场一样,平台方构建开放的能力,引导各个供应商提供开箱即用的能力,让用户可以快速上手,赶上这波大模型的技术趋势。 比如我自己在设计开放能力时的思考,平台专注骨架功能的开发,让开发者能参与到平台的建设中来,把生态盘活起来,最终提升大家研发运营的效率。 最后就是管理后端比较分散,比如 开放平台、donut、we 分析、云测、云托管,云开发,产品矩阵看不清,不容易知道整体的能力,缺少一个集中的控制台。 最后希望小程序越来越好 😄
2024-01-30 - xr-frame如何实现ar模型下的透明遮挡效果?
如题,在shader中处理ar相机的底图作为遮挡物的贴图这种方式是否可行?有没有其他直接的方法?
2023-03-10 - xr-frame中渲染透明视频
渲染透明视频可以通过将透明视频通道转换为灰度图的方式,利用uv将透明叠加到视频上。shader处理如下: vec4 color = texture2D(u_baseColorMap, vec2(vTextureCoord.x*0.5,vTextureCoord.y)); vec4 colora = texture2D(u_baseColorMap, vec2(vTextureCoord.x*0.5 + 0.5,vTextureCoord.y)); vec4 baseColor = vec4(color.xyz,colora.x); gl_FragData[0] = baseColor; 具体代码: const xrFrameSystem = wx.getXrFrameSystem(); function createVideoTsbsEffect(scene) { return scene.createEffect( { "name": "video-tsbs", "properties": [ { "key": "u_baseColorFactor", "type": 3, "default": [1, 1, 1, 0] } ], "images": [{ "key": "u_baseColorMap", "default": "white", "macro": "WX_USE_BASECOLORMAP" }], "defaultRenderQueue": 3000, "passes": [ { "renderStates": { "cullOn": true, "blendOn": true, "depthWrite": true, "cullFace": 2 }, "lightMode": "ForwardBase", "useMaterialRenderStates": true, "shaders": [0, 1] }], "shaders": [ `#version 100 precision highp float; attribute vec3 a_position; attribute vec2 a_texCoord; uniform mat4 u_projection; uniform mat4 u_world; uniform mat4 u_view; varying highp vec2 vTextureCoord; void main() { vTextureCoord = a_texCoord; gl_Position = u_projection * u_view * u_world * vec4(a_position,1.0); }`, `#version 100 precision highp float; uniform highp vec4 u_baseColorFactor; #ifdef WX_USE_BASECOLORMAP uniform sampler2D u_baseColorMap; #endif varying highp vec2 vTextureCoord; void main() { #ifdef WX_USE_BASECOLORMAP vec4 color = texture2D(u_baseColorMap, vec2(vTextureCoord.x*0.5,vTextureCoord.y)); vec4 colora = texture2D(u_baseColorMap, vec2(vTextureCoord.x*0.5 + 0.5,vTextureCoord.y)); vec4 baseColor = vec4(color.xyz,colora.x); #else vec4 baseColor = u_baseColorFactor; #endif gl_FragData[0] = baseColor; } `] } ) } xrFrameSystem.registerEffect("video-tsbs", createVideoTsbsEffect); wxml: <xr-scene bind:ready="handleReady"> <xr-assets> <xr-asset-load type="texture" asset-id="waifu" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/waifu.png" /> <xr-asset-load type="video-texture" asset-id="test" src="https://demo.uality.cn/output-lr.mp4" options="autoPlay:true,loop:true" /> <xr-asset-material asset-id="video-tsbs-mat" effect="video-tsbs" uniforms="u_baseColorMap:video-test" /> </xr-assets> <xr-mesh node-id="cube" geometry="cube" material="video-tsbs-mat" /> <xr-camera clear-color="0.4 0.8 0.6 1" position="0 1 4" target="cube" camera-orbit-control /> </xr-scene> 视频生成: 通过ffmpeg生成将带有透明通道的mov格式视频转换为左(rgb通道信息)右(alpha通道信息)的MP4视频。 ffmpeg -i input.mov -vf "split [a], pad=iw*2:ih [b], [a] alphaextract, [b] overlay=w" -y output-lr.mp4 也可以用百度小程序“AFX透明视频”带的工具制作。(左右的话,直接修改shader的偏移就可以了) 转换出来的视频结果如下图: [图片]
2023-04-07