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

编辑名片存有两条路径，分成追加名片流程与修正名片流程。

用户手填上追加名片流程：

首先重定向至我们的追加名片页面 1 须要传达用户的当前 userId，wx.navigateTo 带值重定向。Manual 为 true 设置用户跑的就是追加路线。

追加名片页面 1 基本布局如下：

挑至 userId。

采用微信自带的 input 组件检验也非常不好用，例如 maxLength 属性，可以管制用户输出长度，例如我这的姓名长度就是最小 5 位，轻易数字 5 即可。

也可以自定义一些检验效果，具体内容可以根据市场需求展开一些检验布局，挑至用户输出的值，展开操作方式。

这里存取了自带的模态侧边提示信息组件。

其中 modalHidden2 就是模态侧边控制器。

另外 proptText 就是须要提示信息的内容。

即使很多输入框也积极支持数据动态发生改变，非常便利。

实际效果，非常便捷，比以前省却很多事情，撰写小程序，辨认出最小的好处可能将就是我们不必回去考量一系列兼容性问题。

最后除了个头像是上载图片，测试了有目前上传至后台服务器还有点问题，必须就是内测版本不太健全引致吧。

设置的轻易就是背景图片。

递交表单与重定向。

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

这时候重定向至编辑页 2 页面，这个页面就是根据用户核对的手机号码辨识至相匹配的公司，页面非常简单，一个数据循环而已，单选框日后可能将还须要美化一下。

同样也就是一些数据存取以及检验效果。

实际图形效果可以看见。

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

修正名片流程效果图与市场需求，修正名片就是一次性把以前核对的个人信息全部图形出，可供用户去改动：

名片图片模块，上载图片暂时还有点问题，这里就是恶搞了个重定向组件，比较建议须要重定向的页面还是采用 wx.navigateTo 掌控不好一点，wx.navigateTo 提供更多了为我们相同的 3 个重定向路由，PCB的都较好，而且重定向页面很多牵连到传值之类的，可以达至统一管理也可以防止一些看不出的 bug 吧，总之还是根据业务市场需求定出：

姓名手机m6模块：

个人信息模块，轻易循环（block）出：

Onload 时我们命令m6与学测数据：

* requiredGroup m6中文信息

* notRequiredGroup 选题中文信息

* requiredGroupEn m6英文信息

* notRequiredGroupEn 选题英文信息

```

//命令名片对应的公司的中文信息的属性组数据，分成m6和学测

//选题项变量以 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);

});

```

中英文信息m6与学测图形：

这里表单递交数据切换有点繁杂（大家根据业务市场需求去搞，不必花掉时间研究这里的方法），以获取的就是数组，按照后台须要的数据格式展开切换传达过去。

今天再回来理下首页 A、B、C 定点重定向功能同时实现方法。

首先就是右边大索引布局以及数据存取，数据存取和名片夹列表上的字母一样，该字母下面存有名片则图形出，没则不须要图形，id同样就是当前字母与右边表明的内容一样：

数据 sort，和 group.name 数据一样：

这里是因为 # 不积极支持设立为 id（就是 id=”#”），故而展开了一个转变。

页面事件：以获取至当前 ID，以及存取数据 toView 为当前 ID。

首先名片列表，名片上的字母索引都在 scroll-view 里面，这个 scroll-view 必须设置不好紧固的高度，设置成 100% 与 100vh 就是违宪的，y 轴的翻转控制器关上，scroll-into-view 须要重定向至它子元素的 id 上。

可以看看下：

这个 group.name==sortmsg，等同于就是 A==A,B==B 同理。

在这里例如顶部有些菜单栏的话，你就要特别注意不好布局了，不然可以发生向上偏转这个菜单栏的高度，其实你只要和字母索引同级下即可防止此问题（这里的顶部菜单以模板拆分过来了，拆分模板的时候需注意下，须要在这里存取模板的一些数据可以发生失灵，具体内容没稳步深入研究下去）。

重定向功能基本同时实现（ohter 就是 # 底部）。