• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >微信小程序 > 微信小程序开发(五)名片盒「我」的页面详解

微信小程序开发(五)名片盒「我」的页面详解

作者:匿名 字体:[增加 减小] 来源:互联网

匿名通过本文主要向大家介绍了微信小程序,名片盒,页面详解等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
用户有多张名片,需要左右切换查看,往下切换是菜单按钮。 这里需求两处滑动,用到了微信提供给我们的滑动组件 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 即可。


【相关推荐】

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

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

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

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 微信小程序跟读 demo代码
  • 微信小程序-GetWeApp聊天室 代码
  • 微信小程序demo 仿手机淘宝
  • 微信小程序 Artand 瀑布流风格 代码demo
  • 微信小程序高仿手机QQ应用程序
  • 微信小程序-小商城前台
  • 微信小程序仿手机淘宝demo代码
  • 微信小程序仿Apple Music demo代码
  • 微信小程序整合一套UI库
  • 微信小程序妹子图片展示demo代码

相关文章

  • 微信小程序路由跳转实例用法总结
  • ES6新特性开发微信小程序(10)
  • 小程序开发基础知识入门
  • 微信小程序 for 循环详解
  • 如何将其他页面的数据存入app.js中
  • 2017年最新的小程序功能--“搜索联想区”
  • 关于微信小程序MD5的方法的解析
  • 微信小程序如何解决后台返回大量多余数据的问题
  • 详解微信小程序登陆流程
  • 小程序开发基础篇之logs页面解析(6)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 微信小程序版知乎日报demo代码
    • 微信小程序开发:在Gulp的基础上构建的工作流程
    • 微信小程序开发之抽屉菜单实例详解
    • 微信小程序组件 marquee实例分享
    • 微信小程序网络请求的封装
    • 如何通过微信小程序实现获取自己所处位置的经纬度坐标的功能
    • 关于微信小程序Page中data数据操作和函数调用的解析
    • 微信小程序开发教程,大多数人都搞错的八个问题
    • js中关于el表达式的使用方法
    • 微信小程序(应用号)简单应用

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有