当前位置:文档之家› 《微信小程序项目实战》教学课件—07健身我的模块实现

《微信小程序项目实战》教学课件—07健身我的模块实现


获取信息
企业级卓越人才培养(信息类专业集群)
在微信小程序中用户信息指的是进入当前小程序的微信用户的相关信息,包 括用户的昵称、头像及所在地区等。 获取用户信息的方法是在函数中调用wx.getUserInfo(OBJECT)方法,用户 信息可在调用成功后执行的success函数的userInfo参数中获取。
功能描述
企业级卓越人才培养(信息类专业集群)
01
02
03 04
使用wx.getUserInfo(OBJECT)方法进行用户信息的获取 使用page.onShareAppMessage(options)方法实现转发功能 使用wx.startPullDownRefresh()方法实现下拉刷新
基本框架
企业级卓越人才培养(信息类专业集群)
基本框架
企业级卓越人才培养(信息类专业集群)
04 任务技能
任务技能
任务 技能
企业级卓越人才培养(信息类专业集群)
数据交互 下拉刷新 数据存储 获取信息
数据交互
企业级卓越人才培养(信息类专业集群)
数据交互
客户端通过HTTP向服务端发送请求,服务端接收请求并返回数据,客户端根据 返回的数据进行显示。微信小程序中向服务端发送请求需要用到wx.request (object)方法,在使用该方法时需要添加url、data、method等相关的参数
下拉刷新
企业级卓越人才培养(信息类专业集群)
下拉刷新
下拉刷新是通过下拉页面达到重新加载、刷新的效果,在小程序中通常以三
个点的动态效果显示。下拉刷新方法如下表所示
方法 Page.onPullDown 监听下拉刷新
Refresh wx.startPullDown 开始下拉刷新
Refresh() wx.startPullDown 停止下拉刷新
06 任务总结
任务总结
任务技能 任务描述
任务实施
企业级卓越人才培养(信息类专业集群)
任务总结
4
调用微信登录方法(wx.login(object))可以获取唯 一标识符以及成功时返回的参数。 当用户一段时间不使用小程序,用户的登录状态可能 失效,小程序提供了(wx.checkSession(object))方 法用于检测用户的登录状态
在小程序中转发功能主要是依赖page.onShareAppMessage(options)函数方 法实现的 设置转发内容需要用到return,return包含的属性包括标题title、路径path等
任务实施
企业级卓越人才培养(信息类专业集群)
输入标题
点击输入说明文字
输入标题
点击输入说明文字
输入标题
点击输入说明文字
第一步:使用view标签在页面中添加更换头像部分, 第二步:使用wx:for渲染中间和下边的列表并对其相应样式进行添加 第三步:对列表中的联系我们的项绑定对应的事件并对页面底部的退出账号的按钮进行添加 第四步:使用wx.makePhoneCall()方法对拨打电话的功能进行添加
用户信息
1
系统信息
2
微信小程序中可以获取的系统信息包括一些设备信息比如设备的品牌、型号、 屏幕大小等,还有一些与微信客户端相关的信息比如微信版本号、字体大小等。 获取系统信息的方法也分为同步和异步两种 同步:wx.getSystemInfoSync() 异步:wx.getSystemInfo(OBJECT)
掌握小程序的据交互
的数据交互和下拉刷新等最常用
的功能,并能熟练掌握小程序存
储数据的思路及存储流程,具有 03
熟练使用小程序常用功能的能力。
掌握小程序的数据存储
在任务实现过程中:
04 具有熟练使用小程序常用功能的能力
02 学习路径
学习路径
企业级卓越人才培养(信息类专业集群)
03 任务描述
任务描述
05 任务实施
任务实施
企业级卓越人才培养(信息类专业集群)
输入标题
点击输入说明文字
输入标题
点击输入说明文字
输入标题
点击输入说明文字
第一步:在页面中添加个人信息部分,包括头像、昵称、账号并在.js文件中获取用户信息 第二步:设置个人信息部分样式,包括头像大小、昵称容器的flex布局等 第三步:使用wx:for循环添加下边的列表内容,设置对应的样式并添加对应的页面跳转事件 第四步:对右上角图标添加弹出菜单列表的事件并对列表中的扫一扫和地理定位的功能进行添加
1 2 3
企业级卓越人才培养(信息类专业集群)
情景导入 功能描述 基本框架
情境导入
企业级卓越人才培养(信息类专业集群)
在常见的App中,都会有类似于个人中心的模块,这是为了用户能够更方便地操作、浏 览自己的相关信息。因此,研发团队认为在keepFit健身中添加我的模块是非常重要的。在我 的模块中,用户能够方便、快速地找到自己选择的训练教程、班级、喜欢的音乐及个人信息 等。本项目主要通过keepFit健身我的模块来学习微信小程序的数据交互与获取信息。
企业级卓越人才培养(信息类专业集群)
01 学习目标 02 学习路径 03 任务描述
04 任务技能 05 任务实施 06 任务总结
01 学习目标
学习目标
学习 目标
企业级卓越人才培养(信息类专业集群)
01 了解小程序我的界面信息
通过实现KeepFit健身我的模块,
了解在小程序中个人信息显示的
界面拥有哪些信息,掌握小程序 02
获取信息
企业级卓越人才培养(信息类专业集群)
网络状态
3
转发信息
5
小程序中可以通过调用wx.getNetworkType(OBJECT)方法获取网络状 态,调用wx.onNetworkStatusChange(CALLBACK)方法监听网络变 化获取网络类型。两个方法共同实现网络状态的获取及监听
登录
Refresh()
描述
数据存储
企业级卓越人才培养(信息类专业集群)
数据存储
小程序中的数据存储是以键值对的形式把数据保存在一个在不同页面都可以 使用的存储空间中。适合缓存的数据多为一些静态数据或频繁交互的数据。 每个小程序都包含10M的本地存储空间。 数据存储方法包括同步和异步两类,以异步方法为例,对数据的操作包括添 加数据wx.setStorage(OBJECT)、获取数据wx.getStorage(OBJECT)、删除 数据wx.removeStorage(OBJECT)等。
相关主题