1、创建说明书页面
在第二章讲过创建新页面的步骤,这次再来复习一下
(1)在src/pages文件夹下面新建一个命名为instruction的文件夹,并且在文件夹下创建instruction.vue、main.js两个文件
(2)修改src/pages/instruction/main.js文件
import Vue from 'vue'
import App from './instruction'
const app = new Vue(App)
app.$mount()
(3)修改instruction.vue文件
<template>
<div>
操作指引
</div>
</template>
<script>
export default {
}
</script>
<style lang='scss'>
</style>
(4)在app.json中添加新页面
"pages": [
"pages/me/main",
"pages/index/main",
"pages/instruction/main"
],
(5)重启项目
如果目前项目在启动状态要先停止项目(ctrl+c),再重新启动,新页面就创建完成了
//在项目目录中运行
~/WeChatProjects/truth_hold$ npm run dev
2、跳转到新页面
(1)编辑me.vue文件,在script部分methods对象中添加showInstruction方法,里面写跳转页面的代码
//参考代码,无需粘贴
//rankArray () {
//...
//},
//需要添加的部分,不要忘记在上一行添加逗号隔开
//跳转到操作指引页面
showInstruction () {
//wx.navigateTo是小程序现成的API,保留当前页面,跳转到应用内的某个页面
wx.navigateTo({
url:'/pages/instruction/main'
})
}
(2)编辑me.vue文件夹template部分
将showInstruction添加到页面的点击事件上面
<!-- 在这一行上面添加点击事件 -->
<div class="row" @click='showInstruction'>
<!-- 参考代码,无需粘贴
<label class="left">
<img class="img" src="/static/images/homework.png">
</label>
<label class="name"> 操作指引</label>
...
</div> -->
3、查看效果![](https://i-blog.csdnimg.cn/blog_migrate/f4b9dc7438cdacc356d9f1c159f4f9ea.png)
4、完善操作指引页面
操作指引页面是展示页面,没有功能的交互,大家可以参考一下样式哦~具体实现的效果,可以看看我们实际小程序中的效果,与课程关联度不大,就不在我们课程里贴了
<template>
<div class="instruction">
<div class="title">
<img class="img" :src="src">
<p class="content content-title">真自律是一款自律神器,将分数作为奖励惩罚手段,提醒对良好行为的关注和强化。</p>
<p class="content content-title">将生活想象成通关打怪,打败自己的心魔加分,被心魔打败减分。</p>
</div>
<p class="little-tip">1、给大家分享一下我一天的记录:</p>
<p class="content tip"><label class="point">◉</label> 早上7点没有按时起床,减1分,目前-1分;</p>
<p class="content tip"><label class="point">◉</label> 起床看了10页书,加2分,目前1分;</p>
<p class="content tip"><label class="point">◉</label> 在地铁上做了一个超难的算法题,加5分,目前6分;</p>
<p class="content tip"><label class="point">◉</label> 工作刷微博,又分心了,扣2分,目前4分;</p>
<p class="content tip"><label class="point">◉</label> 午饭吃的绿色蔬菜,忍住没有吃麻辣烫,奖励自己5分,目前9分;</p>
<p class="content tip"><label class="point">◉</label> 下午碰到了杠精,但是控制住了自己的情绪,没有生气,必须表扬自己,加5分,目前14分;</p>
<p class="content tip"><label class="point">◉</label> 晚饭没有忍住T_T,还是吃了麻辣烫,罪恶罪恶,减10分,目前4分;</p>
<p class="content tip"><label class="point">◉</label> 第二天早上按时起床,加1分,目前5分;</p>
<p class="content prompts">加减多少分没有具体标准,主要看心魔给自己带来的影响,一般控制在1-10分之间。</p>
<p class="little-tip">2、用什么动力来督促自己坚持记录呢?</p>
<p class="content prompts">(1)设置相应的奖励</p>
<p class="content tip"><label class="point">◉</label> 心态的奖励。</br>比如分数越多就会越幸运;凑足3个100分,就能有贵人相助等等。虽然听起来比较幼稚,对我自己而言这种心理暗示对生活还是很有积极意义的~</p>
<p class="content tip"><label class="point">◉</label> 物质的奖励。</br>比如凑足300分,奖励自己一顿海底捞;够了500分,奖励自己旅游基金1000元等。虽然都是从自己身上薅下的肉,但是生活更有仪式感了~</p>
<p class="content prompts">(2)减小记录的阻力</p>
<p class="content tip">将小程序放在微信浮窗里,或者添加到桌面,减小打开程序的步骤,从而减小自己记录的阻力。</p>
<img class="index-img" :src="src4">
<p class="little-tip">3、小程序使用介绍</p>
<p class="content prompts">(1)首页</p>
<p class="content tip"><label class="point">◉</label> 清零功能:会将当前分数设为0,历史记录不会被清空。</p>
<p class="content tip"><label class="point">◉</label> 撤销功能:撤销上一步的操作。</p>
<img class="index-img" :src="src1">
<p class="content prompts">(2)记录页面</p>
<p class="content tip"><label class="point">◉</label> 添加备注:备注默认为空,可以点击添加备注。</p>
<p class="content tip"><label class="point">◉</label> 修改备注:备注添加完成后,可以修改。</p>
<img class="index-img" :src="src2">
<p class="content prompts">(3)我的页面</p>
<p class="content tip"><label class="point">◉</label> 清空记录:清空所有的历史记录,清空后记录不能恢复,谨慎操作~</p>
<p class="content tip"><label class="point">◉</label> 意见反馈:对于小程序的建议、问题反馈、合作信息等,可以通过这个页面提交。</p>
<img class="index-img" :src="src3">
</div>
</template>
<script>
export default {
data () {
return {
src: "../../static/images/littleTip-huang.jpg",
src1: "../../static/images/index.jpg",
src2: "../../static/images/record.jpg",
src3: "../../static/images/me.jpg",
src4: "../../static/images/share.png"
}
}
}
</script>
<style lang='scss'>
.instruction {
.title {
background:#feb500;
border-radius: 16rpx;
font-size: 16px;
.img {
width:100%;
height:120px;
}
.content-title {
padding:4px 20px 10px 20px;
}
}
.content {
padding:4px 15px;
font-size: 16px;
font-weight:bold;
}
.little-tip {
padding:15px 15px 3px 15px;
font-size: 15px;
font-weight:bold;
color: #EA5149;
}
.tip {
font-size: 15px;
font-weight:normal;
.point{
color: #feb600;
}
}
.prompts {
font-size: 15px;
}
.index-img {
display:block;
margin:10px auto;
height:560px;
border-radius: 10px;
margin-bottom:30px;
}
}
</style>
作者:猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程!
可关注【猫宁一】公众号领取我所有全栈项目代码哦~点击查看课程目录:微信小程序全栈开发课程目录