微信小程序实例教程（三）

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

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

用户手填新增名片流程：

首先跳转到我们的新增名片页面 1 需要传递用户的当前 userId，wx.navigateTo 带值跳转。Manual 为 true 设置用户走的是新增路线。

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

取到 userId。

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

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

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

其中 modalHidden2 是模态框开关。

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

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

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

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

设置的直接是背景图片。

提交表单与跳转。

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

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

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

实际渲染效果可以看到。

/*********************************************************************

微信小程序全套视频教程下载地址：http://pan.baidu.com/s/1gf1KLEj

本套视频教程包含了微信小程序开发的基础知识，特别适合学习微信小程序开发入门使用，请按照顺序观看学习。

本套教程原来销售199元，现免费奉送，所有内容都是笔者亲自录制。

需要课程讲解中用到的示例源码请关注微信公众号：“微little程序”，按照提示获取源码。关注成功后，也可直接点击公众号中的“视频教程”菜单，详细了解获取配套示例源码的方式。

拿到示例源码后，自己再做尝试，学习会更有效果。

也可扫描下方二维码关注该公众号：

******************************************************************************/

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

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

名片图片模块，上传图片暂时还有点问题，这里就是模仿了个跳转组件，比较建议需要跳转的页面还是使用 wx.navigateTo 控制好一点，wx.navigateTo 提供了给我们不同的 3 个跳转路由，封装的都很好，而且跳转页面很多牵连到传值之类的，可以达到统一管理也可以避免一些看不到的 bug 吧，总之还是根据业务需求来定：

姓名手机必填模块：

个人信息模块，直接循环（block）出来：

Onload 时我们请求必填与选填数据：

requiredGroup 必填中文信息
notRequiredGroup 选题中文信息
requiredGroupEn 必填英文信息
notRequiredGroupEn 选题英文信息

// 请求名片对应的公司的中文信息的属性组数据，分为必填和选填

// 选题项变量以 no 开头

requester.getOfflineCardInfoGroupFields(userId, cardId,

function (res) {

//debugger

var userName = res.card.userName;

var mobile = res.card.mobile;

var requiredGroup = res.requiredGroupCh;

var notRequiredGroup = res.notRequiredGroupCh;

var requiredGroupEn = res.requiredGroupEn;

var notRequiredGroupEn = res.notRequiredGroupEn;

var reqLen = requiredGroup.fields.length;

var nreqLen = notRequiredGroup.fields.length;

var reqLenEn = requiredGroupEn.fields.length;

var nreqLenEn = notRequiredGroupEn.fields.length;

self.setData({

userName: userName,

mobile: mobile,

requireFields: requiredGroup.fields,

notRequireFields: notRequiredGroup.fields,

requireFieldsEn: requiredGroupEn.fields,

notRequireFieldsEn: notRequiredGroupEn.fields,

l1: reqLen,

l2: nreqLen + reqLen,

l3: reqLenEn + nreqLen + reqLen

});

self.forceUpdate();

}, function (code, msg) {

console.info("code=" + code + "&msg=" + msg);

});