用 Claude Code 从零构建离线记事本 PWA 应用

Tue, 03 Feb 2026 00:00:00 +0000

在 AI 辅助编程的时代,我们如何利用 Claude Code 这样的智能工具来构建一个完整的 Web 应用?本文将详细记录使用 Claude Code 开发一个功能完整的离线记事本 PWA (Progressive Web App) 的全过程,展示 AI 编程助手如何帮助我们快速实现从需求到部署的完整开发流程。

这个项目的特别之处在于:它是一个零依赖框架的纯 JavaScript 应用,支持 Markdown 渲染和 JSON 可视化,并且可以完全离线工作。更重要的是,整个开发过程展示了如何与 AI 编程助手高效协作。

在树莓派上使用Phantomjs自动登录微博

Sun, 21 Jul 2013 00:00:00 +0000

使用过新浪开放平台的朋友都知道用户对小应用（用户数较少的）的授权Token很容易过期，自动续期要求授权过的用户在过期前重新打开授权页。如果你想实现一个自动备份自己微博的App，就不得每天（周）自己去访问授权页（想死的心都有了吧？）。这里介绍一种通过脚本自动登录微博获取最新oAuth token的方法（需要微博登录名和密码），合适自己玩。将脚本部署在树莓派上后，我再也不用每周都去登录一次授权页了，只是收到报警消息后（经常是帐号被冻结了）需要手动处理一下。

Phantomjs

Phantomjs 是一个开源的，没有界面可运行在命令行，跨平台，基于WebKit的全功能浏览器，可以用来做网站自动化测试。从源代码编译比较费时间，可以直接下载二进制版本，树莓派的版本在这里可下载。Phantomjs下载好了后就一个可执行文件，依赖非常少，我很喜欢这种方式。

代码

以下代码使用提供的微博用户名和密码登录，获得Token后还会打开微博首页看帐号是否被冻结了。

var page = require('webpage').create(),
 system = require('system'),
 fs = require('fs'),
 address;

var weibo_userid = system.args[1]
var weibo_passwd = system.args[2]

var startUrl = "https://api.weibo.com/oauth2/authorize?client_id=<your_app_key>&redirect_uri=<your_return_url>/&response_type=token";

var verify_weibo_freeze = false;

page.onResourceReceived = function (res,network) {
 if (res.stage == "end") {
 // console.log("\t<-" + res.url);
 if (res.url.indexOf("authorize?client_id")>0) {
 startUrl = res.url
 } 
 if (res.url.indexOf("?access_token")>0) {
 var pos1 = res.url.indexOf("access_token=")
 var pos2 = res.url.indexOf("&")
 var access_token = res.url.substring(pos1+"access_token=".length, pos2)
 console.log(weibo_userid + " login OK, access_token is: " + access_token)
 verify_weibo_freeze = true
 }
 if (verify_weibo_freeze && res.url != "http://weibo.com/" && res.url.indexOf("http://weibo.com/")>-1) {
 var pos1 = res.url.indexOf("/",8)
 var pos2 = res.url.indexOf("?")
 var weibo_name = res.url.substring(pos1+1,pos2)
 console.log(weibo_name+" status verified OK")
 phantom.exit();
 }
 }
};

page.onLoadFinished = function() {
 if (verify_weibo_freeze) {
 page.open("http://weibo.com/", function() {
 phantom.exit();
 })
 }
};

page.onConsoleMessage = function(msg) {
 console.log(msg);
};

page.open(startUrl, function(status) {
 if ( status === "success" ) {
 page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
 var offset = page.evaluate(function(a,b) {
 $("#userId").val(a)
 $("#passwd").val(b)
 if ($('.WB_btn_login').hasClass("formbtn_01")) {
 // console.log("Found button!")
 return $('.WB_btn_login').offset()
 }
 return undefined
 }, weibo_userid, weibo_passwd);
 page.sendEvent('click', offset.left + 1, offset.top + 1);
 });
 }
})

执行方法

timeout 120 phantomjs weibo_login.js <your_weibo_login_id> <your_weibo_login_password>

Javascript on All about Raspberry Pi

用 Claude Code 从零构建离线记事本 PWA 应用

在树莓派上使用Phantomjs自动登录微博

Phantomjs

代码

执行方法