微信小程序开发实战，手把手教你制作高效表单

你打开微信，点进一个小程序，填了个表单，然后关掉它。整个过程可能不到一分钟，但背后藏着不少门道。我这几年帮人做了几十个小程序，踩过无数坑，最深的体会是：表单这玩意儿，看着简单，做起来真要命。用户填得顺手，你后台数据收得漂亮，这才是真功夫。

先说说表单的结构。很多新手上来就把所有字段堆一起，姓名、电话、地址、备注、上传图片，恨不得一口气全收进来。但用户不是机器，他们需要喘口气。我习惯的做法是：把表单拆成几个逻辑块。比如一个报名表单，基本信息放一块，联系方式放一块，附加信息放另一块。每个块给个简短标题，用户一看就知道接下来要干嘛。代码实现上，用``标签包住每个块，加个`wx:if`控制显隐，点下一步才展开下一段。这样用户心理负担轻了，完成率能提高30%以上。

字段类型的选择也是门学问。微信小程序自带``、``、``这些组件，但很多人用错了。比如电话号码，直接给个`<input type="text">`，用户还得手动切换数字键盘。正确的做法是设`type="number"`，手机端自动弹出数字键盘。再比如性别选择，别用两个单选框，太占地方，用`<picker>`做成下拉菜单，一行搞定。我做过一个调研问卷，把性别从单选改成下拉，填写时间少了8秒。别小看这8秒，用户耐心就那么点，省一秒是一秒。</p> <p>数据验证是表单的灵魂，也是最容易翻车的地方。很多人只在前端写验证规则，比如手机号必须是11位，然后用户填了个12345678901，前端通过了，后端傻眼了。正确的做法是前后端双重验证，前端负责用户体验，后端负责数据安全。代码写起来也不复杂，前端用`bindinput`事件监听每个字段，实时校验格式，错了马上提示。后端收到数据再校验一次，格式不对直接返回错误码。我有个客户，就因为前端验证太松，后台收了十几条乱填的数据，排查花了半天。</p> <p>用户体验的细节，往往决定表单的成败。加载状态要处理好，用户点提交按钮后，按钮马上变成“提交中...”并禁用，防止重复提交。上传图片要有进度条，别让用户干等。错误提示要具体，别只写“输入有误”，要写明“手机号格式错误，请重新输入”。我见过最离谱的表单，用户填完点提交，页面卡了5秒没反应，用户以为没点到，又点了一次，结果提交了两遍。后来加了防重复提交，问题才解决。</p> <p>表单提交后的反馈也值得琢磨。很多人提交完就完事了，页面跳转到空白页，用户一脸懵。正确的做法是：提交成功后，给个明确的成功提示，比如“报名成功，我们会在24小时内联系您”，同时显示一个倒计时自动返回首页的按钮。如果提交失败，别只显示“系统错误”，要给出具体原因和解决方案，比如“网络异常，请检查网络后重试”。我做过测试，有反馈的表单比没反馈的，用户满意度高出40%。</p> <p>表单数据的存储和同步，是后端同学最头疼的事。微信小程序没有本地数据库，数据得存在云开发或者自己的服务器上。我推荐用云开发，省去搭建服务器的麻烦。存储时要注意字段命名规范，别用中文，用驼峰命名法，比如`userName`、`phoneNumber`。同时加上时间戳和用户ID，方便后续排查。我有个项目，用户提交的表单数据丢失了，查了半天发现是字段名用了中文，云开发不兼容，全被过滤掉了。后来改了命名规范，再没出过问题。</p> <p>表单的复用性也很重要。同一个表单可能出现在多个页面，比如报名表单、反馈表单、预约表单，字段大同小异。别每个页面都重写一遍，太累。我习惯把表单封装成组件，用`properties`接收不同配置，比如字段列表、验证规则、提交接口。这样改一个地方，所有页面都生效，维护成本大大降低。我做过一个项目，表单组件化了之后，新增一个表单页面只需要写10行代码，效率提升了好几倍。</p> <p>说说表单的测试。很多人写完就上线，结果用户反馈各种bug。正确的做法是：上线前做全面测试，包括正常填写、异常填写、网络断开、快速点击提交等场景。特别是微信的`<picker>`组件，不同机型表现不一样，要在iPhone和安卓上都测一遍。我有个教训，测试时只用了iPhone，结果上线后安卓用户反馈选择器点不动，查了半天是样式兼容问题。后来用`wx.createSelectorQuery`动态适配，才解决。</p> <p>表单这件事，说到底就是跟用户对话。你设计得好，用户填得顺，数据收得全，三方都舒服。下次你再做表单，别急着堆字段，先想想用户会怎么填，再动手写代码。</p> <div class="source">原文来自：<a class="link-main" href="#">小程序开发</a></div> <div> <span style="float:right;">下一篇：<a href='/plus/view-2986-1.html'>微信小程序在线，助力生活服务新体验</a> </span> 上一篇：<a href='/plus/view-2984-1.html'>企业定制微信小程序开发，专属解决方案助力业务增长</a> </div> </div> </div> <div class="sharebtn"> <strong>一起分享吧</strong> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a><a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a><a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a><a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a><a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='https://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()*36e5)];</script> </div> </div> <div class="detail-more bg-white"> <p><a href="/plus/list-11.html">read more >></a></p> <ul> <li><a href="/plus/view-3291-1.html">微信卡片轻松做，这款小程序...</a></li> <li><a href="/plus/view-3290-1.html">微信小程序开发版，从零到上...</a></li> <li><a href="/plus/view-3289-1.html">微信小程序开发实战，从零到...</a></li> <li><a href="/plus/view-3288-1.html">微信小程序从零到上线，手把...</a></li> <li><a href="/plus/view-3287-1.html">微信小程序俱乐部，新手入门...</a></li> </ul> <br /> <br /> <p align="center"><img src="/skin/images/ewm.jpg" /><br /> 微信公众账号<br /> 添加"龙图弘科技"</p> </div> </div> </div> <script language="JavaScript" src="/skin/js/index.js"></script> <script type="text/javascript"> document.onscroll = function(){ var bottom=jQuery(".footer").offset().top-jQuery(".detail-more").outerHeight(); // alert(bottom); if(jQuery(document).scrollTop()>237){jQuery(".detail-more").addClass("detail-fixed");}else{jQuery(".detail-more").removeClass("detail-fixed")}; if(jQuery(document).scrollTop()>bottom){jQuery(".detail-more").addClass("detail-bottom");}else{jQuery(".detail-more").removeClass("detail-bottom")}; }; </script> <div class="layout footer"> <div class="container"> <div class="foot-about"> <strong>我们是谁</strong> <img src="/skin/images/logo-foot.png" /> <br /> <br /> <p>龙图软件是非盈利开源组织团队，专注于互联网软件系统开发的品牌。提供微信公众号开发、APP软件开发、电商直播系统、微信小程序开发、微商管理软件、微信分销系统、及各种热门商业模式软件系统定制开发服务。<br /> <br /> </p> <br /> <p align="right"><a href="/plus/list-9.html">了解详情 →</a></p> <br /> </div> <div class="foot-case"> <strong>合作案列</strong> <ul class="foot-img"> <li class="opacity"><a href="/plus/view-99-1.html"><img src="/uploads/allimg/180209/2-1P209134402226-lp.jpg" width="125" height="98"/></a></li> <li class="opacity"><a href="/plus/view-98-1.html"><img src="/uploads/allimg/180209/2-1P20Z94431314-lp.jpg" width="125" height="98"/></a></li> <li class="opacity"><a href="/plus/view-96-1.html"><img src="/uploads/allimg/180208/2-1P20Q45P4430-lp.jpg" width="125" height="98"/></a></li> <li class="opacity"><a href="/plus/view-95-1.html"><img src="/uploads/allimg/180208/2-1P20PG551447-lp.jpg" width="125" height="98"/></a></li> </ul> <br /> </div> <div class="foot-contact"> <strong>联系我们</strong> <h4>微信小程序-企业公众号微信小程序开发制作-APP软件开发工具和方法【izTak.com】</h4> <br /> <br /> <p><span><img src="/skin/images/f1.png" /></span> 北京市海淀区东北旺西路8号</p> <p><span><img src="/skin/images/f2.png" /></span> 010-56218858</p> <p><span><img src="/skin/images/f3.png" /></span> kefu@iztak.com</p> <br /> </div> <div class="foot-follow"> <strong>关注我们</strong> <p> <img src="/skin/images/weixin.png" width="119" height="119" title="微信小程序-企业公众号微信小程序开发制作-APP软件开发工具和方法【izTak.com】" alt="微信小程序-企业公众号微信小程序开发制作-APP软件开发工具和方法【izTak.com】" /> </p> <p> 微信扫一扫<br /> 现在联系我们 </p> <br /> </div> </div> </div> <div class="layout copyright"> <img src="/skin/images/top.jpg" class="backtop" /> <div class="container"> <p class="copy-right">© Copyright ©2004-2092 iztak.com 免费开源. All Rights Reserved   开源非盈利网站</p> <p class="copy-nav"> <a href="/plus/list-9.html">关于我们</a> <a href="/plus/list-11.html">资讯&分享</a> <a href="/plus/list-10.html">联系我们</a> <a href="javascript:void(0);">加入我们</a> <a href="#" target="_blank">微信平台</a> </p> <img align="top" src="/skin/images/html5tel.jpg" /> </div> </div> <script src="/skin/js/jquery.js"></script> <script src="/skin/js/app.js"></script> <!--[if lt IE 9]><script src="/skin/js/ie8.js"></script><![endif]--> <script type="text/javascript"> $(function(){ $('#banner').carousel({ 'auto':'true', 'triggers':'#bpoint', 'scroll':500 }); $('#icase').carouselx({ 'auto':'true', 'triggers':'#cpoint', 'scroll':500 }); $(window).load(function(){ var h1=$('#banner-body li').outerHeight(); var h2=$('#case-body .item').outerHeight(); $('#banner-body').css('height',h1); $('#case-body').css('height',h2); }); }); </script> </body> </html>