当前位置: 首页 > news >正文

家政服务小程序实战开发教程015-填充用户信息

我们上一篇讲解了立即预约功能,存在的问题是,每次都需要用户填写联系信息。在我们前述篇章中已经介绍了用户注册的功能,在立即预约的时候我们需要把已经填写的用户信息提取出来,显示到表单对应的字段中。本篇我们就讲解一下如何提取已经注册的用户信息。

1 变量的作用域

在首页开发的时候,其实已经新建了一个变量用来保存用户信息。但当时考虑的是只在首页使用,现在如果需要跨页面使用,就需要将变量的作用域改为全局。全局的意思就是所有页面都可以使用

在这里插入图片描述
修改了作用域后,其实是又新建了一个变量
在这里插入图片描述
修改了作用域之后在首页生命周期函数中,我们需要重新改一下代码。

export default {async onAppLaunch(launchOpts) {//console.log('---------> LifeCycle onAppLaunch', launchOpts)//$app.auth.currentUser.openId = "o29js5TnCwiYJayG9AieKzkIlOBg"const userInfo  = await $app.auth.getUserInfo();console.log(userInfo)const result = await app.cloud.callModel({name:'yhxx_5wybupo',methodName:'wedaGetRecords',params:{pageNo:1,pageSize:1,where:[{key:"openid",rel:"eq",val:userInfo.openId}]}})console.log(userInfo.openId)console.log(result)if(result.total>0){$app.dataset.state.user = result.records[0]app.navigateTo({pageId:"index",params:{}})}else{/*app.navigateTo({pageId:"u_jiao_se_xuan_ze",params:{}})*/}},onAppShow(appShowOpts) {//console.log('---------> LifeCycle onAppShow', appShowOpts)},onAppHide() {//console.log('---------> LifeCycle onAppHide')},onAppError(options) {//console.log('---------> LifeCycle onAppError', options)},onAppPageNotFound(options) {//console.log('---------> LifeCycle onAppPageNotFound', options)},onAppUnhandledRejection(options) {//console.log('---------> LifeCycle onAppUnhandledRejection', options)}
}

我们只是修改了变量的路径,全局变量是通过app对象来获取的

2 填充用户信息

代码修改后,程序一加载的时候就会加载用户信息,在新增预约的时候我们只需要将对应字段的输入值绑定到全局变量的具体字段就可以。

先绑定用户的联系地址

在这里插入图片描述
再绑定联系电话
在这里插入图片描述
接着绑定用户信息
在这里插入图片描述
用户信息字段需要隐藏,切换到样式,点击布局旁边的眼睛

在这里插入图片描述

3 跳转到预约成功页面

如果采用了表单容器,提交成功后会跳转到上一个页面,我们修改一下,跳转到预约成功页面。先新建一个预约成功页面
在这里插入图片描述
页面中添加普通容器,里边添加图标和文本组件
在这里插入图片描述
然后设置纵向排列居中对齐即可

4 设置表单容器提交事件

选中表单容器,删除返回上一页事件,新增页面跳转事件,跳转到我们预约成功页面

在这里插入图片描述

总结

我们本篇完善了立即预约功能,填充了用户信息,提交成功后跳转到预约成功页面。下一篇我们介绍一个辅助功能,文章列表及文章详情功能开发。

http://www.lryc.cn/news/13785.html

相关文章:

  • python+selenium使用webdriver启动chrome出现闪退现象解决
  • 新建idea项目
  • Django框架之类视图
  • win11/10+Azure kinect DK配置 VS2019/2017/2015的方法(简单,亲测可以)
  • 子查询的相关例题
  • vue2.0与vue3.0及vue与react区别
  • 【SQL】MySQL秘籍
  • vue-router 的基本用法
  • 图像显著性目标检测
  • 力扣-查找重复的电子邮箱
  • 如何选择正规可靠的ISO认证机构?
  • React源码解读之更新的创建
  • 【程序人生】从土木专员到网易测试工程师,薪资翻3倍,他经历了什么?
  • C++——C++11第二篇
  • 14.最长公共前缀
  • 【免费教程】 SWMM在城市水环境治理中的应用及案例分析
  • SortableJS/Sortable拖拽组件,使用详细(Sortablejs安装使用)
  • Heartbeat+Nginx实验
  • JavaEE|网络编程之套接字 TCP
  • Robot Framework自动化测试---元素定位
  • ASP.NET Core中的路由
  • VBA提高篇_26 Textbox多行_ListBox_ComboBox
  • python环境配置
  • 集算器连接外部库
  • 力扣刷题|216.组合总和 III、17.电话号码的字母组合
  • 机器学习笔记之谱聚类(一)k-Means聚类算法介绍
  • 云原生周刊 | 2023 年热门:云 IDE、Web Assembly 和 SBOM | 2023-02-20
  • python 打包EXE
  • CANopen概念总结、心得体会
  • 【2】MYSQL数据的导入与导出