微信h5扫码接口范例:使用localStorage防止扫码后表单其他内容丢失

简介: 微信h5扫码接口范例:使用localStorage防止扫码后表单其他内容丢失

测试方法: 将以下代码保存到htm文件放到服务器上。然后将这个html文件的URL发给微信上任意好友后点开访问。

测试效果: 在打开的页面中输入姓名,勾选爱好里面的一项或两项。然后点击扫码,当扫码内容显示到输入框后表单里其他内容并未丢失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调用扫码后表单数据不丢失</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_626784_mcjb2yy4vfl.css" />
    <script src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    姓名:<input type="text" id="username"><br>
    学号:<input type="text" id="usernum"> <i id="saoma" class='dzwfont dzw-saomiao'></i><br>
    爱好:<input type="checkbox" id="chouyan">抽烟 <input type="checkbox" id="hejiu">喝酒<br>
    <input type="button" id="tijiao" value="提交">
</body>
<script type="text/javascript">
    $(document).ready(function() {
    
        //页面载入时读取之前保存的数据并设置
        $("#username").val( localStorage.getItem("username") );
        $("#chouyan").prop("checked", localStorage.getItem("chouyan")=="true" );
        $("#hejiu").prop("checked", localStorage.getItem("hejiu")=="true" );

        var qr = GetQueryString("qrresult");
        if (qr) $("#usernum").val(qr);
    });

    $("#saoma").click(function() {
    
        //跳转前保存数据
        localStorage.setItem("username", $("#username").val());
        localStorage.setItem("chouyan", $("#chouyan").prop("checked"));
        localStorage.setItem("hejiu", $("#hejiu").prop("checked"));

        window.open("//996315.com/api/scan/?redirect_uri=" + encodeURIComponent(location.href), "_self");
    });

    function GetQueryString(name) {
    
        var reg = new RegExp("\\b" + name + "=([^&]*)");
        var r = decodeURIComponent(location.href).match(reg);
        if (r != null) return r[1];
    }
</script>

</html>
目录
相关文章
|
11天前
|
算法 iOS开发 CDN
“企业微信iPad协议”第 0x04 天:当朋友圈接口在凌晨 2:14 突然返回 404
新品上线紧急任务:300位经销商朋友圈同步海报。突破官方限制,利用企业微信iPad协议私有接口,自动化上传发布。凌晨遭遇404,迅速定位并修复算法版本问题,最终高效完成推送,点赞超4200。技术在文档之外,也在边界之内。
91 0
|
9天前
|
iOS开发
“企业微信iPad协议”第0x0B次编译:当朋友圈接口在凌晨悄然返回空数组
新品海报发布失败,排查发现企业微信iPad端因本地时间偏差超60秒,导致`ext_ticket`校验失败。NTP校准后恢复正常。问题根源:独立加签逻辑对时间敏感,且错误不提示。精准时间成合规关键。
144 0
|
8月前
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
3月前
|
移动开发 小程序 开发工具
揭秘微信/支付宝6大支付方式:从扫码到刷脸,谁在偷偷赚你的手续费?优雅草卓伊凡
揭秘微信/支付宝6大支付方式:从扫码到刷脸,谁在偷偷赚你的手续费?优雅草卓伊凡
456 0
揭秘微信/支付宝6大支付方式:从扫码到刷脸,谁在偷偷赚你的手续费?优雅草卓伊凡
|
12月前
|
人工智能 JavaScript 定位技术
微信的接口都有哪些?
【10月更文挑战第17天】微信的接口都有哪些?
981 43
|
12月前
|
JSON 小程序 应用服务中间件
微信的接口wxLogin()的返回值都有什么?
【10月更文挑战第4天】微信的接口wxLogin()的返回值都有什么?
1043 1
|
8月前
|
小程序 测试技术 数据安全/隐私保护
微信公众号接口测试实战指南
微信公众号接口测试是确保系统稳定性和功能完整性的重要环节。本文详细介绍了测试全流程,包括准备、工具选择(如Postman、JMeter)、用例设计与执行,以及常见问题的解决方法。通过全面测试,可以提前发现潜在问题,优化用户体验,确保公众号上线后稳定运行。内容涵盖基础接口、高级接口、微信支付和数据统计接口的测试,强调了功能验证、性能优化、安全保护及用户体验的重要性。未来,随着微信生态的发展,接口测试将面临更多挑战和机遇,如小程序融合、AI应用和国际化拓展。
|
12月前
|
JSON 前端开发 API
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
419 2
|
17天前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
2月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
uni-halo + 微信小程序开发实录:我的第一个作品诞生记

热门文章

最新文章