4.3【微信小程序全栈开发课程】个人中心（三）--操作指引页面

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">&nbsp;&nbsp;操作指引</label>
  ...
</div> -->

3、查看效果

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>

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

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