手揣网教程/应用软件/内容

微信小程序开发(5)名片盒「我」的页面详细说明

应用软件2024-04-03 阅读
[摘要]用户有多张名片,需要左右切换查看,往下切换是菜单按钮。 这里需求两处滑动,用到了微信提供给我们的滑动组件 swiper,并且进行了嵌套使用,第一层是名片展示与菜单按钮的上下滑动, 第二层是名片展示的...
用户有多张名片,需要左右切换查看,往下切换是菜单按钮。 这里需求两处滑动,用到了微信提供给我们的滑动组件 swiper,并且进行了嵌套使用,第一层是名片展示与菜单按钮的上下滑动, 第二层是名片展示的左右滑动(支持互相嵌套使用的,可以放心使用)。

微信小程序开发(5)名片盒「我」的页面详细说明

Vertical 加上就是纵向滑动,去掉即是左右滑动。整体结构如下所示:

微信小程序开发(5)名片盒「我」的页面详细说明

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

微信小程序开发(5)名片盒「我」的页面详细说明

初始化数据是 nextSlide:

微信小程序开发(5)名片盒「我」的页面详细说明

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

微信小程序开发(5)名片盒「我」的页面详细说明

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

微信小程序开发(5)名片盒「我」的页面详细说明

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

微信小程序开发(5)名片盒「我」的页面详细说明

具体效果可以看到。 点击个人名片进去编辑名片页面,由于需要带参,故而使用的是 wx.navgateTo。

微信小程序开发(5)名片盒「我」的页面详细说明

可以看下效果:

微信小程序开发(5)名片盒「我」的页面详细说明


微信小程序开发(5)名片盒「我」的页面详细说明


最后上点干货:
我们发出第一篇教程的时候有人就注意到这点了,怎么做真实数据交互,下面大家可以了解下。
首先进去是 MD5 加密,requster 交互层。

微信小程序开发(5)名片盒「我」的页面详细说明

怎么引用 MD5.js?当然是模块化 require,被引用的 js 不要忘记 module.exports 出来。
下面是 requester.js 引用 MD5.js。
ApplicationRoot 是服务器地址(配置服务器时在开发设置页面查看 AppID 和 AppSecret,配置服务器域名)。

微信小程序开发(5)名片盒「我」的页面详细说明

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

微信小程序开发(5)名片盒「我」的页面详细说明

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

微信小程序开发(5)名片盒「我」的页面详细说明

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

微信小程序开发(5)名片盒「我」的页面详细说明

可以完整的看下与后台做数据交互的一个请求实现方式如下:
图一是 requester.js 里面的封装。
图二是需要调用数据的页面渲染。

微信小程序开发(5)名片盒「我」的页面详细说明

微信小程序开发(5)名片盒「我」的页面详细说明

大家有什么疑问可以多指点,会在下一章说明一些已知疑问。
应该有一些人喜欢 sublime 编辑器,有人问怎么切换高亮,在你的右下角直接切换成 html 即可。

微信小程序开发(5)名片盒「我」的页面详细说明

【相关推荐】

1. 微信小程序完整源码下载

2. 微信小程序demo:卡卡汽车

3. 简单的左滑操作和瀑布流布局

以上就是微信小程序开发(五)名片盒「我」的页面详解的详细内容,更多请关注php中文网其它相关文章!


小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。

……

相关阅读