4.4【微信小程序全栈开发课程】个人中心（四）--创建意见反馈页面

快来打我* 2023-06-08 06:55 29阅读 0赞

#### 1、创建意见反馈页面 ####

###### （1）在src/pages文件夹下面新建一个命名为opinion的文件夹，并且在文件夹下创建opinion.vue、main.js两个文件 ######

###### （2）修改src/pages/opinion/main.js文件 ######

import Vue from 'vue'
    import App from './opinion'
    
    const app = new Vue(App)
    app.$mount()

###### （3）修改opinion.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",
      "pages/opinion/main"
    ],

###### （5）重启项目 ######

如果目前项目在启动状态要先停止项目（ctrl+c）,再重新启动，新页面就创建完成了

//在项目目录中运行
    ~/WeChatProjects/truth_hold$ npm run dev

#### 2、跳转到新页面 ####

###### （1）编辑me.vue文件，在script部分methods对象中添加showOpinion方法，里面写跳转页面的代码 ######

//参考代码，无需粘贴
    //showInstruction () { 
      //...
    //},
    
    
    //需要粘贴的部分,不要忘记在上一行添加逗号隔开
    //跳转到意见反馈页面
    showOpinion () { 
      wx.navigateTo({ 
        url:'/pages/opinion/main'
      })
    }

###### （2）编辑me.vue文件夹template部分 ######

将showOpinion方法添加到页面的点击事件上

<div class="row" @click='showOpinion'>

###### （3）查看效果 ######

点击个人中心页面，意见反馈这一栏，就能成功跳转了

#### 3、添加样式代码 ####

编辑opinion.vue文件的style部分，添加样式代码

.container{ 
      background:#FFFFFF;
      font-size:15px; .text { 
        height: 110px;
      }
      .row{ 
        border-bottom: 1px #E8E8E8 solid;
        padding: 5px 15px; .name { 
          width:80%;
          height: 40px;
          line-height: 40px;
        }
        .input { 
          width:100%;
          height:85px;
          font-size:14px;
          padding-top:5px;
        }
        .word-count { 
          float:right;
          color: #808080;
        }
        .img-count { 
          float:right;
          line-height: 40px;
          color: #808080;
        }
        .add-img { 
          width:80px;
          height:80px;
        }
        .img { 
          width:66px;
          height:66px;
          margin-bottom:7px;
          margin-right: 10px;
        }
        .wechat-input{ 
          font-size:14px;
        }
      }
    }  
    button { 
      margin:20px auto;
      width:90%;
      border-radius: 5px;
      background:#EA5149;
      font-size:16px;
      color:#FFFFFF;
      font-weight:bold;
    }

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

![format_png][]

[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png]: /images/20230531/1fb1d12bd0b64713ad864b31b24cf37c.png