微信小程序开发教程第五章:微信小程序名片夹详情页开发

今天加了新干货!除了开发日志本身,还回答了一些朋友的问题。 闲话不多说,先看下「名片盒」详情页的效果图:

备注下大致需求:顶部背后是轮播图,二维码按钮弹出模态框信息、点击微信栏、点击存入手机,地址栏需要地图展示,名片分享也是模态框指引。

首先是轮播图,autoplay 自动播放,interval 轮播的时间,duration 切换速度,可以根据自己需求去添加。

Delete:是删除按钮,加载进来是隐藏的,需用户点轮播图进去后,轮播图全屏显示才出来。 noClickImg 与 ClickImg:切换全屏与非全屏轮播图,绑定了点击事件 changeClick 来切换,只是改变样式即可。 Block:图片列表。 Number_img:当前轮播 index(currentNumber),与图片 length 集合(cardnum)。 其中 currentNumber:

//轮播图发生改变时改变数字 //初始化数据 Data:{ currentNumber:1 } slidechange:function(e){ var number = e.detail.current; this.setData({ currentNumber:number+1 }) },

这里可以看到全屏状态下当关闭按钮被点击后 getBackStyle,把 changeClick 切换到 imgFullScrenn 待命。

再次点击返回原样式,

切换后事件又走回到 getBackStyle 了,灵活运用。

刷新下开发者工具可以看到具体效果如下:

详情页可以看到信息基本都是样式一样,可以使用微信提供的循环 block。  下面是详情页里面的个人信息数据,

如果有信息就显示出来,没有数据的不显示,这里使用

//中文信息                var chinaMessage = res.card.groups[0].fields; var personMessage= []                for(var i = 0;i<chinaMessage.length;i++){                 personMessage.push(chinaMessage[i])                }                //为空或者null是不显示判断               for(var k in personMessage){                 if(personMessage[k].value==null || personMessage[k].value==""){                 personMessage[k]["display"] = "none";                 }else{                 personMessage[k]["display"] = "block";                 }                }

具体以 json 数据格式来处理,我们需要做的就是给它绑定 display 的值,然后我们调用即可。

微信此版本的 setData 不支持异步更新数据,故而我们在发生真实网络数据请求时一定要在后面加上 forceUpdata(),强制触发视图渲染,否则会出现很多莫名其妙的 bug。

这里说明下:如是服务器真实数据。

可以看到会报错,可能是 js 的执行顺序,依次往下走,此时网络数据还在请求中。

定义一个变量即可。

当然这里的数据都是 push 上来的。

以下是二维码弹出信息。

这是弹出模态框二维码信息,布好局初始化是none状态。那里需要它直接绑定数据即可:

This.setData({ //模态框名字:”显示?隐藏” })

方法是让它显示。

需要用他的地方调用方法即可。(支持重复调用)

详情页公司位置地图直接调用微信提供的接口实现(群里的 demo 有实现方式)。

可以看下实现的效果:

下一章:微信(小程序)名片盒我的页面开发。

原文链接:https://my.oschina.net/wwnick/blog/750974

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏速成应用小程序开发平台

新手教程--手把手教你从零开始制作一款电商必备的商城小程序

近年来,在电商、新零售趋势的影响下,实体零售商也都在谋求自身的渠道变革,完善消费体验。如今微信已有超过十亿的用户,市场巨大,而微信小程序的开通不仅能够降低品牌...

972
来自专栏我有一个梦想

UE4新手编程之创建C++项目

 虚幻4中常用的按键和快捷键 虚幻4中有一些按键和快捷键很常用,牢记它们并运动到实际的项目开发中,将会大大地提高你的工作效率和使得工作更简便快捷。下面将列举它们...

2166
来自专栏WeTest质量开放平台团队的专栏

Pluto - iOS 上一个高性能的排版渲染引擎

原文链接:http://wetest.qq.com/lab/view/369.html

5316
来自专栏徐江伟的专栏

Vue.js 实战总结

最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑。本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来...

2.7K1
来自专栏前端侠2.0

Angular Elements 组件在非angular 页面中使用的DEMO

      Angular Elements 是伴随Angular6.0一起推出的新技术。它借助Chrome浏览器的ShadowDom  API,实现一种自定义...

2232
来自专栏Material Design组件

Human Interface Guidelines — Widgets

1053
来自专栏思衍 Jax 专栏

企鹅辅导课程详情页毫秒开的秘密 - PWA 直出

随着近几年的前端技术的高速发展,越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例,从性能角度,其最重要的指标...

3749
来自专栏Hongten

pygame系列_百度随心听_完美的UI设计

=====================================================

633
来自专栏知晓程序

开发 | 掌握这 7 个要点,iOS 开发者也能快速入门小程序

1383
来自专栏sunseekers

2018 我所了解的 Vue 知识大全(一)

Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的...

753

扫码关注云+社区