4.2【微信小程序全栈开发课程】个人中心(二)--显示随机语句

简介: 上节课已经将用户的微信头像、微信昵称显示出来了,这节课,我们在微信昵称的下面实现随机语句的显示也就是挑选10条励志的句子,用户每次切换到个人中心页面,都会随机显示这10条句子中的一条

1、添加变量


编辑


//参考代码,无需粘贴
//userinfo:{},
//需要粘贴的部分
quote: ""


2、添加方法


在methods对象中添加方法rankArray,用来生成当前应该显示的语句


methods: {
    //生成随机语句
    rankArray () {
      //Math.random()会生成0-1之间的小数,比如0.48204242025855937
      var a = Math.random() + ""
      //a.charAt(5)取a这个字符串的第6位数,能保证rand1为0-9之间的随机数
      var rand1 = a.charAt(5)
      //创建一个数组对象
      var quotes = new Array
      //将10个励志语句放到数组中
      quotes[1] = '不奋发,则心日颓靡;不检束,则心日恣肆'
      quotes[2] = '自制是一种秩序,一种对于快乐与欲望的控制'
      quotes[3] = '哪怕一点小小的克制,也会使人变得强而有力'
      quotes[4] = '做一个自律的人,像优秀的人学习,然后做好自己'
      quotes[5] = '真正的自由是在所有时候都能控制自己'
      quotes[6] = '每天爱自己多一点!!!'
      quotes[7] = '如果连自己都不能控制,有什么资格去谈自己想要的'
      quotes[8] = '登峰造极的成就源于自律'
      quotes[9] = '自我控制是最强者的本能'
      quotes[0] = '立志言为本,修身行乃先'
      //根据随机数rand1,在数组中找出随机语句,并赋值到quote上面
      this.quote = quotes[rand1]
    }
},


3、显示随机语句


编辑template部分,替换语句


<!-- 原先语句-->
<p class="notice">这里将用来显示随机语句</p>
<!-- 替换成 -->
<p class="notice">{{quote}}</p>


4、切换页面调用语句


每次切换页面都要切换随机语句就不能用mounted了,这里要用到是onShow,小程序的生命周期


onShow () {
  const userinfo = wx.getStorageSync('userinfo')
  //如果缓存中有userinfo的信息,说明用户登录了。
  if(userinfo.openId){
    //将用户信息储存到data的userinfo字段里面,this.userinfo就是指的这个字段。
    this.userinfo = userinfo
   //***需要添加的部分***
    this.rankArray()
  }
},


onShow与mounted的区别


onShow是小程序的生命周期,每次显示页面都会触发,重新生成随机语句


mounted是vue是生命周期,加载页面后会被触发,如果将rankArray函数放在mounted中,只会在加载小程序页面时触发,加载完成后,如果不退出小程序,这个页面就不会被重新加载,会被放在页面栈里面,所以首页、个人中心页面互相切换时,就不会再触发mounted,也就不会重新生成随机语句了


5、查看效果


切换首页和个人中心页面,查看随机语句是否变化


image.png

目录
相关文章
|
3月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
777 7
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
786 1
|
3月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
40 0
|
3月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
565 0
|
3月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
184 7
ly~
|
4月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
93 6
|
3月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
267 1
|
3月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
99 5
|
3月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
78 5
|
3月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1240 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机