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

落日映苍穹つ 2023-06-08 04:42 1阅读 0赞

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

也就是挑选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、查看效果 ####

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

> **作者：猫宁一**  
> 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 1][]

[format_png]: /images/20230531/65bdcbbb4003411e95ae1093a233cbd9.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 1]: /images/20230531/0bf4a66eb2ea45a8971cb30b8f748a99.png