mpvue读书--个人中心00_准备

本项前端使用mpvue，微信小程序api
后端使用koa2，mongoose

一、个人中心大概实现流程

二、个人中心效果图

三、个人中心页面部分

四、项目搭建

mpvue读书–项目初始化
vuex搭建

到这一步，我们的前端页面就能掌控自如了，而且还能有得力助手vuex的帮助
让我们在这些基础上，完成我们的项目吧。

五、创建页面并配置底部tabbar

• 底部tabbar在app.json里配置，语法与原生小程序api相同
• 这里使用了mpvue模版自带的tab icon图片

{
  "pages": [
    "pages/homepage/main",
    "pages/mine/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#999",
    "backgroundColor": "#fafafa",
    "selectedColor": "#333",
    "borderStyle": "white",

    "list": [{
      "text": "首页",
      "pagePath": "pages/homepage/main",
      "iconPath": "static/tabs/home.png",
      "selectedIconPath": "static/tabs/home-active.png"
    }, {
      "text": "订单",
      "pagePath": "pages/homepage/main",
      "iconPath": "static/tabs/orders.png",
      "selectedIconPath": "static/tabs/orders-active.png"
    },{
      "text": "我的",
      "pagePath": "pages/mine/main",
      "iconPath": "static/tabs/orders.png",
      "selectedIconPath": "static/tabs/orders-active.png"
    }],

    "items": [{
      "name": "首页",
      "pagePath": "pages/homepage/main",
      "icon": "static/tabs/home.png",
      "activeIcon": "static/tabs/home-active.png"
    }, {
      "name": "订单",
      "pagePath": "pages/homepage/main",
      "icon": "static/tabs/orders.png",
      "activeIcon": "static/tabs/orders-active.png"
    }],
    "position": "bottom"
  }
}

• 创建页面
  
• main.js main.json文件的内容是固定的写法，套用即可
• index.vue才是重点写页面和逻辑的地方

---

项目参考：慕课网
万事不顺，查文档
mpvue五分钟教程
vue官方文档

如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com