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

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

<!-- 参考代码，无需粘贴
  <label class="left">
    <img class="img" src="/static/images/approval.png">
  </label>
  <label class="name">&nbsp;&nbsp;意见反馈</label>
  ...
</div> -->

（3）查看效果

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

3、添加样式代码

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

<style lang='scss'>
.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;
}
</style>

作者：猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~
可到【猫宁一】公众号回复【源码】领取我所有全栈项目代码哦~

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