国际顶级学术会议CIKM2019即将在北京开幕，重量级嘉宾带你一睹人工智能前沿
06-17
雷锋网注：本文包含程序员作者博卡君。
雷锋网已获得作者授权发布。
未经授权禁止转载！本文是第四篇小程序开发教程。
往期文章如下： 重磅|微信应用号，最新小程序开发教程 微信应用号，第二期小程序开发教程 微信应用号，第三期小程序开发教程 感谢您的支持！博卡君周末休息了两天，今天又恢复了战斗状态。
微信上周五晚上发布了官方工具和教程。
我建议所有程序员都尝试一下。
通过结合教程和代码来编写自己的演示也很好。
话不多说，开始更新吧！第七章：微信（小程序）名片编辑页面开发 名片编辑有两种路径，分为添加名片的过程和修改名片的过程。
用户手动填写添加新名片的流程： 一、跳转到我们的新名片页面 1.需要传入用户当前的userId，wx.navigateTo带一个值进行跳转。
手动是真正设置用户走新路线。
新建名片页面1的基本布局如下： 获取userId。
使用微信自带的输入组件验证也非常方便。
例如，maxLength 属性可以限制用户输入的长度。
比如我的名字长度最多为5位，所以就用数字5即可。
还可以自定义一些验证效果。
具体来说，可以根据自己的需求进行一些验证配置，获取用户输入的值，并进行操作。
这里绑定了内置的模态框提示组件。
其中modalHidden2是模态框开关。
另外，proptText就是需要提示的内容。
甚至很多输入框都支持数据的动态变化，非常方便。
实际效果非常快。
比以前省了很多事。
写小程序，我发现最大的好处可能就是我们不用考虑一系列的兼容性问题。
最后是头像上传图片。
经过测试，上传到后端服务器仍然存在一些问题。
应该是beta版本不完整造成的。
背景图片直接设置。
提交表格并跳转。
提交表单使用内置的bindsubmit 事件组件。
只需将 formType="submit" 添加到按钮组件即可。
另外需要注意的是，使用表单提交功能时，输入需要添加name属性。
这种传递方式是 key-value 以正确的形式传递的。
此时跳转到编辑页面2。
该页面根据用户填写的手机号码识别匹配公司。
页面很简单，只是一个数据循环。
单选按钮将来可能需要美化。
还有一些数据绑定和验证作用。
可以看到实际的渲染效果。
其逻辑与第一个编辑页面基本相同。
对于一些基本的验证和提交，我们这里只讲前两个步骤。
编辑第3页也是如此，这里不再赘述。
修改名片流程效果图及要求。
修改名片就是将之前填写的个人信息一次性全部渲染出来供用户修改：名片图片模块，暂时上传图片有些问题，这里模仿了一个跳转组件，推荐的是最好使用wx.navigateTo来控制需要跳转的页面。
wx.navigateTo为我们提供了3种不同的跳转路线，都封装得很好，而且很多跳转页面涉及到传值之类的，可以实现统一管理，也可以避免一些看不见的bug。
总之，要根据业务需求来确定： 姓名和手机 必填模块：个人信息模块，直接循环（屏蔽）出：Onload时我们请求必填和可选数据：requiredGroup必填中文信息，notRequiredGroup主题选择中文信息、requiredGroupEn 必填英文信息，notRequiredGroupEn 选题英文信息。
//1.请求名片对应的公司中文信息的属性组数据，分为必填和可选 //选项变量以无开头 requester.getOfflineCardInfoGroupFields(userId, cardId, function (res) { //debugger var userName = res.card.userName; var requiredGroup = res.requiredGroupCh; var required GroupEn = res.requiredGroupEn; var notRequiredGroupEn = res.notRequiredGroupEn; .length; var nreqLen = notRequiredGroup.fields.length; var reqLenEn = requiredGroupEn.fields.length; self.setData({ userName: userName, mobile, requireFields: requiredGroup.fields, notRequireFields : notRequiredGroup.fields。
l2: nreqLen + reqLen, l3: reqLenEn + nreqLen + reqLen }); self.forceUpdate();函数（代码，味精）{控制台.info（“代码=”+代码+“&msg=”+味精）; ????????????????????????????????????????????????????????????????????????????????????????????????中英文信息的必选和可选渲染：这里的表单提交数据转换有点复杂（根据业务需要即可，这里不用花时间研究方法），得到的是一个数组，即按照后台要求的数据格式转换传递。
今天回过头来处理一下首页A、B、C的定点跳转功能的实现方法。
首先是右侧的小索引布局和数据绑定。
数据绑定与名片列表上的字母相同。
如果信函下面有名片，则会呈现。
如果没有名片，则无需渲染。
id也与当前字母及右侧显示的内容相同： 数据排序与group.name数据相同：这是因为#不支持设置为id（即id="#"） ，因此进行了变换。
Click事件：获取当前ID，并将数据toView绑定到当前ID上。
首先，名片列表和名片上的字母索引都在滚动视图中。
该滚动视图必须设置为固定高度。
设置为%和vh无效。
y轴的滚动开关打开，scroll-into-view需要跳转。
转到其子元素的 id。
你可以看一下：这个group.name==sortmsg就相当于A==A，B==B。
也是如此。
如果这里有一些菜单栏在顶部，你就要注意布局，否则菜单栏的高度会向下偏移。
其实只要和字母索引同级就可以避免这个问题（这里的顶部菜单开头的模板已经分离了，分离模板的时候需要注意，一些数据需要分离）这里绑定的模板就失效了，我就不继续深入研究了）。
跳转功能基本实现了（其他的是#bottom）。
好了，今天的更新就到这里。
下一篇我们会讲“微信小程序分组功能开发及其他小功能改进”。
最近白天工作比较忙，晚上才有时间写教程。
我没有时间一一回复论坛上大家的帖子。
请来QQ群交流。
很多大师、专家在群里分享了很多有用的信息。
朋友们也可以自由提问、交流。
版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，欢迎发送邮件 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
标签：
相关文章
06-18
06-06
06-17
06-21
最新文章
Android旗舰之王的过去与未来
智能手表不被开发、AR眼镜被推迟，Meta的产品经历了一波三折
为什么Cybertruck是特斯拉史上最难造的车？
更新鸿蒙3后，文杰允许你在车里做PPT了
新起亚K3试驾体验：追求“性价比”，韩系汽车仍不想放弃
阿维塔15登场！汽车配备了增程动力，理想情况下会迎来新的对手吗？
马斯克宣布创建 ChatGPT 竞争对手！ OpenAI的CEO给他泼了冷水， GPT-5可能会发生巨大变化
骁龙无处不在，是平台也是生态