2.1【微信小程序全栈开发课程】小程序前端页面初始配置

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后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！
可关注【猫宁一】公众号领取我所有全栈项目代码哦~

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