玩转微信应用号,「小程序」开发实操指南第四弹

发布时间:2017-09-01 02:03:59

玩转微信应用号,「小程序」开发实操指南第四弹

钛媒体注:钛媒体作者博卡君对于“应用号的最终形态”与“怎样将一个「服务号」改造成为「小程序」”的话题上,有着自己的独特的理解。他想要用第三方工具的实例,来演示开发过程。今天,他为我们带来《微信小程序编辑名片页面开发》的内容。感兴趣的朋友,也不要错过此前钛媒体发布的第一弹、第二弹和第三弹中的精彩内容。

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

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

用户手填新增名片流程:

玩转微信应用号,「小程序」开发实操指南第四弹

玩转微信应用号,「小程序」开发实操指南第四弹

玩转微信应用号,「小程序」开发实操指南第四弹

首先跳转到我们的新增名片页面 1 需要传递用户的当前 userId,wx.navigateTo 带值跳转。Manual 为 true 设置用户走的是新增路线。

玩转微信应用号,「小程序」开发实操指南第四弹

新增名片页面 1 基本布局如下:

玩转微信应用号,「小程序」开发实操指南第四弹

取到 userId。

玩转微信应用号,「小程序」开发实操指南第四弹

使用微信自带的 input 组件验证也非常好用,如 maxLength 属性,可以限制用户输入长度,如我这的姓名长度是最大 5 位,直接数字 5 即可。

玩转微信应用号,「小程序」开发实操指南第四弹

也可以自定义一些验证效果,具体可以根据需求进行一些验证配置,取到用户输入的值,进行操作。

玩转微信应用号,「小程序」开发实操指南第四弹

这里绑定了自带的模态框提示组件。

玩转微信应用号,「小程序」开发实操指南第四弹

其中 modalHidden2 是模态框开关。

另外 proptText 是需要提示的内容。

即使很多输入框也支持数据动态改变,非常方便。

玩转微信应用号,「小程序」开发实操指南第四弹

实际效果,非常快捷,比以前省去很多事情,编写小程序,发现最大的好处可能就是我们不必去考虑一系列兼容性问题。

玩转微信应用号,「小程序」开发实操指南第四弹

最后还有个头像上传图片,测试了下目前上传到后台服务器还有点问题,应该是内测版本不太完善导致吧。

玩转微信应用号,「小程序」开发实操指南第四弹

设置的直接是背景图片。

玩转微信应用号,「小程序」开发实操指南第四弹

提交表单与跳转。

提交表单使用的是自带的 bindsubmit 事件组件,在 button 组件上添加 formType=”submit” 即可,还有点需注意的是使用表单提交功能时 input 需加上 name 属性,这个传递方式是以键值对的形式传递的。

玩转微信应用号,「小程序」开发实操指南第四弹

这时候跳转到编辑页 2 页面,这个页面是根据用户填写的手机号码识别到匹配的公司,页面非常简单,一个数据循环而已,单选框日后可能还需要美化一下。

玩转微信应用号,「小程序」开发实操指南第四弹

同样也是一些数据绑定以及验证效果。

玩转微信应用号,「小程序」开发实操指南第四弹

实际渲染效果可以看到。

玩转微信应用号,「小程序」开发实操指南第四弹

这个和第一个编辑页面逻辑基本不相上下,一些基本验证与提交,这里就讲到前面两步骤即可,编辑页面3也是同理,这里不再过多啰嗦。

修改名片流程效果图与需求,修改名片是一次性把以前填写的个人信息全部渲染出来,供用户来改动:

玩转微信应用号,「小程序」开发实操指南第四弹

上一篇:手把手教你开发微信应用号第二弹 下一篇:没有了

Copyright (c) 2013-2017 WeiXinBangBang.com 微信帮帮 版权所有|助手互动旗下SEOVIP提供SEO 优化服务 |网站地图|sitemap