转载：第四弹！全球首个微信小程序（应用号）开发教程！通宵吐血赶稿，每日更新！

感谢你们支持！博卡君周末休息了两天，今天又回到战斗状态了。上周五晚上微信放出官方工具和教程了，推荐程序猿小伙伴们都去试一试，结合教程和代码，写写本身的 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 个跳转路由，封装的都很好，并且跳转页面不少牵连到传值之类的，能够达到统一管理也能够避免一些看不到的 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); }); 

中英文信息必填与选填渲染：

这里表单提交数据转换有点复杂（你们根据业务需求来作，没必要花时间研究这里的方法），获取的是数组，按照后台须要的数据格式进行转换传递过去。

今天再回去理下首页 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 就是 # 底部）。

好了，今天更新到这里，下一篇咱们聊聊「微信小程序分组功能开发及其它小功能完善」。我最近白天忙工做，晚上才有时间写一下子教程，没时间在论坛给你们一一回复帖子，你们多来 QQ 群交流吧，很多大神、高手都在群里分享了很多干货，朋友们也能够自由提问交流。

QQ 群号： 371736433（二群） 383863133（三群） 375772941（2000 人总群，已满）

 

转载自：https://my.oschina.net/wwnick/blog/751826

 

欢迎关注微信公众平台：上帝派来改造世界的人