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、查看效果
打开微信开发者工具,会看到下面效果
作者:猫宁一
95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程!
可关注【猫宁一】公众号领取我所有全栈项目代码哦~点击查看课程目录:微信小程序全栈开发课程目录