微信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>
目录
相关文章
|
7月前
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
2月前
|
移动开发 小程序 开发工具
揭秘微信/支付宝6大支付方式:从扫码到刷脸,谁在偷偷赚你的手续费?优雅草卓伊凡
揭秘微信/支付宝6大支付方式:从扫码到刷脸,谁在偷偷赚你的手续费?优雅草卓伊凡
216 0
揭秘微信/支付宝6大支付方式:从扫码到刷脸,谁在偷偷赚你的手续费?优雅草卓伊凡
|
11月前
|
人工智能 JavaScript 定位技术
微信的接口都有哪些?
【10月更文挑战第17天】微信的接口都有哪些?
961 43
|
11月前
|
JSON 小程序 应用服务中间件
微信的接口wxLogin()的返回值都有什么?
【10月更文挑战第4天】微信的接口wxLogin()的返回值都有什么?
992 1
|
7月前
|
小程序 测试技术 数据安全/隐私保护
微信公众号接口测试实战指南
微信公众号接口测试是确保系统稳定性和功能完整性的重要环节。本文详细介绍了测试全流程,包括准备、工具选择(如Postman、JMeter)、用例设计与执行,以及常见问题的解决方法。通过全面测试,可以提前发现潜在问题,优化用户体验,确保公众号上线后稳定运行。内容涵盖基础接口、高级接口、微信支付和数据统计接口的测试,强调了功能验证、性能优化、安全保护及用户体验的重要性。未来,随着微信生态的发展,接口测试将面临更多挑战和机遇,如小程序融合、AI应用和国际化拓展。
|
11月前
|
JSON 前端开发 API
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
388 2
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端
|
12月前
详细教程:扫码提交表单后,数据直接推送到企业微信、钉钉、飞书群聊
在草料制作的表单中,填表人扫码填写并提交数据后,这些信息可以立即通过企业微信、钉钉或飞书自动推送到相应的群聊中,实现即时共享和沟通,提升团队协作效率。
407 2
|
4月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
944 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
11月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
2411 7

热门文章

最新文章