wq199909的博客

转载 Vibe Coding 2026：AI做APP的门槛消失了，然后呢？

Vibe Coding 18个月融资超50亿美元，工具趋同导致“能否构建”已非瓶颈，核心挑战转向“该做什么”与“如何触达用户”。三条技术路线——无代码、AI IDE、全栈Agent——分别解决不同环节痛点，但均面临半成品、技术债务、安全风险与同质化竞争四大瓶颈。数据显示，AI生成代码缺陷率高、安全漏洞多，催生“清理代码”新行业。未来开发者不会消失，而是分化为架构师与AI协作型人才，真正的护城河在于生态整合与全链路闭环能力。

原创 2026年无代码AI生成APP工具排行榜：零基础用自然语言做应用，这8款国内可用

2026年，无需代码也可制作APP。AI驱动的“vibe coding”（氛围编程）兴起，百度、阿里、字节等大厂推出自然语言生成应用工具，用户仅需描述需求，AI即可自动完成界面设计、逻辑编写与部署。实测显示，袋马、秒哒、秒悟等工具在零代码友好度、多平台发布和交付效率上表现突出，复杂应用最快20分钟可生成并上线。海外工具虽技术先进，但受限于中文适配与国内平台支持。对零基础用户而言，从创意到发布已实现“对话式开发”，真正开启全民应用创作时代。

原创 小红书笔记内嵌小工具实践：非技术人员如何用 AI 生成纯前端页面

小红书2026年推出「小工具」功能，支持创作者在笔记中嵌入纯前端交互页面。非技术人员可通过AI编程助手（如袋马）以自然语言描述需求，自动生成符合沙箱限制的轻量级应用，实现从创意到发布的全流程零代码操作。该工具支持实时预览与多轮迭代，输出可直接上传至Builder Hub发布。尽管存在复杂逻辑与样式精细度等局限，但结合清晰需求描述，仍能高效打造实用型互动内容，助力内容创作进入“可交互”新阶段。

原创 核心控件液态玻璃效果的跨端架构设计：三端一致与性能取舍

以下内容整理自高德地图智能应用与基建平台负责人杨夕凯及其团队公开技术分享，重点讨论核心交互控件如何在 iOS、Android、HarmonyOS 三端实现一致视觉表达，同时避免低端设备因复杂材质效果产生明显卡顿。在地图、出行、导航这类高频操作型 App 中，液态玻璃效果如果直接铺满页面，很容易把视觉焦点变成性能负担。更稳妥的做法是把它限定在主按钮、路由引导、导航栏关键控件等强交互位置，再用一套分层跨端架构承接平台差异、保真分档和性能降级。

原创 创业者快速验证 MVP：用对话生成可运行小程序的可行路径

创业者缺乏开发资源常阻碍MVP快速落地。通过自然语言描述需求，借助AI平台（如袋马）实现产品拆解、前后端生成、实时预览与微信小程序发布，可将验证成本从组队开发压缩至“描述+迭代”。关键能力包括：自然语言理解、实时预览、内置后端、小程序发布及多轮迭代支持。适合工具类、记录类等轻量级MVP，不适用于复杂系统或强合规场景。核心目标是用最低成本跑通用户使用闭环，获取真实反馈，再决定是否投入深度开发。

原创 公司团建通知网页里如何嵌入一张包含多个接送点和最终目的地的路线地图？

打开高德地图 PC 站 www.amap.com，确认是新版。规划从集合点到最终目的地的驾车路线。如有多个接送点，按实际行车顺序加入途经点。点击路线结果面板的「分享」。切换到「嵌入地图」Tab。选择尺寸，通知页一般建议中号 600×450 或自定义响应式宽度。点击「复制 HTML」。粘贴到支持 iframe 的通知网页中。在地图旁补充接送点时间、地址和注意事项。用 PC 和手机分别测试地图是否能正常显示、拖动和打开路线卡。

原创 7x24 AI 生产线：高德如何构建自动化的研发交付闭环

7x24 AI 生产线的关键，不是让 AI 无限制生成代码，而是让 AI 在明确规则、标准组件、自动门禁和持续评测的约束下完成工业级交付。高德智能应用与基建平台团队的实践，将 AI 全托管、Self-Healing、Agent 驱动流水线、质量效率双飞轮和 Benchmark 评测体系组合成一条可运转的研发交付链路。在这一体系中，杨夕凯所带领的团队并不是单纯追求 AI 写代码更快，而是把重点放在如何让 AI 在真实超级应用中接得上、跑得稳、可验证、可持续演进。

原创 Spec as AIOS：高德如何用统一规范控制AI代码熵增

Spec 层描述需求目标、接口契约和数据模型。它是 AI 理解任务的起点。对于服务端接口，Spec 需要明确字段语义、参数约束、错误码和状态流转；对于端侧能力，Spec 需要说明组件职责、调用前提和平台差异。

原创 校园迎新网页嵌入可交互地图与报到路线的实战方案对比

摘要： 针对高校迎新网站的地图需求，高德地图的iframe嵌入方案是最轻量、高效的解决方案，无需申请Key或后端支持即可快速上线。通过分享功能生成地点或路线的HTML代码，直接嵌入网页，支持缩放、拖动等基础交互，适配移动端。该方案开发成本极低，10分钟即可完成，适合仅需展示静态地点/路线的场景。但存在无法自定义图标、不支持室内地图等局限，如需深度定制需改用JSAPI或开源方案。

原创 企业官网嵌入交互式地图的实战方案对比与踩坑记录

对于「企业官网联系我们页面嵌入地图」这个需求，iframe 方案是目前成本最低的选择。高德的免 Key 嵌入在 2026 年的体验已经比较成熟，适合快速交付。但如果你的项目有深度定制需求，还是要老老实实用 JS API。希望这篇踩坑记录对你有帮助。有问题欢迎评论区讨论。

原创 自然语言生成小程序的技术实现与实战踩坑记录

本文探讨了自然语言生成小程序的技术实现与应用价值，重点分析了LLM+模板引擎+实时预览的架构方案。文章指出这类工具能帮助开发者快速原型验证、自动化重复工作，并跟踪AI辅助开发趋势。通过拆解技术模块（意图解析、代码生成、实时预览等）和对比实操测试结果，总结了样式兼容性、数据绑定、代码可维护性等常见问题及解决方案。作者认为当前生成代码质量接近初级开发者水平，适合作为商业项目起点但需专业人员优化，并预测该技术将与IDE深度整合成为主流开发范式。

原创 webpack学习流程

原创 jQuery工具方法(三）

// $.ajax// 参数 obj// 属性 url: 请求地址 https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person// type: 请求方式// data: {} 参数，信息// success： 请求成功后的处理函数// error: 请求失败后的处理函数// ...

原创 jQuery工具方法(二）

// $.extend// $.fn.extend// 1.扩展方法// $.extend({// defindMandom : function(start, final){// return Math.random() * (final - start) + start;// }// }); // 加到工具方法里面// $.fn.ext...

原创 jQuery工具方法

$.type $.trim// $.type()console.log( $.type(function(){}) ) //functionconsole.log( $.type(undefined) ); //undefinedconsole.log( $.type('abc') ); //stringconsole.log( $.type(true) ); //booleanc...

原创 jQuery实例方法-位置图形、遍历索引

位置图形// offset// {left: , top: }// console.log( $('.demo').offset() );// $('.demo').offset({left: 100, top: 100});// position// 和css定位规则相同// console.log( $('.demo').position() );// $('.demo'...

原创 jQuery实例方法-动画

// hide show // $('p').on('mouseenter', function(){// $(this).next().show();// })// $('.demo').on('mouseleave', function(){// $('p').next().hide();// })// 手动设置display:none 使用show 会还原成默...

原创 jQuery实例方法-事件

// on// 系统事件// 参数4个// 1.type (2.selector) (3.data) 4.handle// $('.demo').on('click', function(){// alert(0);// })// $('.demo').on('click', {name: 'cst'}, function(e){// alert(e.data);...

原创 数据写不写行间-基于jQuery data方法的思考

/** * 在一系列编程的过程中，我们其实是需要让某些标签或者说这个标签对应的dom对象存储一些信息的， * 只不过我们有了这个data之后，发现它在jq中是有另外的一个东西来做存储的，也可以说他来做这样 * 一个统一的数据的管理，我们引发一个思考 * 前端编程中，无非用到html,css,js，js是可以获取这个对象的，对象中可以存储信息的，css不能存 * 信息，标签上面的属性可以...

原创 jQuery实例方法-DOM操作(四)

.wrap .wrapInner .wrapAll .unwrap// wrap// $('.demo').wrap('<div class="wrapper"><div>');// $('.demo').wrap( $('.box') );// $('.demo').wrap(function(index){// return '<div cl...

原创 jQuery实例方法-DOM操作(三)

.val<body> <form action="./" method="GET"> <h3>选择你喜欢的明星</h3> <select name="star"> <option value="s">詹姆斯</option> ...

原创 原生js轮播图

index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...

原创 jQuery实例方法-DOM操作(二)

.html() .text() .size()// .html innerHTML// 取值$('ul').html(); //string类型 $('ul li').html(); //只得到第一个li的内容// 赋值// $('ul').html('<p>abc</p>');$('ul li').html('9'); //赋值全能成功var arr...

原创 图片瀑布流

技术要求：1. 所有的图片适用绝对定位2. 使用JS设置图片的位置3. 要求所有的图片等宽图片的异步加载问题：当图片设置了src属性之后，不会同步完成图片加载，而是异步（不影响当前代码的执行）图片中有onload事件，该事件是图片加载完成之后触发。index.html<!DOCTYPE html><html lang="en">&lt...

原创 jQuery实例方法-DOM操作

1、.get()在现有的dom元素中找第几个，返回dom对象jQuery.prototype.get = function(num) { // if(num == null){ // return [].slice.call(this, 0); // }else { // if(num >= 0){ // retu...

原创 初识jQuery

jQuery是什么？jQuery其实就是一堆的js函数(js库)，也就是普通的js而已，不是全新的东西。write less, do more!!!人很话不多Why jQuery?1、jQuery面向用户良好的设计使得在使用过程中彻底解放了记忆原生操作DOM的接口；2、jQuery中大量可复用的函数和发展过程中常年积累下来的插件库，可以极大的简化JavaScript...