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、查看效果
切换首页和个人中心页面,查看随机语句是否变化