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

朴灿烈づ我的快乐病毒、 2023-06-08 06:55 91阅读 0赞

#### 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'>

#### 3、查看效果![format_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>

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

![format_png 1][]

[format_png]: /images/20230531/448b255191eb48a7a928c09d54d70a71.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 1]: /images/20230531/6654684dcb924999b52bfe88ebe2b391.png