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、查看效果

切换首页和个人中心页面,查看随机语句是否变化
4.2【微信小程序全栈开发课程】个人中心(二)--显示随机语句_第1张图片

作者:猫宁一
95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程!
可关注【猫宁一】公众号领取我所有全栈项目代码哦~

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

你可能感兴趣的:(微信小程序全栈开发课程)