第七章:微信小程序编辑名片页面开发
 拼序网(小程序制作服务商)
编辑名片有两条路径,分为新增名片流程与修改名片流程。
用户手填新增名片流程:
 
首先跳转到我们的新增名片页面 1 需要传递用户的当前 userId,wx.navigateTo 带值跳转。Manual 为 true 设置用户走的是新增路线。
新增名片页面 1 基本布局如下:
取到 userId。
使用微信自带的 input 组件验证也非常好用,如 maxLength 属性,可以限制用户输入长度,如我这的姓名长度是最大 5 位,直接数字 5 即可。
也可以自定义一些验证效果,具体可以根据需求进行一些验证配置,取到用户输入的值,进行操作。
这里绑定了自带的模态框提示组件。
其中 modalHidden2 是模态框开关。
另外 proptText 是需要提示的内容。
即使很多输入框也支持数据动态改变,非常方便。
实际效果,非常快捷,比以前省去很多事情,编写小程序,发现最大的好处可能就是我们不必去考虑一系列兼容性问题。
最后还有个头像上传图片,测试了下目前上传到后台服务器还有点问题,应该是内测版本不太完善导致吧。
设置的直接是背景图片。
提交表单与跳转。
提交表单使用的是自带的 bindsubmit 事件组件,在 button 组件上添加 formType=”submit” 即可,还有点需注意的是使用表单提交功能时 input 需加上 name 属性,这个传递方式是以键值对的形式传递的。
这时候跳转到编辑页 2 页面,这个页面是根据用户填写的手机号码识别到匹配的公司,页面非常简单,一个数据循环而已,单选框日后可能还需要美化一下。
同样也是一些数据绑定以及验证效果。
实际渲染效果可以看到。

/*********************************************************************

微信小程序全套视频教程下载地址:http://pan.baidu.com/s/1gf1KLEj

本套视频教程包含了微信小程序开发的基础知识,特别适合学习微信小程序开发入门使用,请按照顺序观看学习。

本套教程原来销售199元,现免费奉送,所有内容都是笔者亲自录制。

需要课程讲解中用到的示例源码请关注微信公众号:“微little程序”,按照提示获取源码。关注成功后,也可直接点击公众号中的“视频教程”菜单,详细了解获取配套示例源码的方式。

拿到示例源码后,自己再做尝试,学习会更有效果。

也可扫描下方二维码关注该公众号:

******************************************************************************/

这个和第一个编辑页面逻辑基本不相上下,一些基本验证与提交,这里就讲到前面两步骤即可,编辑页面 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 就是 # 底部)。

微信小程序微信公众号“微little程序”,扫码关注:

交流群号:526013379

微信小程序社区:www.xiaochengxu-wx.com

 
 

转载于:https://www.cnblogs.com/niejunchan/p/5918874.html

微信小程序实例教程(三)相关推荐

  1. 从零开始的微信小程序入门教程

    之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践整理出一个较为入门且不是很厚的教程, ...

  2. 微信小程序实例开发教程之知乎新闻

    前面写了几篇文章,简单地介绍了一下小程序.相信完整看下来的读者,对微信小程序应该有了一定的认识.学习,需要边学边练,这样掌握起来快,反正我喜欢这么去学习一样新的技术.学而不思则罔,思而不学则殆嘛.下面 ...

  3. 微信小程序开发语言(微信小程序开发教程)详细步骤

    微信小程序开发语言 开发微信小程序用什么语言 1.微信小程序开发所需要的语言比较特别,首先介绍一下需要使用到的文件类型大致分为:WXML(WeiXin Mark Language 微信标记语言).WX ...

  4. 微信小程序开发教程:项目一微信小程序入门 课后习题

    <微信小程序开发教程>主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一.单选题 二.多选题 三.判断题 四.填空题 五.简答题 1.请简述微信开发者工具中调试器功能. 2.请简述微信小 ...

  5. 微信小程序开发教程手册文档

    微信小程序开发教程文档 微信小程序是什么?微信小程序如何开发?微信小程序开发教程有哪些?本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程 ...

  6. 微信小程序开发教程:项目四组件布局 课后习题

    <微信小程序开发教程>主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一.单选题 二.多选题 三.判断题 四.填空题 五.简答题 1.请简单地介绍微信小程序flex布局的使用. 2.如何 ...

  7. 微信小程序开发教程:项目三表单组件 课后习题

    <微信小程序开发教程>主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一.单选题 二.多选题 三.判断题 四.填空题 五.简答题 1.请简单描述搭建node后台服务器的过程. 2.在调查 ...

  8. 微信小程序开发教程:项目二微信小程序开发基础 课后习题

    <微信小程序开发教程>主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一.单选题 二.多选题 三.判断题 四.填空题 五.简答题 1.请简单描述页面样式的单位rpx与px的关系. 2.简 ...

  9. 微信小程序开发教程:项目六媒体组件 课后习题

    <微信小程序开发教程>主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一.单选题 二.多选题 三.判断题 四.填空题 五.简答题 请简单列举音频接口API创建的InnerAudioCon ...

  10. 微信小程序实例源码大全demo下载

    怎么本地测试微信小程序实例源码 1.下载源码 2.打开微信开发者工具 3.添加项目->选择本项目目录->编译执行 微信小程序实例源码大全 微信小程序游戏类demo:识色:从相似颜色中挑选不 ...

最新文章

  1. [SCOI2005]王室联邦
  2. 如何快速的给你的项目添加icon图标
  3. python sys模块 输入输出 错误流
  4. python3的3D开发-基于blender(1)
  5. ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值
  6. 开源JVM Sampling Profiler
  7. 线性表----循环链表和静态链表
  8. 查看一个定义的方法在哪些地方被使用过(vs2008)
  9. Mysql的日期查询方法
  10. 从 Ops 到 NoOps,阿里文娱智能运维的关键:自动化应用容量管理
  11. iOS NSData简单解析
  12. 云计算IaaS核心技术全景指南
  13. java基础语法(三)--运算符、控制语句
  14. python余弦定理_基于Python计算气弹簧选型
  15. caffe的使用方法
  16. 【STM32利用CuBe MX生成HID设备】1-熟悉软件以及生成一个8键的游戏控制器
  17. 着色 Shading
  18. matlab神经网络应用设计,神经网络及其matlab实现
  19. 广东电网携手华为,为“数字电网”建设提供有力支撑
  20. H3C链路二层聚合教程

热门文章

  1. 为什么鼠标光标不是一条竖线而是一个小方块
  2. Html查看dcm,DICOM图像浏览器(.dcm图像查看器)
  3. (2)香橙派+apache2与php+天猫精灵=自建平台语音支持--香橙派操作系统安装
  4. Linux radius客户端,FreeRadius客户端基础配置及测试
  5. Python打字练习程序
  6. 基于STM32设计的WiFi语音播报日程表
  7. 数字信号处理 史林 课本答案---第三章
  8. LU分解 LDL分解 Cholesky分解
  9. 修改pdf文件的软件
  10. 阿里巴巴移动技术 2021 年终盘点