前后端分离项目—微信小程序的创建及app.json的配置(二)

本人框架入门，此处记录完成一个前后端分离项目笔记，若有错误，还望指正，持续更新中…

4.创建微信小程序项目

微信公众平台 (qq.com)

微信开放文档 (qq.com)

4.1获取appid

登录微信公众平台获取自己对应的appid并创建项目，不选择云服务，使用js模板。

5.配置app.json

5.1添加页面

创建完成微信小程序项目后，在app.json中添加页面代码

  "pages":[
    "pages/index/index",
    "pages/cate/cate",
    "pages/store/store",
    "pages/my/my",
    "pages/logs/logs"
  ],

5.2修改顶部框样式

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#6b8770",
    "navigationBarTitleText": "易物",
    "navigationBarTextStyle":"white"
  },

5.3添加taber底部导航栏

"tabBar": {
    "color": "#999",
    "selectedColor": "#6b8770",
    "backgroundColor": "#ededed",
    "position": "bottom",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icons/home.png",
      "selectedIconPath": "icons/homef.png"
    },{
      "pagePath": "pages/cate/cate",
      "text": "类型",
      "iconPath": "icons/cate.png",
      "selectedIconPath": "icons/catef.png"
    },{
      "pagePath": "pages/store/store",
      "text": "物品库",
      "iconPath": "icons/store.png",
      "selectedIconPath": "icons/storef.png"
    },{
      "pagePath": "pages/my/my",
      "text": "个人中心",
      "iconPath": "icons/my.png",
      "selectedIconPath": "icons/myf.png"
    }]
  },

图标的需要自己阿里巴巴矢量图标库进行下载 iconfont-阿里巴巴矢量图标库
下载后放在pages同级文件的icons中，通过路径进行引入。
最终完成效果