雷锋网注：本文作者博卡君，一名程序猿。雷锋网(搜索“雷锋网”公众号关注)已获作者授权发布。未经授权拒绝转载！

　　本文为小程序开发教程第四弹，前续文章如下：

　　重磅 | 微信应用号，小程序最新开发教程

　　微信应用号，小程序最新开发教程第二弹

　　微信应用号，小程序开发教程第三弹

　　感谢大家支持！博卡君周末休息了两天，今天又回到战斗状态了。上周五晚上微信放出官方工具和教程了，推荐程序猿小伙伴们都去试一试，结合教程和代码，写写自己的 demo 也不错。

　　闲话不多说，开始更新！

　　第七章：微信（小程序）编辑名片页面开发

　　编辑名片有两条路径，分为新增名片流程与修改名片流程。

　　用户手填新增名片流程：

　　首先跳转到我们的新增名片页面1需要传递用户的当前 userId，wx.navigateTo 带值跳转。

　　Manual 为 true 设置用户走的是新增路线。

　　新增名片页面 1 基本布局如下：

　　取到 userId。

　　使用微信自带的 input 组件验证也非常好用，如 maxLength 属性，可以限制用户输入长度，如我这的姓名长度是最大 5 位，直接数字 5 即可。

　　也可以自定义一些验证效果，具体可以根据需求进行一些验证配置，取到用户输入的值，进行操作。

　　这里绑定了自带的模态框提示组件。

　　其中 modalHidden2 是模态框开关。

　　另外 proptText 是需要提示的内容。

　　即使很多输入框也支持数据动态改变，非常方便。

　　实际效果，非常快捷，比以前省去很多事情，编写小程序，发现最大的好处可能就是我们不必去考虑一系列兼容性问题。

　　最后还有个头像上传图片，测试了下目前上传到后台服务器还有点问题，应该是内测版本不太完善导致吧。

　　设置的直接是背景图片。

　　提交表单与跳转。

　　提交表单使用的是自带的 bindsubmit 事件组件，在 button 组件上添加 formType=”submit”即可，还有点需注意的是使用表单提交功能时 input 需加上 name 属性，这个传递方式是以键值对的形式传递的。

　　这时候跳转到编辑页 2 页面，这个页面是根据用户填写的手机号码识别到匹配的公司，页面非常简单，一个数据循环而已，单选框日后可能还需要美化一下。

　　同样也是一些数据绑定以及验证效果。

　　实际渲染效果可以看到。

　　这个和第一个编辑页面逻辑基本不相上下，一些基本验证与提交，这里就讲到前面两步骤即可，编辑页面 3 也是同理，这里不再过多啰嗦。

　　修改名片流程效果图与需求，修改名片是一次性把以前填写的个人信息全部渲染出来，供用户来改动：