应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

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

发布时间:2024-01-17 17:12 浏览次数:194


编辑名片存有两条路径,分成追加名片流程与修正名片流程。


用户手填上追加名片流程:


首先重定向至我们的追加名片页面 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 吧,总之还是根据业务市场需求定出:


姓名手机m6模块:


个人信息模块,轻易循环(block)出:


Onload 时我们命令m6与学测数据:


* requiredGroup m6中文信息


* notRequiredGroup 选题中文信息


* requiredGroupEn m6英文信息


* notRequiredGroupEn 选题英文信息


```


//命令名片对应的公司的中文信息的属性组数据,分成m6和学测


//选题项变量以 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);


});


```


中英文信息m6与学测图形:


这里表单递交数据切换有点繁杂(大家根据业务市场需求去搞,不必花掉时间研究这里的方法),以获取的就是数组,按照后台须要的数据格式展开切换传达过去。


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

TAG标签:
阅读推荐