V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
bokajun
V2EX  ›  微信

第四弹!全球首个微信应用号开发教程!通宵吐血赶稿,每日更新!

  •  
  •   bokajun · 2016-09-26 17:59:52 +08:00 · 1634 次点击
    这是一个创建于 2982 天前的主题,其中的信息可能已经有所发展或是发生改变。

    感谢大家支持!博卡君周末休息了两天,今天又回到战斗状态了。上周五晚上微信放出官方工具和教程了,推荐程序猿小伙伴们都去试一试,结合教程和代码,写写自己的 demo 也不错。

    闲话不多说,开始更新!

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

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

    用户手填新增名片流程:

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

    好了,今天更新到这里,下一篇我们聊聊「微信小程序分组功能开发及其它小功能完善」。我最近白天忙工作,晚上才有时间写一会儿教程,没时间在论坛给大家一一回复帖子,大家多来 QQ 群交流吧,不少大神、高手都在群里分享了不少干货,朋友们也可以自由提问交流。

    QQ 群号: 371736433 (二群) 383863133 (三群) 375772941 ( 2000 人总群,已满)

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1024 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 20:10 · PVG 04:10 · LAX 12:10 · JFK 15:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.