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

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

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

这里需求两处滑动,用到了微信提供给我们的滑动组件 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 条评论
登录 后参与评论

相关文章

来自专栏Django中文社区

真正的 Django 博客首页视图

在此之前我们已经编写了 Blog 的首页视图,并且配置了 URL 和模板,让 Django 能够正确地处理 HTTP 请求并返回合适的 HTTP 响应。不过我们...

3288
来自专栏Python自动化测试

python接口测试之token&session处理(十三)

在python接口测试之token&session处理(十二)中我们介绍了cookie,以及session和使用postman怎么获取token这些,本小节我...

562
来自专栏前端进阶之路

带你五步学会Vue SSR

SSR大家肯定都不陌生,通过服务端渲染,可以优化SEO抓取,提升首页加载速度等,我在学习SSR的时候,看过很多文章,有些对我有很大的启发作用,有些就只是照搬官网...

874
来自专栏余生开发

vue-cli脚手架使用

        components:{App}//注册的组件 名称来自import引入时的名字

774
来自专栏ytkah

帝国cms文章页调用当前文章URL如何操作?

  前面我们讨论过dedecms文章页调用地址(当前文章URL)如何操作,作为同台竞技的帝国cms也能在文章页调用当前文章URL吗?答案是肯定的!那就随ytka...

2514
来自专栏技术专栏

springboot static静态资源访问不到及NoHandlerFoundException没有出发的感悟

就可以让404抛出NoHandlerFoundException了,能抛出就能捕获,试了下的确很管用

1113
来自专栏IMWeb前端团队

基于vue2.0+vuex+localStorage开发的本地记事本

本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本。兼容PC端和移动端。 在线预览地址:DEMO 功能...

2356
来自专栏Jerry的SAP技术分享

如何创建一个新浪微博应用以及获得Access token

打开网页http://open.weibo.com/wiki/%E9%A6%96%E9%A1%B5

434
来自专栏小狼的世界

Codeigniter中对核心类的扩展

Codeigniter框架提供了实现多个应用Application的方法,如参考资料[2]中描述的,这种方法实际上是在网站目录下存在多个入口文件和Applica...

692
来自专栏Kevin-ZhangCG

[ SSH框架 ] Struts2框架学习之一

2236

扫码关注云+社区