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

编辑名片有两条路径,分为新增名片流程与修改名片流程。

用户手填新增名片流程:

首先跳转到我们的新增名片页面 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 就是 # 底部)。

好了,今天更新到这里,下一篇我们聊聊「微信小程序分组功能开发及其它小功能完善」。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏社区的朋友们

爬虫实战 : 爬虫之 web 自动化终极杀手(下)

最近写了好几个简单的爬虫,踩了好几个深坑,在这里总结一下,给大家在编写爬虫时候能给点思路。本次爬虫内容有:静态页面的爬取。动态页面的爬取。web 自动化终极爬虫...

1.2K1
来自专栏无原型不设计

Mockplus教程:分分钟搞定APP首页原型设计

Mockplus是一款快速原型设计工具,支持包括APP原型在内的多种原型与线框图设计。除了快速,Mockplus广受欢迎更因为它极低的上手门槛。今天小编就为大...

2785
来自专栏枕边书

用HTML/JS/PHP方式实现页面延时跳转

WEB开发中经常会遇到页面跳转或延时跳转的需求,掌握各种页面跳转方式非常必要。 以下是我总结有用HTML/JS/PHP三类方式实现跳转的方法,例子皆为三秒后跳转...

2058
来自专栏LeoXu的博客

[翻译]VelocityLayoutServlet (VLS) 综观

这一个基本的VelocityViewServlet的一个扩展。它为基于Velocity Tools 的工程项目提供了一个简单的布局控制和定制的错误显示屏幕。Ve...

541
来自专栏木宛城主

ASP.NET MVC 随想录—— 使用ASP.NET Identity实现基于声明的授权,高级篇

在这篇文章中,我将继续ASP.NET Identity 之旅,这也是ASP.NET Identity 三部曲的最后一篇。在本文中,将为大家介绍ASP.NET ...

1978
来自专栏前端说吧

Html2canvas - 微信中长按存图 - 将h5活动结果保存到本地

 现在有很多在微信里流行的h5活动页。这些小h5大部分都是简单的交互然后得出一个abcd早就拟定好的结果,根据你的选项分几种情况,最终得到其中一个作为你测试的答...

892
来自专栏salesforce零基础学习

salesforce 零基础学习(二十五)PickList简单联动操作

有的时候,项目需要一些联动的操作,比如省和市之间的联动,不同的省应该显示不同的城市。 操作步骤如下: 1.新建provice字段,并且初始化相关的值 ? 2.新...

1889
来自专栏一个会写诗的程序员的博客

《React极简教程》第一章 Hello,World!React 第一个实例:Hello,World!react.min.jsreact-dom.min.jsbabel.min.jsReact.ren

React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。 Rea...

712
来自专栏.Net移动开发

Smobiler 4.4 更新预告 Part 1(Smobiler能让你在Visual Studio上开发APP)

在4.4版本中,大家对产品优化的一些建议和意见进行了相应的优化和修复,同时,还新增了一些令人激动的功能和插件。

773
来自专栏企鹅号快讯

8.实战篇_关于前端路由

写在前面的话:有的读者提意见“文字太多,图片太少,不活泼可爱”,我已经尽力了。 1.一张图理解“页面路由” 这就是页面路由,很古老的J2EE开发,一般一个页面路...

1997

扫码关注云+社区