![d96c72b4b1e124431caa43ad3e47b00b.png](https://i-blog.csdnimg.cn/blog_migrate/3108c20fe6724dd81718feb76c9aeaa4.jpeg)
上节课已经将用户的微信头像、微信昵称显示出来了,这节课,我们在微信昵称的下面实现随机语句的显示
也就是挑选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、查看效果
切换首页和个人中心页面,查看随机语句是否变化
![0d26e0dcb7cd50862719f3ecd437c365.png](https://i-blog.csdnimg.cn/blog_migrate/56b8e4d3e6267e61f5eb5a0c0b10c204.jpeg)
作者:猫宁一 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程! 可关注【猫宁一】公众号领取我所有全栈项目代码哦~ 点击查看课程目录:微信小程序全栈开发课程目录