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天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
11 1
|
1天前
|
小程序 前端开发 JavaScript
轻松学会微信小程序开发(一)
轻松学会微信小程序开发(一)
|
1天前
|
JSON 小程序 JavaScript
微信小程序开发1
微信小程序开发1
|
1天前
|
数据采集 存储 人工智能
【Python+微信】【企业微信开发入坑指北】4. 企业微信接入GPT,只需一个URL,自动获取文章总结
【Python+微信】【企业微信开发入坑指北】4. 企业微信接入GPT,只需一个URL,自动获取文章总结
40 0
|
1天前
|
人工智能 机器人 API
【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
33 0
|
1天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中,需注意10大坑点:遵守小程序限制与规范;解决兼容性问题;优化数据加载速度;适应分享功能限制;处理视频播放挑战;优化图片加载显示;管理资源文件;提升用户体验;考虑安全性;及时更新维护。通过测试、优化和遵循官方文档,可克服这些问题,打造优质小程序。
|
1天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
1天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
1天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
1天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。

热门文章

最新文章