！博卡君周末睡觉了两天，今天又返回战斗状态了。上周五晚上微信释放出官方工具和教程了，引荐程序猿小伙伴们都去试一试，融合教程和代码，写写自己的 demo 也不俗。闲话不多说道，开始改版！第七章：微信（小程序）编辑名片页面研发编辑名片有两条路径，分成追加名片流程与改动名片流程。

用户手堆追加名片流程：首先函数调用到我们的追加名片页面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 吧，总之还是根据业务市场需求来定：姓名手机必填模块：个人信息模块，必要循环（block）出来：Onload 时我们催促必填与选填数据：requiredGroup必填中文信息、notRequiredGroup选题中文信息、requiredGroupEn必填英文信息、notRequiredGroupEn选题英文信息。

//1. 催促名片对应的公司的中文信息的属性组数据，分成必填和选填//选题项变量以no结尾requester.getOfflineCardInfoGroupFields(userId, cardId,function (res) {//debuggervar 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);});中英文信息必填与选填图形：这里表单递交数据切换有点简单（大家根据业务市场需求来做到，不用花上时间研究这里的方法），提供的是数组，按照后台必须的数据格式展开切换传送过去。今天再行回来理下首页 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 同理。在这里如顶部有些菜单栏的话，你就要留意好布局了，不然不会经常出现向上位移这个菜单栏的高度，只不过你只要和字母索引同级下才可防止此问题（这里的顶部菜单以模板分离出来过来了，分离出来模板的时候需注意下，必须在这里初始化模板的一些数据不会经常出现过热，明确没之后深入研究下去）。函数调用功能基本构建（other就是 # 底部）。

好了，今天改版到这里，下一篇我们聊聊「微信小程序分组功能研发及其它小功能完善」。我最近白天整天工作，晚上才有时间写出一会儿教程，没有时间在论坛给大家一一恢复帖子，大家多来 QQ 群交流吧，不少大神、高手都在群里共享了不少干货，朋友们也可以权利发问交流。原创文章，予以许可禁令刊登。下文闻刊登须知。

本文来源：gd55光大在老品牌-www.norafar.com