微信小程序开发教程第六章:「我」的页面开发

微信小程序「我」的页面效果图与需求:

用户有多张名片,需要左右切换查看,往下切换是菜单按钮。

这里需求两处滑动,用到了微信提供给我们的滑动组件 swiper,并且进行了嵌套使用,第一层是名片展示与菜单按钮的上下滑动,第二层是名片展示的左右滑动(支持互相嵌套使用的,可以放心使用)。

Vertical 加上就是纵向滑动,去掉即是左右滑动。

整体结构如下所示:

点击事件绑定的是数据切换方式,因为需要支持多次点击切换。

初始化数据是 nextSlide:

再看下 nextSlide 事件。currentSlide 是当前页面的 index,改变它即可完成切换效果,可以看上图初始化数据时设置了 cs 是 0。

因而赋值当前 data.cs+1 即可,再把绑定点击事件 clickNext 切换成 nextSlideAgain。

再看下 nextSlideAgain 事件,执行的减去 1 个索引,实现多次点击切换效果。

具体效果可以看到。

点击个人名片进去编辑名片页面,由于需要带参,故而使用的是 wx.navgateTo。

可以看下效果:

最后上点干货:

我们发出第一篇教程的时候有人就注意到这点了,怎么做真实数据交互,下面大家可以了解下。

首先进去是 MD5 加密,requster 交互层。

怎么引用 MD5.js?当然是模块化 require,被引用的 js 不要忘记 module.exports 出来。

下面是 requester.js 引用 MD5.js。

ApplicationRoot 是服务器地址(配置服务器时在开发设置页面查看 AppID 和 AppSecret,配置服务器域名)。

Require.js 这里 module.exports 是暴露方法出去。

这时候在全局 app.js 里面引入 require.js 映射到全局 global,这个 global 是全局的。

这时候那个页面需要那个页面就直接去接受吧,模块化是不是很好用?

可以完整的看下与后台做数据交互的一个请求实现方式如下:

图一是 requester.js 里面的封装。

图二是需要调用数据的页面渲染。

大家有什么疑问可以多指点,会在下一章说明一些已知疑问。

应该有一些人喜欢 sublime 编辑器,有人问怎么切换高亮,在你的右下角直接切换成 html 即可。

下一章:微信小程序编辑名片页面开发(涉及要点:检索、排序、滑动及页面交互)。

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏沈唁志

怎么使用WordPress小工具添加新浪微博秀、一键关注等按钮

怎么使用WordPress小工具添加新浪微博秀、一键关注等按钮?其实这个也不算什么稀奇了,就是直接使用新浪微博的微博组件

1042
来自专栏君赏技术博客

写一下MAC不错的工具集

##这款软件可以很快的从当前文件夹打开控制台到当前的路径,可以防止小图标到finder的小图标,貌似现在不可以放置了

1443
来自专栏CSDN技术头条

实战小程序网上商城

最早小程序在微信平台上成名,手握 10 亿月活用户的微信,很快成为小程序创业者的掘金之地。巨头的嗅觉敏锐,支付宝、百度随即跟进,今日头条也开始内测小程序,几大平...

1443
来自专栏偏前端工程师的驿站

Eclipse魔法堂:修改主题

一、前言                                   习惯黑色主题,而Eclipse默认的白底主题显然不是我的菜,下面一起来修改主题吧!...

1776
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native升级指南|v0.40+升级适配经验与心得

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 告诉大家一个好消息,为大家精心准备的React N...

3638
来自专栏小程序之家

如何入门小程序开发

在上一篇教程中,我们教大家使用微信官方Demo快速搭建了一个小相册,并学会了如何安装开发者工具,如何创建小程序,如何做服务端配置。并利用腾讯云COS实现相册上传...

8.3K7
来自专栏ZKEASOFT

纸壳CMS 3.0升级.Net Core 2.1性能大提升

微软发布了.Net Core 2.1正式版,纸壳CMS也在第一时间做了升级,并做了一系列的优化和调整,性能大幅提升,并解决了一些历史遗留问题,添加了一些新功能。

2573
来自专栏XAI

微信最新自定义菜单事件

自定义菜单针对开发者增加调起扫一扫、发图片、发地理位置等能力         自定义菜单作为能够帮助公众号丰富界面,让用户更好更快地理解公众号的重要功能,现在针...

2068
来自专栏腾讯开源的专栏

【开源公告】高性能的图片框架 LKImageKit 正式开源

LKImageKit LKImageKit 是一个高性能的图片框架,包括了图片控件,图片下载、内存缓存、磁盘缓存、图片解码、图片处理等一系列能力。合理的架构和...

3594
来自专栏CSDN技术头条

小程序开发:腾讯、阿里、百度、头条都在抢!

最早小程序在微信平台上成名,手握 10 亿月活用户的微信,很快成为小程序创业者的掘金之地。巨头的嗅觉敏锐,支付宝、百度随即跟进,今日头条也开始内测小程序,几大平...

902

扫码关注云+社区