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

news/2024/7/20 2:22:39 标签: 小程序, javascript, 前端, 微搭, 低代码

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

1 变量的作用域

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

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

javascript">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.niftyadmin.cn/n/82955.html

相关文章

javaFx实现鼠标穿透画布,同时操作画布和桌面,背景透明,类似ppt批注

一、功能需要由来和大致效果 今天,我们要用javaFx来实现一个鼠标穿透画布的功能,该需求来自于在我们的javaFx桌面应用中,需要实现一个悬浮的桌面侧边工具栏,在工具栏中有画笔绘制,批注的功能,能够实现在任何…

[网络工程师]-网络规划与设计-需求分析

1、建网目标分析 建网目标的分析内容包括最终目标分析和近期目标分析。 1.1最终目标分析 最终目标分析内容包括: 网络建设到怎样的规模;如何满足用户需求;采用的是否是TCP/IP;体系结构是Intranet还是非Intranet(即是否为企业网);计算模式是采用传统C/S模式、B/S模式还…

欠缺知识点罗列

UML五种关系的特点 依赖,关联,组合,聚合,泛化。认识UML类关系——依赖、关联、聚合、组合、泛化 - 腾讯云开发者社区-腾讯云 数据结构- 生成树的定义。 每周学点大数据 | No.17最小生成树 - 腾讯云开发者社区-腾讯云 有向图。 …

令人头秃的js隐式转换面试题,你能做对吗

你有没有在面试中遇到特别奇葩的js隐形转换的面试题,第一反应是怎么会是这样呢?难以自信,js到底是怎么去计算得到结果,你是否有深入去了解其原理呢?下面将深入讲解其实现原理。 其实这篇文章初稿三个月前就写好了&…

CS224W课程学习笔记(三):DeepWalk算法原理与说明

引言 什么是图嵌入? 图嵌入(Graph Embedding,也叫Network Embedding) 是一种将图数据(通常为高维稠密的矩阵)映射为低微稠密向量的过程,能够很好地解决图数据难以高效输入机器学习算法的问题。…

2023什么是分销商城系统?营销,核心功能

大家好,我是你们熟悉而又陌生的好朋友梦龙,一个创业期的年轻人 分销商城是指由网络营销运营商提供的,用于协助供给商搭建、管理及运作其网络销售渠道,协助分销商获取货源渠道的平台。简单来说,就是企业应用无线裂变分…

【机器学习】决策树-ID3算法

1.ID3算法 ID3算法利用信息增益进行特征的选择进行树的构建。信息熵的取值范围为0~1,值越大,越不纯,相反值越小,代表集合纯度越高。信息增益反映的是给定条件后不确定性减少的程度。每一次对决策树进行分叉选取属性的时候&#x…

分享三个可以在家做的正规兼职工作,看到就是赚到

你可以在家做正式的兼职工作。在线兼职工作值得考虑,时间相对自由。在线兼职收入可能不如线下滴滴和外卖立竿见影,但仍然可以坚持收入。有些人比工作工资发展得更高。当然,天上不会有馅饼,不劳无获。那么有哪些正规的兼职可以在家…