1、修改src/pages文件夹
pages文件夹里面是小程序的所有页面,我们将counter、logs这两个文件夹删掉,只留下index文件夹
2、修改src/app.json文件
将文件中的代码全部删除掉,粘贴下面代码。这个文件与原生小程序框架里面的app.json文件是一样的
{ "pages": [ "pages/index/main" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#EA5149", "navigationBarTitleText": "真自律", "navigationBarTextStyle": "black" } }
3、修改src/App.vue文件
将原先的代码删除掉,用下面代码替换掉原先的代码
其中标签中的样式代码与小程序整体代码逻辑关系不大,在本课程中就不详细讲解了,直接复制粘贴到你的代码中就可以啦~
<script> export default { } </script> <style> /*页面背景样式*/ page{ height: 100%; background: #F0F0F0; } /*提示消息*/ .prompt{ margin-top: 50px; margin-bottom: 30px; font-size: 14px; color: #888888; text-align: center; } </style>
4、删除dist文件夹
后面我们会重新生成,放心大胆的删就可以了
5、启动项目
打开终端,进入到项目目录中,运行npm run dev
启动项目,会重新生成dist文件夹
~/WeChatProjects/truth_hold$ npm run dev //系统返回消息 > truth_hold@1.0.0 dev /Users/xuzhaoning/WeChatProjects/truth_hold > node build/dev-server.js wx DONE Compiled successfully in 5412ms
6、查看效果
打开微信开发者工具,会看到下面效果