全球首个微信小程序应用号开发教程4VIP专享VIP免费

第七章：微信小程序编辑名片页面开发编辑名片有两条路径，分为新增名片流程与修改名片流程。用户手填新增名片流程：首先跳转到我们的新增名片页面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){//debuggervaruserName=res.card.userName;varmobile=res.card.mobile;varrequiredGroup=res.requiredGroupCh;varnotRequiredGroup=res.notRequiredGroupCh;varrequiredGroupEn=res.requiredGroupEn;varnotRequiredGroupEn=res.notRequiredGroupEn;varreqLen=requiredGroup.fields.length;varnreqLen=notRequiredGroup.fields.length;varreqLenEn=requiredGroupEn.fields.length;varnreqLenEn=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。首先名片列表，名片上的字母...