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

目录
相关文章
|
1月前
|
人工智能 小程序 前端开发
一个小程序轻量AR体感游戏,开发实现解决方案
针对青少年运动兴趣不足问题,AR体感游戏凭借沉浸式互动体验脱颖而出。结合小程序“AI运动识别”插件与WebGL渲染技术,可实现无需外设的轻量化AR健身游戏,如跳糕、切水果等,兼具趣味性与锻炼效果,适用于儿童健身及职工团建,即开即玩,低门槛高参与。
|
1月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?哪个好
小程序的开发方式丰富多元,开发团队可根据自身的技术背景、项目具体需求以及资源状况,灵活挑选最为适宜的开发路径。以下将详细介绍几种主流的小程序开发方式。
261 1
|
1月前
|
运维 小程序 数据可视化
小程序开发平台有哪些?SaaS小程序制作平台哪个好
小程序开发模式详解:自主开发、SaaS小程序制作平台与外包全对比 选择合适的小程序开发模式,是项目成功的基石。这三种模式在成本、周期、控制力和灵活性上各有千秋,适用于不同阶段和不同类型的企业。下面我们将逐一深入剖析。
248 7
|
1月前
|
移动开发 小程序 前端开发
小程序快速开发平台有哪些?
小程序开发并非“一刀切”,需结合技术储备、资金预算、时间规划及功能需求等多维度因素综合考量。以下为您详细拆解五种主流开发方案及其适用场景,助您精准匹配开发路径。
171 3
|
1月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?小程序开发制作软件推荐
小程序开发方案全解析:5种主流方式与选择指南 小程序开发需根据技术能力、预算、时间及功能需求综合决策。以下为5种主流开发方案及适用场景分析:
386 0
|
2月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
3月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
173 0
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
|
9月前
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。

热门文章

最新文章