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"> 意见反馈</label> ... </div> -->
（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; }
