4-2【微信小程序全栈开发课程】个人中心（二）--显示随机语句

上节课已经将用户的微信头像、微信昵称显示出来了，这节课，我们在微信昵称的下面实现随机语句的显示

也就是挑选10条励志的句子，用户每次切换到个人中心页面，都会随机显示这10条句子中的一条

1、添加变量

编辑<script>部分的data对象，添加quote变量，用来保存当前应该显示的语句

//参考代码，无需粘贴
//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、查看效果

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

作者：猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~
可到【猫宁一】公众号回复【源码】领取我所有全栈项目代码哦~

点击查看课程目录：微信小程序全栈开发课程目录